vue-keyboard-nav
v1.0.1
Published
Vue 3 component that grab your routes and enable navigation by keyboard shortcut
Downloads
2
Maintainers
Readme
vue-keyboard-nav
Requirements
Vue 3
Getting started
npm install vue-keyboard-nav
First, you have to export your router routes to import it where you are going to invoke the Spotlight component. I suggest you to do it in your App.vue.
router.js
// example
export const routes = [
{ name: 'home', path: '/', component: Home },
{
name: 'user',
path: '/user',
component: User,
children: [
{ name: 'dashboard', path: 'dashboard', component: UserDashboard },
{ name: 'profile', path: 'profile', component: UserProfile },
],
},
{ name: 'products', path: '/products', component: Products },
{ name: 'contact', path: '/contact', component: Contact },
];
App.vue
<template>
<router-view></router-view>
<Spotlight v-if="isActive" :blur="blur" :routes="routes" />
</template>
<script>
import { useSpotlight, Spotlight } from 'vue-keyboard-nav';
import { routes } from '@/router';
export default {
name: 'App',
components: {
Spotlight,
},
setup() {
const { isActive, blur, keyboardShortcut } = useSpotlight();
keyboardShortcut();
return { isActive, blur, routes };
},
};
</script>
Then export your routes
, aswell as isActive
and blur
from your setup function, to pass it as props to the <Spotlight>
component.
Keybinds
ctrl + k
: Open the spotlight
while Spotlight is opened:
Escape
: close the Spotlight
Arrow key up/down
: navigate in the filtered list
Enter
: Validate your active choice, close the Spotlight and redirect to your selected choice.