Getting Started
16 Mar 20232 minutes to read
This section explains how to create a default Signature and to configure the Signature component.
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
Installation and configuration
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 Signature
packages using below command.
npm install @syncfusion/ej2-vue-inputs --save
Registering Signature component using Vue.use()
Import the Signature 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 { SignaturePlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(SignaturePlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerSignature
. Refer here to know more about component registration.
Initialize Signature
Add the EJ2 Vue Signature using <ejs-signature>
to the <template>
section of the App.vue
file in src
directory.
<template>
<ejs-signature></ejs-signature>
</template>
<script>
import Vue from 'vue';
import { SignaturePlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(SignaturePlugin);
export default {}
</script>
Run the application
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 default Signature.
<template>
<div class='wrap'>
<h4>Sign here</h4>
<ejs-signature id="signature"></ejs-signature>
</div>
</template>
<script>
import Vue from 'vue';
import { SignaturePlugin } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(SignaturePlugin);
export default {}
</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>