16 Feb 2021

Vuejs Tabbed Interface Example / Tutorial | Vue component Element

In this post l am going to create an application with Vuejs - A tabbed interface. We have use a special Vue element that's v-component . From this tutorial, you can know the power or use of component element of Vue .
<component/> is a special Element to use that is predefined in Vuejs Framework. By which you can attach any Registered Vue Component daynamically on applied condition.

<div id="app" class="m-5">

        v-for="tab in tabs"
        v-on:click="currentTab = tab"
        class='btn d-inline-block border border-primary'

<component class="card card-body" v-bind:is='currentTabComponent'> </component>

Vue.component("Blogger", {
      template: '<div> Create free blog in your reginal language! </div>'
  Vue.component("Vuejs", {
      template: '<div> Vue js is alternative to Facebook Inc. powered React.js a framework. Its size is 20KB with gziped. Which provides lighting☇ speed to your project. </div>'
  Vue.component("Boostrap", {
      template: '<div> Boostrap is a great framework for web devlopment of HTML, CSS & JavaScript. It was firstly introduced by Twitter.  </div>'
  let vue = new Vue({
          el : "#app",
        data :  {
            currentTab : "Blogger",
            tabs : ["Blogger", "Vuejs", "Boostrap"]
          computed : {
          currentTabComponent : function (){
              return this.currentTab;

Live Preview


No comments:

No Comments