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)