Search results

Getting Started with Syncfusion Vue UI Components in Vue 3 and Vite

08 Feb 2023 / 4 minutes to read

This section explains how to use Syncfusion Vue components in a Vue 3 application with Vite.

Prerequisites

System requirements for Syncfusion Vue UI components

Creating a Vue application with Vite

Vite is a rapid development tool for modern web projects. To scaffold the first Vite project, click here. One of the commands is illustrated below:

Copied to clipboard
npm create vite@latest

For the first time using Vite, it will ask to install an additional package. It is impossible to create a new Vite project without that package, so choose y.

Copied to clipboard
Need to install the following packages:
create-vite@latest
Ok to proceed? (y)

Now, choose a name for the project. Use kebab-case for multiple words.

Copied to clipboard
? Project name: » my-vite-project

Next, choose Vue as the framework.

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

Select the JavaScript variant for this application.

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

Once the application is created, run the following command to install the dependencies:

Copied to clipboard
cd my-vite-project
npm install

Add Syncfusion packages to the application

Now, install the required Syncfusion Vue component package in the application. All Syncfusion Vue packages are published on the npmjs.com public registry. So, choose the required component to install.

In this article, the Grid component is used as an example. To install the Grid component package, use the following command:

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

Import the Syncfusion styles

After installing the Syncfusion component packages in the application, import the required themes based on the components used. The styles can be added by referring to the CSS or SASS files of Syncfusion Vue components as follows:

Import CSS styles

Import the needed CSS styles for the Grid component along with the dependency styles in the <style> section of the src/App.vue file as follows:

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

To use the SASS files in the application, it needs the SASS package. To install it, use the following command:

Copied to clipboard
npm install sass

Import the needed SCSS styles for the Grid component and the dependency styles, and mention the lang attribute in the <style> section of the src/App.vue file as follows:

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>

In order to use SASS files, add the below configuration setup to the vite.config.js file.

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

Add the Syncfusion Vue component to the application

Completed all the necessary configurations that are needed to render the Syncfusion Vue component. Now, add the Grid component using the following steps:

  1. Import the Grid component in the <script> section of the src/App.vue file.
Copied to clipboard
<script>
  import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-grids';
</script>
  1. Register the Grid component and column directives. The column directives are used to define the column definition for the Grid component.
Copied to clipboard
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-grids';
//Component registration
export default {
  name: "App",
  components: {
'ejs-grid': GridComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective
  }
}
  1. Add the Grid component definition in the template section with the dataSource property binding and column definitions.
Copied to clipboard
<template>
  <ejs-grid :dataSource='data'>
<e-columns>
  <e-column field='OrderID' headerText='Order ID' textAlign='Right'  width=100></e-column>
  <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
  <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
  </ejs-grid>
</template>
  1. Declare the bound properties in the script section. Declare the collection data, which is bound by the dataSource property.
Copied to clipboard
data() {
  return {
data:[
  {
    "OrderID":10248,
    "CustomerID":"VINET",
    "ShipCountry":"France"
  },
  {
    "OrderID":10249,
    "CustomerID":"TOMSP",
    "ShipCountry":"Germany"
  },
],
  };
}
  1. Summarizing the above steps, update the src/App.vue file with the following code:
Copied to clipboard
<script>
  import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-grids';
  // Component registration
  export default {
name: "App",
// Declaring component and its directives
components: {
  'ejs-grid': GridComponent,
  'e-columns': ColumnsDirective,
  'e-column': ColumnDirective
},
// Bound properties declarations
data() {
  return {
    data:  [
      {
        "OrderID":10248,
        "CustomerID":"VINET",
        "ShipCountry":"France"
      },
      {
        "OrderID":10249,
        "CustomerID":"TOMSP",
        "ShipCountry":"Germany"
      },
    ],
  };
},
  };
</script>

<template>
  <ejs-grid :dataSource='data'>
<e-columns>
  <e-column field='OrderID' headerText='Order ID' textAlign='Right'  width=100></e-column>
  <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
  <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
  </ejs-grid>
</template>

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

Run the application using the following command:

Copied to clipboard
npm run dev