Getting Started with Syncfusion Vue UI Components and Vue CLI

3 Apr 20255 minutes to read

This section explains how to use Syncfusion Vue components in Vue 3 application. To get started with Vue 2 application, refer to the getting started with Vue 2 section.

Prerequisites

System requirements for Syncfusion Vue UI components

Create the Vue 3 application

The best way to create a Vue 3 application is to use the vue create command.

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

Initiating a new project prompts us to choose the type of project to be used for the current application. Select the option Manually select features from the menu and then select the required features as shown in the following screenshot.

Reference

Add Syncfusion packages

Once the Vue 3 application is created, install the required Syncfusion Vue component package in the application. All the available Syncfusion Vue packages are published in the npmjs.com registry. Choose the component to be installed. In this article, the Grid component is used as an example.

Check out the installation and upgrade section to learn about the different ways of installing the packages. Here, the Grid component package is installed using the following npm command.

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

Register the Syncfusion Vue component

Import the Grid component along with the required child directives from the installed packages into the <script> section of the src/App.vue file. Register the Grid component along with the required child directives using following code.

~/src/App.vue
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
    }
  }

Now, the Grid and column directives are registered to use it in this application.

Add Syncfusion Vue component to the application

Add the Vue Grid to the <template> section of the App.vue file in the src directory. To display the Grid with records, add the Grid component and bind the dataSource to it. Here, the simple data is mapped to the dataSource property.

~/src/App.vue
<template>
    <ejs-grid :dataSource="data">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" :isPrimaryKey="true" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID"  width="80"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="90"></e-column>
      </e-columns>
    </ejs-grid>
  </template>
  <script>
    import { GridComponent, ColumnsDirective, ColumnDirective} from "@syncfusion/ej2-vue-grids";

    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>

Adding SCSS reference

Add the styles of Grid component to the <style> section of the App.vue file as follows.

~/src/App.vue
<style lang="scss">
// syncfusion styles
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
</style>

Adding includePaths option

While using scss files for style reference, you need to configure the includePaths in sass-loader options in the vue.config.js like below:

~/vue.config.js
const path = require('path');
module.exports = defineConfig({
  .....
  .....
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [path.resolve(__dirname, './node_modules/@syncfusion')]
        }
      }
    }
  },
  .....
  .....
});

Run the application

Run the application using the following command.

npm run serve

Web server will be initiated. Open the quick start app in the browser at port localhost:8080.

Output

Refer the following sample, vue3-grid-getting-started.