3.0.5 • Published 1 year ago
nuxt-router-ui v3.0.5
nuxt-router-ui
A router UI for Nuxt and VueJS. Stash it in the footer and just use it when you need it! Hide it when you don't!
Demo
| Action | Result |
|---|---|
| Ctrl + Shift + Space | Opens the Router UI |
| Click (on node) | Opens the route's children, if any |
| Ctrl + Click (on node) | Navigates to that route's path. If it's a parameterized route, you'll be prompted for parameters before navigation (only if parameters are required)* |
| Ctrl + Shift + Click (on node) | Similar as Ctrl + Click, but force opens the prompt for the parameterized route, whether the parameters are required or not |
(*Note: after parameters are input and submitted, they are cached to localStorage so that you don't have to keep re-entering the parameters.)
The router UI will always start with the current route's node expanded to show it's children.
Install it
- Nuxt2.x
$ npm i -D nuxt-router-ui- Nuxt3.x
$ npm i -D nuxt-router-ui@nextNuxt Config (one-line)
nuxt.config.js
export default {
...,
buildModules: ['nuxt-router-ui'],
...
}Vue only config
your-globals.js
import Vue from 'vue'
import D3RouterUI from 'nuxt-router-ui/lib/VueD3/D3RouterUI.js'
Vue.component('D3RouterUI', D3RouterUI) // provides the component and scoped stylesEmbed it
The component to embed is <D3RouterUI />. Find a part of your app that is pretty much fixed, like the footer:
layouts/default.vue
<template>
<div>
<Nuxt />
<D3RouterUI />
</div>
</template>