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

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

UIパッケージVue Stickerを利用するとスッテカーのような動作が簡単に実装できます。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js 2.10.2

Nuxt.jsインストール

create-nuxt-appコマンドでNuxt.jsの環境を構築してます。今回は、vue-sticker-proという名前でプロジェクトを作成してます。

vue-stickerインストール

vue-stickerをインストールします。

サンプルコード

vue-sticker を利用するためのサンプルコードです。

pages配下のindex.vueを下記のように編集します。

ブラウザから http://プライベートIP:3000 にアクセスにすると、vue-stickerにより、まるでステッカーの用に画像が操作できるようになります。