🗂

vue-shortkey を Nuxt.js に導入する方法

2020/12/19に公開

概要

最近、 AWS コンソールの UI が更新されてヘッダー中央に検索窓ができました。[Option + S] のショットカットキーもあり便利ですよね。
Nuxt.js でショットカットキーを実現するパッケージには、どういうのがあるんだろうと調べたら vue-shortkey を見つけました。
この記事では、Nuxt.js で vue-shortkey を使う方法を説明します。

導入方法

1.plugin/vue-shortkey.js or plugins/vue-shortkey.client.js ファイルを作成して、プラグインとして登録します。ここで一つ注意点があり、vue-shortkey は SSR では使えないので CSR でのみ動くように設定します。

import Vue from 'vue';
import VueShortKey from 'vue-shortkey';

Vue.use(VueShortKey);

2.nuxt.config.js でプラグインを登録します。

plugins: ['~/plugins/vue-shortkey.client.js'],

1 で plugin/vue-shortkey.js という名前でファイルを作ったら、 nuxt.config.js では下記のようにします。

plugins: [
  {
    src: '~/plugins/vue-shortkey.js',
    mode: 'client',
  },
],

あとは、好きなタグに v-shortkey でキーを指定、@shortkey で関数を指定すれば使えるようになります。

ちなみに好きなタグにフォーカスを当てるだけなら、v-shortkey.focus=['a'] で a キーを押したらフォーカスが当たるようになります。

概要

導入方法

Discussion