feat!: use native vue-router composables (#533)

Author: danielroe

package.json

@@ -95,7 +95,7 @@
     "unbuild": "0.8.11",
     "vitest": "^0.21.1",
     "vue": "^2.7.10",
-    "vue-router": "^3"
+    "vue-router": "^3.6.5"
   },
   "engines": {
     "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"

src/capi.ts

@@ -22,6 +22,9 @@ export function setupCAPIBridge (options: Exclude<BridgeConfig['capi'], boolean>
     nuxt.options.plugins.unshift(appPlugin)
   })
 
+  // Transpile vue-router to ensure single vue instance
+  nuxt.options.build.transpile.push('vue-router')
+
   if (options.legacy === false) {
     // Skip adding `@nuxtjs/composition-api` handlers if legacy support is disabled
     return

src/imports/presets.ts

@@ -33,8 +33,6 @@ export const appPreset = defineUnimportPreset({
     'useCookie',
     'useRequestHeaders',
     'useRequestEvent',
-    'useRouter',
-    'useRoute',
     'defineNuxtRouteMiddleware',
     'navigateTo',
     'abortNavigation',
@@ -108,8 +106,21 @@ export const vuePreset = defineUnimportPreset({
   imports: vueKeys
 })
 
+// vue-router
+const vueRouterPreset = defineUnimportPreset({
+  from: 'vue-router/composables',
+  imports: [
+    'useRoute',
+    'onBeforeRouteLeave',
+    'onBeforeRouteUpdate',
+    'useLink',
+    'useRouter'
+  ]
+})
+
 export const defaultPresets = [
   ...commonPresets,
   appPreset,
+  vueRouterPreset,
   vuePreset
 ]

src/runtime/capi.legacy.ts

@@ -1,7 +1,8 @@
 import { defu } from 'defu'
 import { computed, getCurrentInstance as getVM, isReactive, isRef, onBeforeMount, onServerPrefetch, reactive, ref, set, shallowRef, toRaw, toRefs, watch } from 'vue'
+import { useRouter as _useRouter, useRoute as _useRoute } from 'vue-router/composables'
 import { useNuxtApp } from './app'
-import { useRouter as _useRouter, useState } from './composables'
+import { useState } from './composables'
 
 // Vue composition API export
 export {
@@ -254,8 +255,7 @@ export const useRouter = () => {
 
 export const useRoute = () => {
   warnOnce('useRoute', 'You are using `useRoute`, which has a Nuxt 3-compatible replacement.')
-  const vm = getCurrentInstance()
-  return computed(() => vm.$route)
+  return _useRoute()
 }
 
 export const useStore = () => {

src/runtime/composables.ts

@@ -1,11 +1,11 @@
 import { getCurrentInstance, onBeforeUnmount, isRef, watch, reactive, toRef, isReactive, Ref, set } from 'vue'
 import type { CombinedVueInstance } from 'vue/types/vue'
 import type { MetaInfo } from 'vue-meta'
-import type VueRouter from 'vue-router'
-import type { Location, Route } from 'vue-router'
+import type { Location, RawLocation, Route } from 'vue-router'
 import type { RuntimeConfig } from '@nuxt/schema'
 import { sendRedirect } from 'h3'
 import { defu } from 'defu'
+import { useRouter } from 'vue-router/composables'
 import { useNuxtApp } from './app'
 
 export { useLazyAsyncData, refreshNuxtData } from './asyncData'
@@ -48,29 +48,8 @@ export const useRuntimeConfig = () => {
   return nuxtApp._config as RuntimeConfig
 }
 
-// Auto-import equivalents for `vue-router`
-export const useRouter = () => {
-  return useNuxtApp()?.nuxt2Context.app.router as VueRouter
-}
-
-// This provides an equivalent interface to `vue-router` (unlike legacy implementation)
-export const useRoute = () => {
-  const nuxtApp = useNuxtApp()
-
-  if (!nuxtApp._route) {
-    Object.defineProperty(nuxtApp, '__route', {
-      get: () => nuxtApp.nuxt2Context.app.context.route
-    })
-    nuxtApp._route = reactive(nuxtApp.__route)
-    const router = useRouter()
-    router.afterEach(route => Object.assign(nuxtApp._route, route))
-  }
-
-  return nuxtApp._route as Route
-}
-
 // payload.state is used for vuex by nuxt 2
-export const useState = <T>(key: string, init?: (() => T)): Ref<T> => {
+export const useState = <T> (key: string, init?: (() => T)): Ref<T> => {
   const nuxtApp = useNuxtApp()
   if (!nuxtApp.payload.useState) {
     nuxtApp.payload.useState = {}
@@ -195,7 +174,7 @@ export interface NavigateToOptions {
   replace?: boolean
 }
 
-export const navigateTo = (to: Route, options: NavigateToOptions = {}): Promise<Route | void> | Route => {
+export const navigateTo = (to: RawLocation, options: NavigateToOptions = {}): Promise<RawLocation | Route | void> | RawLocation | Route => {
   if (isProcessingMiddleware()) {
     return to
   }

yarn.lock

@@ -11736,10 +11736,10 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
-vue-router@^3, vue-router@^3.5.1:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.4.tgz#c453c0b36bc75554de066fefc3f2a9c3212aca70"
-  integrity sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==
+vue-router@^3.5.1, vue-router@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
+  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
 
 vue-server-renderer@^2.6.12:
   version "2.7.10"