Introducing nuxt-router-ui

Introducing nuxt-router-ui, a dope AF router UI for Nuxt and VueJS, based on d3.

Easy-as-pie Usage

Install it

$ npm i -D nuxt-router-ui

Nuxt Config (one-line)

nuxt.config.js

export default {
  ...,
  modules: ['nuxt-router-ui'],
  ...
}

Vue only config

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)

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>

Use it

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.

Mac users

Replace "Ctrl" with "CMD" above. (whatever sets "e.metaKey" and it will work)

Documentation

More complete documentation is hosted here

A Confession

What this project really is...

I needed a relatively small project to work on to give me a reasons to:

try a NuxtJS project in full ESM mode. I.e., setting the package type to "module" since that's where the ecosystem is heading.

try running tests and gaining test coverage on Vue components. require no longer works, so a bunch of things had to change. This project may serve as my "base project" for future VueJS projects.

take a component I loved in d3js (the tree) to make it versatile, easily re-usable and framework agnostic, because I'd still want to use this again 10 years from now.

launch a UI router that was similar to what I worked with in the AngularJS days, but I wanted it to run and look-and-feel based on my preferences. I also wanted it to have enough customizable settings so that in case I changed my mind, I'd only have to tweak settings and never have to really touch the code again. The latest release is v1.0.1. My goal is to not have the codebase get to v1.0.10...wishful thinking maybe?

help others navigate their routes. Heck, if it helps me out, maybe it'll help others. I wanted this to be a faster solution than having to keep typing in the URL and remembering route parameters.

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

Categories:

Javascript Vue

Tags:

Javascript Vue Nuxt D3

Introducing nuxt-router-ui

Categories:

Tags:

Related Posts