Vue
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Getting Started / Vue 3 with JS and Composition API
Search results

Getting Started with Syncfusion Vue UI Components in JavaScript with the Composition API

20 Mar 2023 / 6 minutes to read

This section offers a step-by-step guide for setting up a Vite project with a JavaScript environment and integrating the Syncfusion Vue components with the Composition API effectively. If you need information on getting started with the Vue Options API, follow this link.

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, you can execute one of the commands that are specific to either NPM or Yarn.

Copied to clipboard
npm create vite@latest

or

Copied to clipboard
yarn create vite

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

  1. Define the project name: We can specify the name of the project directly. Let’s specify the name of the project as my-project for this article.
Copied to clipboard
? Project name: » my-project
  1. Select Vue as the framework.
Copied to clipboard
? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Others
  1. Choose JavaScript as framework variant to build this Vite project using JavaScript and Vue.
Copied to clipboard
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
  TypeScript
  Customize with create-vue ↗
  Nuxt ↗
  1. Upon completing the aforementioned steps to create the my-project, run the following command to install its dependencies:
Copied to clipboard
cd my-project
npm install

or

Copied to clipboard
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 packages to the project

In order to proceed, install the required Syncfusion Vue component package from the public npmjs.com registry.

This article utilizes the Grid component as an example. So, run the below command to install the Syncfusion Grid component package.

Copied to clipboard
npm install @syncfusion/ej2-vue-grids --save

or

Copied to clipboard
yarn add @syncfusion/ej2-vue-grids

Import the Syncfusion styles

Once you have installed the Syncfusion component packages, you will need to import the necessary themes based on the components.

Syncfusion Vue component comes with built-in themes, which are available in installed packages. It is quite simple to adapt the Syncfusion Vue components based on the project style by referring to any of the built-in themes.

To add the styles, you can reference the CSS or SASS files of the Syncfusion Vue components as follows:

Import CSS styles

To import the necessary CSS styles for the Grid component, as well as its dependent styles, into the src/App.vue file, you can use the provided code snippet within the <style> section. Let’s import the Material theme for the Grid component.

Copied to clipboard
<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-dropdowns/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";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Import SASS styles

Run the below command to add the SASS package in order to use SCSS styles for the Grid component and its dependencies in this project.

Copied to clipboard
npm install sass

or

Copied to clipboard
yarn add sass

Then, within the <style> section of the src/App.vue file, import the necessary styles and specify the language as SCSS using the lang attribute. Let’s import the Material theme for the Grid component.

Copied to clipboard
<style lang="scss">
  @import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-calendars/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-popups/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.scss";
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
</style>

To make use of SASS files in a Vite project, add the following configuration setup to the vite.config.js file.

Copied to clipboard
export default defineConfig({
  plugins: [vue()],
  css: {
preprocessorOptions: {
  scss: {
    includePaths: ["node_modules/@syncfusion"]
  }
}
  }
})

You can checkout the themes topic to know more about built-in themes and different ways to refer themes in Vue project.

Integrate the Syncfusion Vue component to the project

Once we have finished all the essential configurations for rendering the Syncfusion Vue component with the Composition API in your Vite project, proceed with the following steps to add the Grid component:

  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.
Copied to clipboard
<script setup>
  import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-grids';
</script>
  1. In the template section, define the Grid component with the dataSource property and column definitions.
Copied to clipboard
<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>
  1. Declare the values for the dataSource property in the script section.
Copied to clipboard
<script setup>
const data = [
  {
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
  },
  {
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
  },
  {
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
  }
];
</script>

The src/App.vue file contains the summarized code for the above steps.

Copied to clipboard
<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, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
  },
  {
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
  },
  {
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
  }
];
</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-dropdowns/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";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Run the project

To run the project, execute the following command:

Copied to clipboard
npm run dev

or

Copied to clipboard
yarn run dev

The output will appear as follows:

vue3-js-composition

Browser Compatibility
Getting Started / Vue 3 with TS and Composition API