glyphnav/nuxt

pnpm add glyphnav

// 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' },
  );
});

// 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')

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)
});