richardeschloss / nuxt-router-ui

A Router-UI for Nuxt and Vue.

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

nuxt-router-ui's Issues

Nuxt3-rc support

Replace bootstrap modal with vanilla css modal

Replace bootstrap modal with vanilla css modal.

Since this is the only component used by the module, the package can be made much more lightweight if the modal is independent of all of bootstrap. This would further provide the benefit of not conflicting with other user styles they have. (Otherwise, they'd have to use "!important" on all their conflicts).

If the look-and-feel of the modal is still desired, it may be possible to just port over the specific b-modal styles to this, and simply re-use them.

Potentially helpful resource:
https://dev.to/dailydevtips1/vanilla-javascript-modal-pop-up-2okit

Caveat:

• Swapping out the b-modal component also means we'll lose the $bvModal().show and $bvModal.hide() methods...but that part is pretty straightforward to implement.

Provide nuxt3 support

feat/v3 pushed.

The library works, the docs and demo are just lagging behind, but the routerUI now works in Nuxt3. (The usage is exactly the same, so the v2 docs are fine)

To install it:

npm i "git+https://github.com/richardeschloss/nuxt-router-ui.git#feat/v3"

Slim deps down to only the d3 modules used

npm install --save d3-hierarchy d3-selection d3-shape d3-transition d3-zoom

Provide nuxt-edge support

Provide nuxt-edge support

Make router UI modal draggable

Make router UI modal draggable

Dependencies --> DevDependencies

• nuxt should go to devDeps. (People either already have nuxt, or not...if they install this on a vue-only project, they should still be able to use it)