環境
- Nuxt.js 2.8
概要
vue2-hammerというhammer.jsを簡単にVue.js上で使えるようにできるhammer.jsのラッパーである。
が、Nuxt.jsで使うときにはVuejs単体と違って若干ハマったのでメモ
インストール
兎にも角にもまずはvue2-hammerのインストールから
npm install -S vue2-hammer
プラグインの設定
今回の要所 Nuxt.jsの公式ドキュメントにも書いてある通り、プラグインの中でもVue.jsに依存するいわゆる「Vueプラグイン」を使いたい場合は以下の通り
まず plugins/vue-hammer.js を作成して以下 pluginsディレクトリ配下であればファイル名は任意
import Vue from 'vue' import { VueHammer } from 'vue2-hammer' Vue.use(VueHammer)
次に先程作ったプラグインのファイル名を nuxt.config.js のpluginsディレクトリに追加
plugins: [ { src: '~/plugins/vue-hammer', mode: 'client' } ],
ポイントは mode: 'client'を明示的に指定する点。でないと起動時にエラーになる。。。
あとは実際に使いたいところで以下のように使うだけ！
<a v-hammer:tap="onTap">Tap me!</a>
