Vue Dynamic Components

Apr 22, 2020

Vue's component component can dynamically render a different component based on the state of your data. The is attribute is how you can tell component what component to render. For example, below is a simple tab UI:

The above tabbed UI consists of 3 different Vue components: home, about, and contact.

Vue.component('home', {
  template: '<div>This is the home tab</div>'
Vue.component('about', {
  template: '<div>This tab talks about us</div>'
Vue.component('contact', {
  template: '<div>This tab provides contact info</div>'

Using component and :is, Vue can render different components based on the state of tab:

<component class="tab-content" :is="tab"></component>

Whenever tab changes, Vue changes what component is rendered. Below is the full Vue app that handles the state of tab.

const app = new Vue({
  data: () => ({ tab: 'home' }),
  methods: {
    selected: function(tab) {
      return tab === ? 'selected' : '';
  template: `
      <div class="buttons">
        <button @click="tab = 'home'" :class="selected('home')">
        <button @click="tab = 'about'" :class="selected('about')">
          About Us
        <button @click="tab = 'contact'" :class="selected('contact')">
          Contact Us
      <component class="tab-content" :is="tab"></component>

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

More Vue Tutorials