Getting Started with Vue using JavaScript and Composition API

27 Jun 20257 minutes to read

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

TheComposition 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

System requirements for Syncfusion^® Vue UI components

Set up the Vite project

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

npm create vite@latest

or

yarn create vite

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

1.Define the project name: We can specify the name of the project directly. Let’s specify the name of the project asmy-project for this article.

? Project name: » my-project

2.SelectVue as the framework. It will creates a Vue 3 project.

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

3.ChooseJavaScript as 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 ↗

4.Upon completing the aforementioned steps to create themy-project, run the following command to install its dependencies:

cd my-projectnpm install

or

cd my-projectyarn install

Now thatmy-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 atnpmjs.com. To use Syncfusion^® Vue components in the project, install the corresponding npm package.

This article uses theVue 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

or

yarn add @syncfusion/ej2-vue-grids

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 andTheme Studio. Refer tothemes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article,Material theme is applied using CSS styles, which are available in installed packages. The necessaryMaterial CSS styles for the Grid component and its dependents were imported into the<style> section ofsrc/App.vue file. Vite app generates a defaultstyles.css file which we do not need for this example. Before running the sample, delete the content ofsrc/style.css or remove the file if it’s unused.

<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>

The order of importing CSS styles should be in line with its dependency graph.

Add Syncfusion^® Vue component

Follow the below steps to add the Vue Grid component usingComposition API:

1.First, add thesetup attribute to thescript tag to indicate that Vue will be using theComposition API. And import the Grid component in thescript section of thesrc/App.vue file.

<scriptsetup>import{GridComponentasEjsGrid,ColumnsDirectiveasEColumns,ColumnDirectiveasEColumn}from'@syncfusion/ej2-vue-grids';</script>

2.In thetemplate section, define the Grid component with thedataSource property and column definitions.

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

3.Declare the values for thedataSource property in thescript section.

<scriptsetup>constdata=[{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>

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

<template><ejs-grid:dataSource='data'><e-columns><e-columnfield='OrderID'width='100'textAlign="Right"></e-column><e-columnfield='CustomerID'width='100'></e-column><e-columnfield='EmployeeID'width='100'textAlign="Right"></e-column><e-columnfield='Freight'width='100'format="C2"textAlign="Right"></e-column><e-columnfield='ShipCountry'width='100'></e-column></e-columns></ejs-grid></template><scriptsetup>import{GridComponentasEjsGrid,ColumnsDirectiveasEColumns,ColumnDirectiveasEColumn}from'@syncfusion/ej2-vue-grids';constdata=[{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><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, use the following command:

npm run dev

or

yarn run dev

The output will appear as follows:

See also

• Getting Started with Vue UI Components using Composition API and TypeScript
• Getting Started with Vue UI Components using Options API and JavaScript
• Getting Started with Vue UI Components using Options API and TypeScript