Detectar atajos de teclado en una aplicación Vue

Para asociar atajos de teclado globales lo más sencillo es establecerlos en el div principal de nuestra aplicación Vue.

Así que si queremos por ejemplo lanzar nuestro menú de aplicaciones cuando el usuario haga Ctrl + Clic en cualquier parte de la página o pulse la combinación de teclas Meta + Espacio usaríamos este código:

<div id="app"
     v-on:keyup.meta.space="launchAppsMenu"
     v-on:click.ctrl="launchAppsMenu"></div>

Sin embargo al probar esto veríamos que el Ctrl + Clic funciona pero no así el Meta + Espacio. Esto es porque los eventos de teclado solo se generan para elementos que pueden tener el foco (focusables) y los div no son por defecto focusables. Para que lo sean solamente tenemos que añadirle el atributo tabindex, una vez lo tenga podrá recibir eventos de teclado. Así quedaría entonces nuestro código:

<div id="app" tabindex="0" 
     v-on:keyup.meta.space="launchAppsMenu"
     v-on:click.ctrl="launchAppsMenu"></div>