DEV Community

Cover image for Dynamic Components In Vue
Mahfuzur Rahman
Mahfuzur Rahman

Posted on

Dynamic Components In Vue

Dynamic components allow you to switch between different components based on a condition without using multiple conditional statements. To create a dynamic component, use the reserved tag with the 'is' attribute.

<component v-bind:is="currentComponent"></component> 
Enter fullscreen mode Exit fullscreen mode

In your Vue.js instance, you can update the value of 'currentComponent' to switch between components.

new Vue({ el: '#app', data: { currentComponent: 'component-a' }, components: { 'component-a': ComponentA, 'component-b': ComponentB } }); 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)