Dynamic Components in Vue.js

A demo of dynamic components in Vue.js

by Asif Sharif Shahid

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<div>
  <v-tabs>
    <v-tabs-bar class="cyan" dark>
      <v-tabs-item href="javascript:void(0);" @click="currentView='manage-posts'">Manage Posts
      </v-tabs-item>
      <v-tabs-item href="javascript:void(0);" @click="currentView='create-post'">Create Post
      </v-tabs-item>
      <v-tabs-slider color="yellow"></v-tabs-slider>
    </v-tabs-bar>
    <v-tabs-items>
      <v-tabs-content :id="currentView">
        <v-card flat>
          <v-card-text>
            <component :is="currentView"></component>
          </v-card-text>
        </v-card>
      </v-tabs-content>
    </v-tabs-items>
  </v-tabs>
</div>
</div>

<template id="manage-template">
  <div>
    <h1>Manage Posts</h1>
  </div>
</template>

<template id="create-template">
  <div>
    <h1>Create Post</h1>
  </div>
</template>

JavaScript

Vue.component('manage-posts', {
  template: '#manage-template',
  data: function() {
    return {
      posts: [
        'Vue.js: The Basics',
        'Vue.js Components',
        'Server Side Rendering with Vue',
        'Vue + Firebase'
      ]
    }
  }
})

Vue.component('create-post', {
  template: '#create-template'
})

new Vue({
  el: '#app',
  data: {
    currentView: 'manage-posts'
  }
})