Getting Started: Syncfusion® Vue Components with JS & Composition API

18 Aug 20268 minutes to read

This article provides a step-by-step guide for setting up a Vite project with a JavaScript environment and integrating the Syncfusion® Vue components using the Composition API.

The Composition API is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior.

Prerequisites

Install the Syncfusion CLI

Install the Syncfusion CLI globally using the following command:

npm install -g @syncfusion/syncfusion-cli

Set up the Vite project using Syncfusion CLI

You can create a Vue application with Vite using the Syncfusion CLI. The CLI provides two ways to create a project:

Non-interactive mode

Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.

sf new my-project --framework vue --template grid

In this mode, the project configuration is passed directly in the command. The above command creates a Vue application with Vite and configured it with the Syncfusion® Grid component. The generated project uses the JavaScript and the Composition API.

Interactive mode

Interactive mode guides you through the project creation process with step-by-step prompts.

sf

When you run the sf command, the CLI prompts you to select the required project configuration options. To create a Vue application with Vite and the Syncfusion® Grid component, select the following options:

√ Project name? ... my-project
√ Choose Framework: » Vue
√ Choose Language: » JavaScript
√ Choose Template: » Grid
√ Choose Theme: » Material3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
√ Install dependencies and start app now? ... no

The above selections generate a Vue application with Vite and configure it with the Syncfusion® Grid component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.

The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.

Run the project

Once the project is created, navigate to the project directory and run the following commands in your terminal.

cd my-project
npm install
npm run dev

The output will appear as follows:

Grid Component

Prerequisites

System requirements for Syncfusion® Vue UI components

Set up the Vite project

A recommended approach for beginning with Vue is to scaffold a project using Vite. To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.

npm create vite@latest
yarn create vite

Using one of the above commands will lead you to set up additional configurations for the project as below:

  1. Project name - Type: my-project (or any name you want)

  2. Select framework - Choose: Vue

  3. Select variant - Choose: JavaScript

  4. Install with npm and start now? - Choose: No

  5. Go to your project and install packages:

cd my-project
npm install
cd my-project
yarn install

Now that my-project is ready to run with default settings, let’s add Syncfusion® components to the project.

Add Syncfusion® Vue packages

Syncfusion® Vue component packages are available at npmjs.com. To use Syncfusion® Vue components in the project, install the corresponding npm package.

This article uses the Vue Grid component as an example. To use the Vue Grid component in the project, the @syncfusion/ej2-vue-grids package needs to be installed using the following command:

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

Import Syncfusion® CSS styles

Syncfusion® Vue component themes can be applied using CSS or SASS from the npm theme packages. Additionally, CDN, CRG, or Theme Studio.

This example uses the Material 3 theme for the Grid component from the theme package. To install the Material 3 theme package, use the following command:

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

The necessary CSS styles for the Grid component were imported into the <style> section of src/App.vue file. Vite app generates a default styles.css file which we do not need for this example. Before running the sample, delete the content of src/style.css or remove the file if it’s unused.

<style>
  @import "../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css";
</style>

Add Syncfusion® Vue component

Follow the below steps to add the Vue Grid component using Composition API:

1.First, add the setup attribute to the script tag to indicate that Vue will be using the Composition API. And import the Grid component in the script section of the src/App.vue file.

<script setup>
  import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-grids';
</script>

2.Define the Grid component with the dataSource property and column definitions. Declare the values for the dataSource property.

<template>
  <ejs-grid :dataSource='data'>
    <e-columns>
      <e-column field='OrderID' width='100' textAlign="Right"></e-column>
      <e-column field='CustomerID' width='100'></e-column>
      <e-column field='EmployeeID' width='100' textAlign="Right"></e-column>
      <e-column field='Freight' width='100' format="C2" textAlign="Right"></e-column>
      <e-column field='ShipCountry' width='100'></e-column>
    </e-columns>
  </ejs-grid>
</template>

<script setup>
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-grids';
const data = [
  {
    OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 
  }
];
</script>

Run the project

To run the project, use the following command:

npm run dev
yarn run dev

The output will appear as follows:

vue-3-js-composition

See also