Tutorials / Vue /

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 === this.tab ? 'selected' : '';
    }
  },
  template: `
    <div>
      <div class="buttons">
        <button @click="tab = 'home'" :class="selected('home')">
          Home
        </button>
        <button @click="tab = 'about'" :class="selected('about')">
          About Us
        </button>
        <button @click="tab = 'contact'" :class="selected('contact')">
          Contact Us
        </button>
      </div>
      <component class="tab-content" :is="tab"></component>
    </div>
  `
});
app.$mount('#vue-tab-example');

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!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Vue Dynamic Components

More Vue Tutorials