Getting Started with Syncfusion Vue UI Components using direct scripts in a quickstart application

28 Jun 202415 minutes to read

Vue provides native script support, allowing users to directly include the Vue.js library in an HTML file without the need for a build process or module bundler. This feature is useful for simpler projects or prototypes, enabling quick and easy implementation of Vue.js without setting up a complex build workflow.

Similarly, Syncfusion offers direct script support for its Vue components. Developers can seamlessly include Syncfusion Vue components in their HTML files and leverage them within their Vue.js applications. This allows for straightforward integration of Syncfusion Vue components without the need for additional build processes. Now, let’s delve into the process of utilizing Syncfusion Vue components through direct script inclusion.

Prerequisites

Any IDE, such as Visual Studio Code

Set up the Vue project

To demonstrate the usage of the Grid component through direct scripting, follow these steps:

1. Begin by creating a folder named quickstart for the project.

2. Inside the quickstart folder, create an HTML file named index.html.

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. So, add the Vue class component script to the head section of the index.html file for Vue 3 direct script.

Vue 2 (~/index.html)
Vue 3 (~/index.html)
<div id="app">
    <!-- Vue components goes here -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
    });
</script>
<div id="app">
    <!-- Vue components goes here -->
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        el: '#app',
    }).mount('#app');
</script>

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, Material theme is applied using CSS styles, which are available in CDN. Add the Material CSS styles to the head section of the index.html file.

~/index.html
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" type="text/css" />

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.

~/index.html
<script src="https://cdn.syncfusion.com/ej2/21.2.3/ej2-vue-es5/dist/ej2-vue.min.js"></script>

Add Syncfusion Vue component

1. First, register the Grid component and its child directives in Vue.

Vue 2 (~/index.html)
Vue 3 (~/index.html)
<script>
    Vue.use(ejs.grids.GridPlugin);
</script>
<script>
    Vue.createApp({
        el: '#app',
        components: {
            'ejs-grid' : ejs.grids.GridComponent,
            'e-columns' : ejs.grids.ColumnsDirective,
            'e-column' : ejs.grids.ColumnDirective
        }
    }).mount('#app');
</script>

2. 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.

While using Syncfusion Vue components in a direct script way, camel-cased property (isPrimaryKey) names need to be specified in the kebab-cased (is-primary-key) equivalents.

Vue 2 (~/index.html)
Vue 3 (~/index.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Syncfusion Vue (ES5) UI Components</title>
    <!-- Essentail JS2 for Vue  (All components Styles) -->
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css" />
    <!-- Vue library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/27.1.48/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <h2>Syncfusion Vue 2 Grid Component</h2>
    <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>
        Vue.use(ejs.grids.GridPlugin);
        new Vue({
            el: '#app',
            provide: {
                grid: [ejs.grids.Page]
            },
            data() {
                return {
                    data: [
                        { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
                        { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
                        { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
                        { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
                        { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
                        { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
                        { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
                        { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
                        { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
                    ],
                    pageSettings: { pageSize: 5 }
                }
            }
        });
    </script>
</body>

</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Syncfusion Vue (ES5) UI Components</title>
    <!-- Essentail JS2 for Vue (All components Styles) -->
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css" />
    <!-- Vue library file-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/27.1.48/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <h2>Syncfusion Vue 3 Grid Component</h2>
    <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>
        Vue.createApp({
            el: '#app',
            components: {
                'ejs-grid': ejs.grids.GridComponent,
                'e-columns': ejs.grids.ColumnsDirective,
                'e-column': ejs.grids.ColumnDirective
            },
            provide: {
                grid: [ejs.grids.Page]
            },
            data() {
                return {
                    data: [
                        { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
                        { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
                        { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
                        { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
                        { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
                        { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
                        { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
                        { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
                        { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
                    ],
                    pageSettings: { pageSize: 5 }
                }
            }
        }).mount('#app');
    </script>
</body>

</html>

Run the project

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