Vue.js scratch card component Example




Vue.js scratch card component Example

Hi Guys,

Today, I will learn you how to create scratch cards component in vue.js . we will show example of vue.js scratch cards component. I will use vue-scratchable.umd.min.js to create scratch cards in vue.js.A Vue.js wrapper component that turns everything into fun scratch cards. Includes touch support without additional dependencies.

Step 1:Installation

Here in this step, I will install npm.

npm i vue-scratchable

Step 2: Usage

In this step,I will register the component globally.

import VueScratchable from 'vue-scratchable';

Vue.component('vue-scratchable', VueScratchable);

Step 3: ScratchVue.js

In this step,I will create Scratch card component.


<div id="app">

<h1>A beautiful parrot got trapped behind some paper.</h1>

<h2>Scratch them free!</h2>


v-slot="{ init }"






<div class="wrapper">





<h3>{{ subline }}</h3>



<p>You scratched {{ percentage }}% free.</p>

<pre>Photo by-</pre>




import VueScratchable from 'vue-scratchable';

import paperPattern from './assets/natural-paper-texture.jpg';

export default {

name: 'App',

components: {



computed: {

subline() {

return this.percentage < 100

? `There is still ${100 - this.percentage}% left for me to be free... -`

: 'Thank you for scratching me free! -';



data() {

return {

percentage: 0,

hide: {

type: 'pattern',

src: paperPattern,

repeat: 'repeat',


brush: {

size: 60,

shape: 'round',




methods: {

updatePoints(percentage) {

this.percentage = percentage;






body {

background-color: #333;

margin: 0;


#app {

font-family: 'Open Sans', sans-serif;

color: white;

display: flex;

flex-direction: column;

align-items: center;

max-width: 1200px;

margin: 0 auto;

margin-top: 50px;


.vue-scratchable-wrapper {

background-color: white;


h3 {

color: #2c3e50;

text-align: center;


a {

color: #2196f3;



It will help you...