Syncfusion AI Assistant

How can I help you?

Getting Started with Syncfusion Vue UI Components using direct scripts

19 May 20267 minutes to read

Vue provides native script support, allowing developers to directly include Vue.js and Syncfusion® Vue components in HTML files without the need for a build process or module bundler. This approach is useful for simpler projects or prototypes, enabling quick and easy implementation of Vue.js and Syncfusion components without setting up a complex build workflow.

Prerequisites

Set up the Vue project

To demonstrate the usage of the Grid component through direct scripting:

1. Create a folder named quickstart and inside it, create an HTML file named index.html.

2. Include the appropriate version of the Vue.js library in the index.html file based on whether to use Vue 2 or Vue 3 in the project. Then, create a new Vue instance with the required configuration options.

The Vue class component package is required before the 2023 Volume 1 (v21.1.35) release. Add the Vue class component script to the head section of the index.html file.

Import Syncfusion® CSS styles

You can import themes for the Syncfusion® Vue component in various ways, such as using CSS from CDN, [CRG] and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article, Material3 theme is applied using CSS styles, which are available in CDN. Add the Material3 CSS styles to the head section of the index.html file.

<head>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.3/material3.css" rel="stylesheet" type="text/css" />
</head>

Import Syncfusion® Vue scripts

To integrate Syncfusion® components into your application, add the required Syncfusion® Vue direct scripts to the head section of the index.html file to set up the Vue instance.

<head>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-vue-es5/dist/ej2-vue.min.js"></script>
</head>

Add Syncfusion® Vue component

1. Register the Grid component and its child directives, then add the component to the <body> section of the index.html file. Bind the data-source property and inject the Page module. Follow the Getting Started documentation for further details.

Note: While using Syncfusion® Vue components in direct script mode, camel-cased property names (e.g., isPrimaryKey) need to be specified in kebab-cased equivalents (e.g., is-primary-key).

<script>
    const app = Vue.createApp({
        components: {
            'ejs-grid' : ejs.grids.GridComponent,
            'e-columns' : ejs.grids.ColumnsDirective,
            'e-column' : ejs.grids.ColumnDirective
        },
        data() {
            return {
                data: [
                    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
                    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
                    { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 }
                ]
            }
        }
    });
    app.mount('#app');
</script>
<script>
    Vue.use(ejs.grids.GridPlugin);
    new Vue({
        el: '#app',
        data() {
            return {
                data: [
                    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
                    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
                    { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 }
                    ]
                }
            }
        });
</script>

2. Add the Grid component to a <div> element in the <body> section of the index.html file. Configure the Grid with columns and data source.

<body>
<div id="app">
    <ejs-grid :data-source="data" :allow-paging="true" :page-settings='pageSettings'>
        <e-columns>
            <e-column field="OrderID" header-text="Order ID" text-align="Right" :is-primary-key="true" width="100"></e-column>
            <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
            <e-column field="Freight" header-text="Freight" width="90"></e-column>
        </e-columns>
    </ejs-grid>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <ejs-grid :data-source="data" :allow-paging="true" :page-settings='pageSettings'>
        <e-columns>
            <e-column field="OrderID" header-text="Order ID" text-align="Right" :is-primary-key="true" width="100"></e-column>
            <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
            <e-column field="Freight" header-text="Freight" width="90"></e-column>
        </e-columns>
    </ejs-grid>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Run the project

Run the index.html file in the web browser. The output will appear as follows: