- Prerequisites
- Set up the Quasar project
- Add Syncfusion® Vue packages
- Import Syncfusion® CSS styles
- Add the Syncfusion® Vue component
- Run the project
Contact Support
Getting Started with Vue UI Components with the Quasar Framework
25 Apr 20256 minutes to read
This article provides a step-by-step guide for setting up a Quasar project and integrating the Syncfusion® Vue components 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 UI components
Set up the Quasar project
To initiate the creation of a new Quasar project, use the following commands:
npm init quasar
This command prompts additional configurations. Follow the steps outlined in the images below:
This generates the necessary files and prompts for project dependencies installation. Respond with ‘yes’ to proceed with npm install, as shown in the image below:
Navigate to your project directory:
cd quasar-project
Now that quasar-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 at npmjs.com. To use Syncfusion® Vue components in the project, install the corresponding npm package.
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 needs to be installed using the following command:
npm install @syncfusion/ej2-vue-grids --save
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 and Theme Studio. Refer to the themes topic to learn more about built-in themes and different ways to refer to 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 were imported into the <style>
section of the src/app.vue file.
<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
Follow the below steps to add the Vue 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.
<script setup>
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-grids';
</script>
2. In the template
section, define the Grid component with the dataSource property and column definitions.
<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. Declare the values for the dataSource
property in the script
section.
<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 above steps in the src/app.vue file:
<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: