This section explains how to create a simple Chip and to configure the Chip component.
The list of dependencies required to use the Chip 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 Chip 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 { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ChipListPlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerChip
. Refer here to know more about component registration.
Add the EJ2 Vue Chip using <ejs-chiplist>
to the <template>
section of the App.vue
file in src
directory.
<template>
<ejs-chiplist id="chip" text="Janet Leverling"></ejs-chiplist>
</template>
<script>
import Vue from 'vue';
import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ChipListPlugin);
export default {}
</script>
Add Chip component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import '../node_modules/@syncfusion/ej2-vue-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 Chip.
<template>
<ejs-chiplist id="chip" text="Janet Leverling"></ejs-chiplist>
</template>
<script>
import Vue from 'vue';
import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ChipListPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css';
</style>