Getting Started with the Vue Tab Component in Vue 2

11 Jun 202423 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue Tab component

To get start quickly with Vue Tab, you can check on this video:

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The following is the list of dependencies required to use the Tab component in your application.

|-- @syncfusion/ej2-vue-navigations
  |-- @syncfusion/ej2-base
  |-- @syncfusion/ej2-vue-base
  |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-buttons

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

or

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Once the quickstart project is set up with default settings, proceed to add Syncfusion components to the project

Add Syncfusion Vue packages

Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Tab component as an example. Install the @syncfusion/ej2-vue-navigations package by running the following command:

npm install @syncfusion/ej2-vue-navigations --save

or

yarn add @syncfusion/ej2-vue-navigations

Import Syncfusion CSS styles

You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Tab component and its dependents were imported into the <style> section of src/App.vue file.

~/src/App.vue

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Add Syncfusion Vue component

Follow the below steps to add the Vue Tab component:

1. First, import and register the Tab component in the script section of the src/App.vue file.

~/src/App.vue

<script>
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-vue-navigations';
export default {
  components: {
    'ejs-tab': TabComponent,
    'e-tabitem': TabItemDirective,
    'e-tabitems': TabItemsDirective
  }
}
</script>

2. In the template section, define the Tab component with content and header properties

~/src/App.vue

<template>
    <div id="app">
    <ejs-tab id='element'>
        <e-tabitems>
                    <e-tabitem :header='headerText0' :content="content0"></e-tabitem>
                    <e-tabitem :header='headerText1' :content="content1"></e-tabitem>
                    <e-tabitem :header='headerText2' :content="content2"></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  </div>
</template>

3. Declare the value for the content and header properties in the script section.

~/src/App.vue

<script>
data: function(){
        return {

          headerText0: { text: 'ASP.NET' },
          headerText1: { text: 'ASP.NET MVC' },
          headerText2: { text: 'JavaScript' },

        content0: 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +
        'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +
        'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +
        'to Microsoft\'\s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +
        'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +
        'ASP.NET components to process SOAP messages.',

         content1: 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +
        'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +
        'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +
        'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.',

         content2: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as ' +
        'part of web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +
        'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +
        'both game development and the creation of desktop applications.',

        }
   }
</script>

Here is the summarized code for the above steps in the src/App.vue file:

~/src/App.vue

<template>
  <div id="app">
    <ejs-tab id='element'>
      <e-tabitems>
        <e-tabitem :header='headerText0' :content="content0"></e-tabitem>
        <e-tabitem :header='headerText1' :content="content1"></e-tabitem>
        <e-tabitem :header='headerText2' :content="content2"></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  </div>
</template>
<script>
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-vue-navigations';

export default {
  name: "App",
  components: {
    'ejs-tab': TabComponent,
    'e-tabitem': TabItemDirective,
    'e-tabitems': TabItemsDirective
  },
  data: function () {
    return {

      headerText0: { text: 'ASP.NET' },
      headerText1: { text: 'ASP.NET MVC' },
      headerText2: { text: 'JavaScript' },

      content0: 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +
        'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +
        'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +
        'to Microsoft\'s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +
        'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +
        'ASP.NET components to process SOAP messages.',

      content1: 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +
        'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +
        'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +
        'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.',

      content2: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as ' +
        'part of web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +
        'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +
        'both game development and the creation of desktop applications.',

    }
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Run the project

To run the project, use the following command:

npm run serve

or

yarn run serve

Initialize the Tab using HTML elements

The Tab component can be rendered based on the given HTML element using <ejs-tab> tag.
Header section must be enclosed with in a wrapper element using e-tab-header class and corresponding content must be mapped with e-content class.
You need to follow the below structure of HTML elements to render the Tab,

  <ejs-tab id="element">   --> Root Tab element
    <div class="e-tab-header">      --> Tab header
       <div>   --> Header Item
       </div>
    </div>
    <div class="e-content">      --> Tab content
       <div>   --> Content Item
       </div>
    </div>
  </ejs-tab>

~/src/App.vue

<template>
        <div id="app">
                <ejs-tab id='element'>
                        <div class="e-tab-header">
                                <div>Twitter </div>
                                <div>Facebook </div>
                                <div>WhatsApp </div>
                        </div>
                        <div class="e-content">
                                <div>
                                        Twitter is an online social networking service that enables users to send and
                                        read short 140-character messages called 'tweets'. Registered users can read and
                                        post tweets, but those who are unregistered can only read them. Users access
                                        Twitter through the website interface, SMS or mobile device app Twitter Inc. is
                                        based in San Francisco and has more than 25 offices around the world. Twitter
                                        was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah
                                        Glass and launched in July 2006. The service rapidly gained worldwide
                                        popularity, with more than 100 million users posting 340 million tweets a day in
                                        2012.The service also handled 1.6 billion search queries per day.
                                </div>
                                <div>
                                        Facebook is an online social networking service headquartered in Menlo Park,
                                        California. Its website was launched on February 4, 2004, by Mark Zuckerberg
                                        with his Harvard College roommates and fellow students Eduardo Saverin, Andrew
                                        McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited
                                        the website's membership to Harvard students, but later expanded it to colleges
                                        in the Boston area, the Ivy League, and Stanford University. It gradually added
                                        support for students at various other universities and later to high-school
                                        students.
                                </div>
                                <div>
                                        WhatsApp Messenger is a proprietary cross-platform instant messaging client for
                                        smartphones that operates under a subscription business model. It uses the
                                        Internet to send text messages, images, video, user location and audio media
                                        messages to other users using standard cellular mobile numbers. As of February
                                        2016, WhatsApp had a user base of up to one billion,[10] making it the most
                                        globally popular messaging application. WhatsApp Inc., based in Mountain View,
                                        California, was acquired by Facebook Inc. on February 19, 2014, for
                                        approximately US$19.3 billion.
                                </div>
                        </div>
                </ejs-tab>
        </div>
</template>
<script>
import { TabComponent } from '@syncfusion/ej2-vue-navigations';

export default {
        name: "App",
        components: {
                'ejs-tab': TabComponent
        },
        data: function () {
                return {
                }
        }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>

Initialize the Tab using V-slot Template

In the Vue Tab component, the v-slot directive is used to define a slot template in the component’s template where users can insert custom content. Refer to the following code sample.

~/src/App.vue

<template>
  <div id="app">
    <ejs-tab id="element">
      <e-tabitems>
        <e-tabitem :header='datePickerText' :content="'datePickerTemplate'">
          <template v-slot:datePickerTemplate>
            <ejs-datepicker></ejs-datepicker>
          </template>
        </e-tabitem>
        <e-tabitem :header='calendarText' :content="'calendarTemplate'">
          <template v-slot:calendarTemplate>
            <ejs-calendar></ejs-calendar>
          </template>
        </e-tabitem>
      </e-tabitems>
    </ejs-tab>
  </div>
</template>
<script>

import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-vue-navigations';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-vue-calendars';

export default {
  name: "App",
  components: {
    "ejs-tab": TabComponent,
    "e-tabitems": TabItemsDirective,
    "e-tabitem": TabItemDirective,
    "ejs-datepicker": DatePickerComponent,
    "ejs-calendar": CalendarComponent
  },
  data: function () {
    return {
      datePickerText: { text: 'Datepicker' },
      calendarText: { text: 'Calendar' },
    }
  }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
</style>

See Also

• How to load tab with DataSource

NOTE

You can refer to our Vue Tab feature tour page for its groundbreaking feature representations. You can also explore our Vue Tab Component example that shows how to render the Tab in Vue.