nuxt-router-ui

    2.0.4 • Public • Published

    npm npm NPM

    📖 Release Notes

    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@next

    Nuxt 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 styles

    Embed 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>

    Install

    npm i nuxt-router-ui

    DownloadsWeekly Downloads

    2

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    53.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • richardeschloss