AMG Solution

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

feels

こんにちは、樋口です。
 
今回は、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に下記内容を記載し保存を行います。

nuxt.config.js設定

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

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

プロジェクト構成

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

 sample-project
   |- .nuxt
   |- assets
   |- components
   |- layouts
   |- middleware
   |- node_modules
   |- pages
     |- vue-confetti
       |- index.vue ← 今回修正ファイル
   |- plugins
     |- vue-confetti.js ← 今回追加ファイル
   |- static
   |- language
   |- store
   |- .editorconfig
   |- .eslintrc.js
   |- .gitignore
   |- .prettierrc
   |- nuxt.config.js
   |- package.json
   |- package-lock.json
   |- README.md
   |- stylelint.config.js

Vueファイル

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

7行目~9行目:
今回のアニメーションの再生の開始・終了・表現変更のボタンとなります。
 
21行目~23行目:
アニメーションの再生の開始を行います。
「this.$confetti.start()」で再生されます。
 
24行目~26行目:
アニメーションの再生の停止を行います。「this.$confetti.stop()」で再生されます。
 
27行目~39行目:
アニメーションの表現方法を変更します。詳しい内容については、公式Gitよりご確認ください。

実行結果

カラフルバージョン

 
赤メインバージョン

最後に

今回紹介したライブラリを使用すれば、簡単に紙吹雪のアニメーションの再生を行うことができます。ぜひ試してみてください。
 
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

recruit feels

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

日報で業務改善
はじめました。
LOADING