vue-shortkey를 Nuxt로 변경합니다.js로 가져오는 방법

개요

최근 AWS 콘솔의 UI 업데이트로 제목 중앙에 검색 창이 나타납니다.[Option + S]의 단축키도 편리하다.
Nuxt.js에서 캡처 키를 실현하는 포장이 어떤 것들이 있는지 알아봤어요vue-shortkey.
이 기사에서, Nuxt.js에서 vue-shortkey를 사용하는 방법을 설명합니다.

가져오기 방법

1. plugin/vue-shortkey.js 또는 plugins/vue-shortkey.client.js 파일을 만들고 플러그인으로 등록합니다.SSR에서 vue-shortkey를 사용할 수 없기 때문에 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키를 누르면 초점을 맞춘다.