Getting Started with the Vue Pivotview Component in Vue 2

22 Jul 20265 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 Pivot Table component.

To get started quickly with the Vue Pivot Table, watch this video:

Prerequisites

Ensure your development environment meets the System requirements for Syncfusion® Vue UI components.

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
yarn global add @vue/cli
vue create quickstart

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

Vue 2 project

Once the project is created, move into the project folder and start the development server:

cd quickstart
npm run serve
cd quickstart
yarn run serve

The dev server starts at http://localhost:8080 by default. Open this URL in a browser to verify the scaffold runs before adding Syncfusion® components.

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

Add Syncfusion® Vue packages

To install the Vue Pivot Table component, run the following command:

npm install @syncfusion/ej2-vue-pivotview --save
yarn add @syncfusion/ej2-vue-pivotview

Import Syncfusion® CSS styles

Themes for the Syncfusion® Vue Pivot Table can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, refer to the themes documentation.

The following example demonstrates the installation of the Tailwind 3 theme package from npm. Each component in this theme package includes an index.css file that automatically loads all required dependency styles.

To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme --save
yarn add @syncfusion/ej2-tailwind3-theme

Import the required theme styles in the <style> section of the src/App.vue file:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css';

Adding Pivot Table component

The Pivot Table component code should be added to the src/App.vue file. Replace the default contents of src/App.vue with the following sample.

<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings"> </ejs-pivotview>
    </div>
</template>

<script>
import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview";

export default {
  components: {
    'ejs-pivotview': PivotViewComponent
  },
  data () {
    return {
      dataSourceSettings: {
        dataSource: [
            { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q1' },
            { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q2' },
            { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q3' },
            { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q4' }
        ],
        expandAll: true,
        columns: [{ name: 'Year' }, { name: 'Quarter' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }]
      }
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css';
</style>

Run the application

Use the following command to run the application:

npm run serve
yarn run serve

Troubleshooting: If the dev server fails to start, ensure no other process is using the default port (8080), and that the @vue/cli global install completed successfully (run vue --version to verify). If the vue command is not recognized, restart your terminal so the updated PATH is picked up.

See also