Nuxt.js Vue Stickerを利用してスッテカーのような動作を画像にさせる

npx create-nuxt-app vue-sticker-pro

<出力結果>
create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in vue-sticker-pro
? Project name vue-sticker-pro
? Project description My fine Nuxt.js project
? Author name taro
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

## プロジェクトに移動
cd vue-sticker-pro

## インストール
npm install --save-dev vue-sticker

<template>
  <div class="container">
    <div>      
        <vue-sticker :d="300" class-name="good"></vue-sticker>
      </div>
    </div>
  </div>
</template>

<script>
import VueSticker from 'vue-sticker'
import Logo from '~/components/Logo.vue'

export default {
  components: {    
    VueSticker
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.good__main-image,
.good__backside-image {
  background-color: rgb(250, 248, 248);
  background-image: url(https://ja.nuxtjs.org/logos/nuxt-square.svg);     
} 

</style>