動かざることバグの如し

近づきたいよ 君の理想に

Nuxt.jsにvue2-hammerを導入する手順

環境

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