Getting Started with the Vue Tree Grid Component in Vue 3

This article provides a step-by-step guide for setting up a Vite project with a JavaScript environment and integrating the Syncfusion^® Vue Tree Grid component using the Composition API / Options API.

The Composition API, introduced in Vue.js 3, provides an alternative way to organize and reuse component logic.

The Options API is the traditional approach to writing Vue.js components, organizing component logic into a series of options that define the component’s properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more.

Prerequisites

System requirements for Syncfusion^® Vue UI components

Set up the Vite project

A recommended way to get started with Vue is to scaffold a project using Vite. To create a new Vite project, execute one of the following commands that are specific to either NPM or Yarn:

npm create vite@latest

yarn create vite

Executing one of the above commands will prompt a series of configuration steps for the project setup:

Define the project name: Specify the name of the project directly. For this article, the project name is my-project.

? Project name: » my-project

Select Vue as the framework. This creates a Vue 3 project.

? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Others

Choose JavaScript as the framework variant to build this Vite project using JavaScript and Vue.

? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
  TypeScript
  Customize with create-vue ↗
  Nuxt ↗

Install dependencies and start the dev server.

Install with npm and start now?: Yes

Terminate the application, then run the following command:

cd my-project

Add Syncfusion^® Vue Tree Grid packages

To install the Tree Grid component, use the following command:

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

yarn add @syncfusion/ej2-vue-treegrid

Before including Syncfusion styles, make sure to remove the default styles defined in style.css. This helps prevent unintended style overrides and ensures that Syncfusion components render correctly.

Adding CSS reference

You can add the CSS files required for the Syncfusion Vue Tree Grid component using one of the following methods.

Option 1: Add CSS References from a theme package

Themes for Syncfusion^® Tree Grid components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

Composition API ~/src/App.vue
<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/treegrid/treegrid/index.css";
</style>

Option 2: Add CSS References from component packages

After installing the treegrid package, the required CSS files are available in the corresponding Syncfusion packages under the node_modules/@syncfusion directory. Add the following CSS references to the src/App.vue file:

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
    @import '../node_modules/@syncfusion/ej2-notifications/styles/material3.css';
    @import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material3.css";
</style>

Adding Tree Grid component

The tree grid code should be added in the src/App.vue file.

Composition API ~/src/App.vue
Options API ~/src/App.vue
<template>
    <div id="app">
        <!-- Assigns the dataset to the TreeGrid component -->
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks'>
          <!-- Define the columns to be displayed -->
          <e-columns>
                <e-column field='TaskID' headerText='Task ID' textAlign='Right' width=150></e-column>
                <e-column field='TaskName' headerText='Task Name' width=170></e-column>
                <e-column field='StartDate' headerText='Start Date' textAlign='Right' format='yMd' width=130></e-column>
                <e-column field='EndDate' headerText='End Date' textAlign='Right' format='yMd' width=130></e-column>
                <e-column field='Duration' headerText='Duration' textAlign='Right' width=100></e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
</template>
<script setup>
import { TreeGridComponent as EjsTreegrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
// Defines the data to be displayed in the TreeGrid
const dataSource = [
    {
        TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
        subtasks: [
            { TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4, },
            { TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4, },
        ],
    },
    {
        TaskID: 4, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
        subtasks: [
            { TaskID: 5, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3, },
            { TaskID: 6, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2, },
            { TaskID: 7, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
        ],
    }
];

const data = dataSource;
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/material3.css";
</style>
<template>
    <div id="app">
        <!-- Assigns the dataset to the TreeGrid component -->
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks'>
          <!-- Define the columns to be displayed -->
          <e-columns>
                <e-column field='TaskID' headerText='Task ID' textAlign='Right' width=150></e-column>
                <e-column field='TaskName' headerText='Task Name' width=170></e-column>
                <e-column field='StartDate' headerText='Start Date' textAlign='Right' format='yMd' width=130></e-column>
                <e-column field='EndDate' headerText='End Date' textAlign='Right' format='yMd' width=130></e-column>
                <e-column field='Duration' headerText='Duration' textAlign='Right' width=100></e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
</template>
<script>
import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
// Defines the data to be displayed in the TreeGrid
const dataSource = [
    {
        TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
        subtasks: [
            { TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4, },
            { TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4, },
        ],
    },
    {
        TaskID: 4, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
        subtasks: [
            { TaskID: 5, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3, },
            { TaskID: 6, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2, },
            { TaskID: 7, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
        ],
    }
];

export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
  },
  data() {
    return {
      data: dataSource
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/material3.css";
</style>

Run the application

npm run dev

yarn run dev

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with the Vue Tree Grid Component in Vue 3

Prerequisites

Set up the Vite project

Add Syncfusion^® Vue Tree Grid packages

Adding CSS reference

Option 1: Add CSS References from a theme package

Option 2: Add CSS References from component packages

Adding Tree Grid component

Run the application

See also

Getting Started with the Vue Tree Grid Component in Vue 3

Prerequisites

Set up the Vite project

Add Syncfusion® Vue Tree Grid packages

Adding CSS reference

Option 1: Add CSS References from a theme package

Option 2: Add CSS References from component packages

Adding Tree Grid component

Run the application

See also

Add Syncfusion^® Vue Tree Grid packages