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.

<template>
  <div id="app">
    <h1>A beautiful parrot got trapped behind some paper.</h1>
    <h2>Scratch them free!</h2>
    <vue-scratchable
      v-slot="{ init }"
      :brushOptions="brush"
      :hideOptions="hide"
      getPercentageCleared
      @percentageUpdate="updatePoints"
    >
      <div class="wrapper">
        <img
          :src="require('https://images.wallpaperscraft.com/image/city_buildings_aerial_view_193041_1280x960.jpg')"
          @load="init()"
        >
        <h3>{{ subline }}</h3>
      </div>
    </vue-scratchable>
    <p>You scratched {{ percentage }}% free.</p>
    <pre>Photo by- nicesnippets.com</pre>
  </div>
</template>

<script>
import VueScratchable from 'vue-scratchable';
import paperPattern from './assets/natural-paper-texture.jpg';

export default {
  name: 'App',
  components: {
    VueScratchable,
  },
  computed: {
    subline() {
      return this.percentage < 100
        ? `There is still ${100 - this.percentage}% left for me to be free... - nicesnippets.com`
        : 'Thank you for scratching me free! - nicesnippets.com';
    },
  },
  data() {
    return {
      percentage: 0,
      hide: {
        type: 'pattern',
        src: paperPattern,
        repeat: 'repeat',
      },
      brush: {
        size: 60,
        shape: 'round',
      },
    };
  },
  methods: {
    updatePoints(percentage) {
      this.percentage = percentage;
    },
  },
};
</script>

<style>
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;
}
</style>

It will help you...