useCommandPalette is a composable that provides access to the command palette state. It requires NbCommandPalettePlugin to be installed on the Vue app.
See the Command Palette component docs for full setup instructions and usage examples.
Quick start
ts
import { createApp } from 'vue'
import { NbCommandPalettePlugin } from '@nubisco/ui'
const app = createApp(App)
app.use(NbCommandPalettePlugin)Then in any component:
vue
<script setup>
import { useCommandPalette } from '@nubisco/ui'
const palette = useCommandPalette()
palette.register({
id: 'app.settings',
label: 'Open Settings',
icon: 'gear',
namespace: 'Application',
shortcut: 'Cmd+,',
handler: () => router.push('/settings'),
})
</script>Cleanup
Commands are stored globally. If a component that registered commands is unmounted and the commands should no longer be available, call unregister in onBeforeUnmount.
vue
<script setup>
import { onBeforeUnmount } from 'vue'
import { useCommandPalette } from '@nubisco/ui'
const palette = useCommandPalette()
palette.register({ id: 'editor.save', label: 'Save', handler: save })
onBeforeUnmount(() => {
palette.unregister('editor.save')
})
</script>