お祝いごとにぴったり！ Nuxt.jsプラグイン《アニメーションで紙吹雪を表現》

#JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt.jsからライブラリを読み込むだけで簡単に紙吹雪のアニメーションを表現できるvue-confettiについてご紹介します。

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js: 2.6.11
Nuxt.js: 2.12.2
vue-confetti: 2.0.9

vue-chartjsの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm install vue-confetti -save

これで対象のプロジェクトに、ライブラリを追加することができました。次に実際のライブラリの使用方法について解説していきます。

vue-confetti.jsの作成

モジュールの導入が完了しましたら次は、「plugins」フォルダ内に「vue-confetti.js」のファイルを作成します。次に、vue-confetti.jsに下記内容を記載し保存を行います。

import Vue from 'vue'
import VueConfetti from 'vue-confetti'

Vue.use(VueConfetti)

nuxt.config.js設定

次に、nuxt.config.jsに先ほど作成したファイル使用の宣言の追加を行います。

export default {
  mode: 'universal',
  ・・・・・
  plugins: [
    { src: '@/plugins/vue-confetti', mode: 'client' },　←　記載を追記
  ],
  // 終了
  ・・・・・
}

５行目：
作成したファイルを宣言します。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>vue-confettiプラグインサンプル</h1>
    </div>
    <div style="margin-top: 20px;">
      <button @click="start">Start</button>
      <button @click="stop">Stop</button>
      <button @click="test">Show some test</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    start() {
      this.$confetti.start()
    },
    stop() {
      this.$confetti.stop()
    },
    test() {
      this.$confetti.update({
        particles: [
          {
            type: 'heart',
          },
          {
            type: 'circle',
          },
        ],
        defaultColors: ['red', 'pink', '#ba0000'],
      })
    },
  },
}
</script>
<style>
.samaple__conntents {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

７行目～９行目：
今回のアニメーションの再生の開始・終了・表現変更のボタンとなります。

２１行目～２３行目：
アニメーションの再生の開始を行います。
「this.$confetti.start()」で再生されます。

２４行目～２６行目：
アニメーションの再生の停止を行います。「this.$confetti.stop()」で再生されます。

２７行目～３９行目：
アニメーションの表現方法を変更します。詳しい内容については、公式Gitよりご確認ください。