Vue.js scratch card component Example

When “Vue.js scratch card component Example” moves through design, development and browser testing, details on Monitask can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official Vue website before adopting it in production.

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...