@noction/hippie-nav

hippie-nav

This modern searchbar offers an intuitive and efficient way for users to explore your application by vue routes and your defined actions, .

Install

npm

npm i @noction/hippie-nav

yarn

yarn add @noction/hippie-nav

pnpm

pnpm add @noction/hippie-nav

Options object structure

The plugin supports the following configuration options:

Action object structure

Usage as component

<template>
  <hippie-nav :options="options" :actions="actions"/>
</template>

<script setup lang="ts">
import { HippieNav } from 'hippie-nav'

const options = {
  excludedPaths: ['/login', '/register', /^\/admin$/],
  indexFields: {
    routes: ['name', 'path'],
    actions: ['name'],
  },
  displayField: {
    route: 'hippieNavMeta.title'
  },
  resultsLimit: 5
}

const actions = [
  {
    name: 'Show graph',
    action: () => {
      //handler
    },
  },
  {
    name: 'Log out',
    action: () => {
      //handler
    }
  }
]


</script>

Props

Usage as plugin

const app = createApp(App)

app.use(router)
app.use(HippieNav, {
  displayField: {
    route: 'hippieNavMeta.title'
  },
  excludedPaths: ['/login', '/register', /^\/admin$/],
  indexFields: {
    actions: ['name'],
    routes: ['name', 'path']
  },
  resultsLimit: 5
})
app.component('HippieBtnCollapse', HippieBtnCollapse)
app.mount('#app')

<template>
  <hippie-nav :actions="actions"/>
</template>

<script setup lang="ts">
import { HippieNav } from 'hippie-nav'

const actions = [
  {
    name: 'Show graph',
    action: () => {
      //handler
    },
  },
  {
    name: 'Log out',
    action: () => {
      //handler
    }
  }
]


</script>

Props