今回のコード
今回はめちゃめちゃ簡単に使える、プラグイン「Vue-ShortKey」の紹介と、導入でハマったポイントの共有です。
今回してほしい挙動
WEBアプリを開いて、「a」キーを押すだけで、指定したインプットタグにフォーカスする。
準備
<input
v-shortkey.focus="['a']"
>
以上。
…はい、これだけです。
簡単すぎて、やばいです。関数も、何もいりません。素晴らしい。
豊富なキーの種類に、メソッド実行機能なども
キーを指定する部分は、['a']←この部分でしているのですが、ctrlやalt、Functionキーからtab、space、矢印キーなど、大方なんでもいけます。
もちろん、複数キー同時押しの設定もできます。
さらに、このプラグインはコンポーネントごとではなく、グローバルに設定できるので、さらに便利。
また、フォーカスだけでなく、指定したメソッドの起動なども、@v-shortkey="関数名"って感じで指定してやれば、簡単に実現できます。
詳しくは、公式サイトに分かりやすく書かれていますので、見てみてください。
導入時にハマったこと
こんな使いやすいプラグインですが、実は僕、導入までにめっちゃハマってしまいました。
戒めもかねて、共有させてもらいます。これから入れられる方は、ご注意ください。
1.Nuxt.jsで導入する場合、SSRをサポートしていないので注意
ここが、ズバリ導入の際、多くの人がハマるポイントかと思います。
このプラグイン、実はSSRモードに対応していません。
なので、導入の際はブラウザでしか動作しないよう、設定しておく必要があります。
公式ページにも、導入方法についてはあっさりとしか書いておらず、きっと多くの人が他のサイトを見ながら導入することになるかと思います。
その際、他のプラグインがSSRに対応していることが多いためか、ブラウザ動作オンリーの設定について書かれていないことが多かった印象があります。
Nuxt.jsの公式ページに書かれていますので、参考にしてみてください。
具体的には、
- クライアント側動作オンリーですよというオプションをつける
- 「.client.js」という名前にしたファイルにまとめておく
のどちらかのパターンになるかと思います。
ここさえ通過すれば、あとは全然難しくはないので、導入方法は割愛します。
2.良く似た名前のプラグインが多い
あとは全然難しくないと言いつつ、もう１つハマったポイントがありました。
そう、プラグイン間違え…!!
これは侮るなかれ、うまくいかずに再インストールする際に、誤って違うプラグインを入れてしまっていた…
または、情報を探していて途中から違うプラグインのものに変わっていた…なんてことも、結構あるものです。
僕は、こんな簡単なことにハマってしまい、1時間ほど使ってしまいました。
vue-shortkeyやvue-shortcutkey、vue-shortcuts等々、いくつかありました。
皆さんもご注意を。
以上です。最後までありがとうございました。
参考：公式サイト