This section explains how to create a simple Button and to configure the Button component.
The list of dependencies required to use the Button component in your application is given below :
|-- @syncfusion/ej2-vue-buttons
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-vue-base
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following command.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Install Syncfusion Button
packages using below command.
npm install @syncfusion/ej2-vue-buttons --save
Vue.use()
Import the Button Plugin from the Essential JS 2 Vue package and register the same using Vue.use()
with Component Plugin as its argument.
Refer to the code snippet given below.
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerButton
. Refer here to know more about component registration.
Add the EJ2 Vue Button using <ejs-button>
to the <template>
section of the App.vue
file in src
directory.
<template>
<ejs-button>Button</ejs-button>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {}
</script>
Add Button component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The following example shows a basic Button.
<template>
<ejs-button>Button</ejs-button>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(ButtonPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
button {
margin: 25px 5px 20px 20px;
}
</style>
To change the default Button to flat Button, set the cssClass
property to e-flat
and text content of the Button is set using content
property.
<template>
<ejs-button cssClass='e-flat'>Button</ejs-button>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(ButtonPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
button {
margin: 25px 5px 20px 20px;
}
</style>