glyphnav/nuxt

Watch the address bar. Current path: /

Docs

Install the package — Nuxt stays a peer dependency: 
pnpm add glyphnav
Register one client plugin; every <NuxtLink> then animates: 
// plugins/glyphnav.client.ts
import { installGlyphnav } from 'glyphnav/nuxt';

export default defineNuxtPlugin((nuxtApp) => {
  installGlyphnav(
    { $router: useRouter(), provide: (n, v) => nuxtApp.provide(n, v) },
    { duration: 250, commit: 'before' },
  );
});
Works with either history mode, and with or without global interception: 
// Hash-mode router? Tell the adapter so the animated
// target matches the address bar:
installGlyphnav(app, { historyMode: 'hash' })

// Leave the router untouched, animate only explicit calls:
installGlyphnav(app, { intercept: 'none' })
// then: useNuxtApp().$glyphnav.navigate('/dashboard')
Every entry point accepts the same options object:
installGlyphnav(app, {
  duration: 250,        // total animation time (ms), spread over all frames
  effect: 'scramble',   // 'decode' grows + resolves; 'scramble' bursts, then locks randomly
  commit: 'before',     // navigate instantly, animate on top ('after' = classic order)
  intercept: 'router',  // wrap router.push/replace ('none' = explicit-only)
  historyMode: 'history', // or 'hash' for createWebHashHistory
  scope: 'tail',        // animate only the part that differs from the current path
  animatePopState: true, // also animate browser back/forward (opt-in)
});

Served under the /nuxt base via Nuxt's app.baseURL; the Nuxt plugin wraps router.push so every <NuxtLink> and navigateTo() animates. The title link is a plain anchor (full page load back to the picker).