Search results

Getting started with Vue Signature component

18 May 2022 / 2 minutes to read

This section explains how to create a default Signature and to configure the Signature component.

Dependencies

The list of dependencies required to use the Signature component in your application is given below:

Copied to clipboard
|-- @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.

Copied to clipboard
npm install -g @vue/cli

npm install -g @vue/cli-init

Start a new project using below Vue CLI command.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart

npm install

Install Syncfusion Signature packages using below command.

Copied to clipboard
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.

Copied to clipboard
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 register Signature. 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.

Copied to clipboard
<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.

Source
Preview
app.vue
Copied to clipboard
<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>