Getting Started with the Vue Grid Component in the Quasar Framework

11 Feb 20266 minutes to read

A step-by-step guide for setting up a Quasar project and integrating the Syncfusion^® Vue Grid component using the Composition API.

The Quasar Framework is a Vue.js-based open-source framework that empowers developers to create high-performance and responsive applications across various platforms, such as web, mobile, and desktop.

Prerequisites

System requirements for Syncfusion^® Vue Grid components

Setup the Quasar project

To initiate the creation of a new Quasar project, use the following commands:

npm init quasar

This command prompts additional configurations. The following steps are outlined in the images below:

This generates the necessary files and prompts for project dependency installation. Responding with “yes” proceeds with npm install, as shown in the image below:

Navigate to the project directory:

cd quasar-project

The quasar-project is now ready to run with default settings. Next, the Vue Grid component is added to the project.

Add Syncfusion^® Vue packages

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

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 is installed using the following command:

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

Import Syncfusion^® CSS styles

Themes for the Syncfusion^® Vue Grid component can be imported in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. The themes topic provides detailed information on built-in themes and the different ways to reference themes in a Vue project.

In this article, the Material 3 theme is applied using CSS styles, which are available in installed packages. The necessary Material 3 CSS styles for the Grid component and its dependents are imported into the <style> section of the src/app.vue file.

~/src/app.vue

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
    @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>

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

Add the Syncfusion^® Vue component

The following steps add the Vue Grid component:

1. First, the setup attribute is added to the script tag to indicate that Vue is using the Composition API. And import the Grid component in the script section of the src/app.vue file.

~/src/app.vue

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

2. In the template section, the Grid component is defined with the dataSource property and column definitions.

~/src/app.vue

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

3. The values for the dataSource property are declared in the script section.

~/src/app.vue

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

Here is the summarized code for the above steps in the src/app.vue file:

~/src/app.vue

<template>
  <ejs-grid :dataSource='data' :width="1000">
    <e-columns>
      <e-column field='OrderID' textAlign="Center"></e-column>
      <e-column field='CustomerID' textAlign="Center"></e-column>
      <e-column field='EmployeeID' textAlign="Center"></e-column>
      <e-column field='Freight' format="C2" textAlign="Center"></e-column>
      <e-column field='ShipCountry' textAlign="Center"></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>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>

Run the project

To run the project, use the following command:

npm run dev

The output will appear as follows: