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.

Vue 2 project

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