
こんにちは、樋口です。
今回は、Nuxt.jsからライブラリを読み込むだけで簡単にマウスカーソルのエフェクトを追加できるvue-cursor-fxについてご紹介します。
使用するライブラリ
今回は下記ライブラリを使用して説明をしていきます。
- Vue.js
- 2.6.11
- Nuxt.js
- 2.12.2
- vue-cursor-fx
- 1.4.0
vue-chartjsの追加
初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。
これで対象のプロジェクトに、ライブラリを追加することができました。次に実際のライブラリの使用方法について解説していきます。
vue-cursor-fx.jsの作成
モジュールの導入が完了しましたら次は、「plugins」フォルダ内に「vue-cursor-fx.js」のファイルを作成します。次に、vue-cursor-fx.jsに下記内容を記載し保存を行います。
1 2 3 4 5 |
import Vue from 'vue' import CursorFx from '@luxdamore/vue-cursor-fx' import '@luxdamore/vue-cursor-fx/dist/CursorFx.css' Vue.use(CursorFx) |
nuxt.config.js設定
次に、nuxt.config.jsに先ほど作成したファイル使用の宣言の追加を行います。
1 2 3 4 5 6 7 8 9 |
export default { mode: 'universal', ・・・・・ plugins: [ { src: '@/plugins/vue-cursor-fx', mode: 'client' }, ← 記載を追記 ], // 終了 ・・・・・ } |
5行目:
作成したファイルを宣言します。
プロジェクト構成
今回は下記のプロジェクト構成で作業を行っていきます。
|- .nuxt
|- assets
|- components
|- layouts
|- middleware
|- node_modules
|- pages
|- vue-cursor-fx
|- index.vue ← 今回修正ファイル
|- plugins
|- vue-cursor-fx.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template> <div class="samaple__conntents"> <div style="margin-top: 20px;"> <h1>vue-cursor-fxプラグインサンプル</h1> </div> <div style="margin-top: 20px;"> <cursor-fx color="#39B509" color-hover="#acf98e"></cursor-fx> </div> </div> </template> <script> export default { data() { return { count: 0, } }, } </script> <style> .samaple__conntents { margin: 0 auto; min-height: 100vh; justify-content: center; align-items: center; text-align: center; } </style> |
7行目:
カーソル表示の宣言を行います。
実行結果
最後に
今回紹介したライブラリを使用すれば、簡単にマウスへのエフェクトを追加できます。ぜひ機会ありましたら、試してみてください。
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
それではまた。
《関連記事》
- Vue.jsベースのフレームワーク! Nuxt.jsプラグイン《HTML要素のドラッグアンドドロップ》
- 【エラー解決方法】Nuxt.js で「error ” is assigned a value but never used no-unused-vars」が発生したときの対処法
- 【エラー解決方法】Nuxt.js で「error Insert
·
prettier/prettier」が発生したときの対処法 - お祝いごとにぴったり! Nuxt.jsプラグイン《アニメーションで紙吹雪を表現》
- 【エラー解決方法】Nuxt.js で「error ” is never reassigned. Use ‘const’ instead prefer-const」が発生したときの対処法

