Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《マウスカーソルの後を追ってくる円のエフェクト》

こんにちは、樋口です。

今回は、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のプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm install –save @luxdamore/vue-cursor-fx

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

vue-cursor-fx.jsの作成

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

import Vue from 'vue'
import CursorFx from '@luxdamore/vue-cursor-fx'
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css'

Vue.use(CursorFx)

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に先ほど作成したファイル使用の宣言の追加を行います。

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

export default {

mode: 'universal',

・・・・・

plugins: [

{ src: '@/plugins/vue-cursor-fx', mode: 'client' },　←　記載を追記

// 終了

・・・・・

}

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

プロジェクト構成

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

Vueファイル

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

– index.vue

<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>