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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more