This article provides a step-by-step introduction to configure Syncfusion Vue UI components (Essential JS 2) and build a simple HTML web application.
quickstart
for the Syncfusion controls and open it in the Visual Studio Code.Scripts:
https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js
Styles:
https://cdn.syncfusion.com/ej2/material.css
~/quickstart/index.html
and add the below Syncfusion and [Vue] (https://vuejs.org/v2/guide/installation.html#CDN) CDN link references. Now, the Button
element and register the Syncfusion Vue Button
component in the index.html by using the following code.<!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/material.css" rel="stylesheet" type="text/css" />
<!-- Vue library file-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js" type="text/javascript"></script>
<!-- Essential JS 2 for Vue global script -->
<script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Syncfusion Vue (ES5) Button Components</h2>
<div id="app">
<ejs-button is-primary="true">Button</ejs-button>
</div>
<script>
// Registering the Button plugin.
Vue.use(ejs.buttons.ButtonPlugin);
new Vue({
el: '#app',
});
</script>
</body>
</html>
Note : While using Syncfusion Vue components in DOM templates, camelCased property (isPrimary) names need to specify in the kebab-cased (is-primary) equivalents.
~/quickstart/index.html
file in the web browser and it will render the Syncfusion Vue Button component.