Getting Started with the Vue Signature Component in Vue 2
25 Apr 20254 minutes to read
This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue Signature component using the Composition API / Options API.
To get start quickly with Vue Signature, you can check on this video:
Prerequisites
System requirements for Syncfusion® Vue UI components
Dependencies
The list of dependencies required to use the Signature component in your application is given below:
|-- @syncfusion/ej2-vue-inputs
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-inputs
Setting up the Vue 2 project
To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:
npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve
or
yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve
When creating a new project, choose the option Default ([Vue 2] babel, eslint)
from the menu.
Once the quickstart
project is set up with default settings, proceed to add Syncfusion® components to the project.
Add Syncfusion® Vue packages
Syncfusion® packages are available at npmjs.com. To use Vue components, install the required npm package.
This article uses the Vue Signature component as an example. Install the @syncfusion/ej2-vue-inputs
package by running the following command:
npm install @syncfusion/ej2-vue-inputs --save
or
yarn add @syncfusion/ej2-vue-inputs
Add Syncfusion® Vue component
Follow the below steps to add the Vue Signature component using Composition API
or Options API
:
1. First, import and register the Signature component in the script
section of the src/App.vue file. If you are using the Composition API
, you should add the setup
attribute to the script
tag to indicate that Vue will be using the Composition API
.
<script setup>
import { SignatureComponent as EjsSignature } from '@syncfusion/ej2-vue-inputs';
</script>
<script>
import { SignatureComponent } from '@syncfusion/ej2-vue-inputs';
export default {
name: "App",
components: {
"ejs-signature':":SignatureComponent
},
}
</script>
2. In the template
section define the Signature component.
<template>
<ejs-signature></ejs-signature>
</template>
Here is the summarized code for the above steps in the src/App.vue file:
<template>
<div class='wrap'>
<h4>Sign here</h4>
<ejs-signature id="signature"></ejs-signature>
</div>
</template>
<script setup>
import { SignatureComponent as EjsSignature } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
#signature {
border: 1px solid lightgray;
height: 100%;
width: 100%;
}
.wrap {
height: 300px;
width: 550px;
}
</style>
<template>
<div class='wrap'>
<h4>Sign here</h4>
<ejs-signature id="signature"></ejs-signature>
</div>
</template>
<script>
import { SignatureComponent } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-signature": SignatureComponent
},
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
#signature {
border: 1px solid lightgray;
height: 100%;
width: 100%;
}
.wrap {
height: 300px;
width: 550px;
}
</style>
Run the project
To run the project, use the following command:
npm run serve
or
yarn run serve