28
Introducing nuxt-router-ui
Introducing nuxt-router-ui, a dope AF router UI for Nuxt and VueJS, based on d3.
$ npm i -D nuxt-router-ui
nuxt.config.js
export default {
...,
modules: ['nuxt-router-ui'],
...
}
your-globals.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import D3RouterUI from 'nuxt-router-ui/lib/D3RouterUI.js'
Vue.use(BootstrapVue) // provides the BModal component
Vue.component('D3RouterUI', D3RouterUI)
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>
Action | Result |
---|---|
Ctrl + Shift + Space | Opens Router UI |
Click (on node) | Opens the path'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.
Replace "Ctrl" with "CMD" above. (whatever sets "e.metaKey" and it will work)
More complete documentation is hosted here
What this project really is...
I needed a relatively small project to work on to give me a reasons to:
require
no longer works, so a bunch of things had to change. This project may serve as my "base project" for future VueJS projects.If any of the above bullets were on your learning bucket list, you may wish to check out the source code on my github repo
28