fix: provide nuxt useRoute and useRouter composables

src/imports/presets.ts

@@ -33,6 +33,8 @@ export const appPreset = defineUnimportPreset({
     'useCookie',
     'useRequestHeaders',
     'useRequestEvent',
+    'useRouter',
+    'useRoute',
     'defineNuxtRouteMiddleware',
     'navigateTo',
     'abortNavigation',
@@ -110,11 +112,9 @@ export const vuePreset = defineUnimportPreset({
 const vueRouterPreset = defineUnimportPreset({
   from: 'vue-router/composables',
   imports: [
-    'useRoute',
     'onBeforeRouteLeave',
     'onBeforeRouteUpdate',
-    'useLink',
-    'useRouter'
+    'useLink'
   ]
 })
 

src/runtime/capi.legacy.ts

@@ -1,8 +1,7 @@
 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 { useState } from './composables'
+import { useRouter as _useRouter, useRoute as _useRoute, useState } from './composables'
 
 // Vue composition API export
 export {

src/runtime/composables.ts

@@ -1,11 +1,12 @@
 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, 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 { useRouter as useVueRouter, useRoute as useVueRoute } from 'vue-router/composables'
 import { joinURL } from 'ufo'
 import { useNuxtApp } from './app'
 
@@ -33,6 +34,36 @@ export const useRuntimeConfig = () => {
   return nuxtApp._config as RuntimeConfig
 }
 
+// Auto-import equivalents for `vue-router`
+export const useRouter = () => {
+  if (getCurrentInstance()) {
+    return useVueRouter()
+  }
+
+  // @ts-expect-error nuxt2Context is not typed fully
+  return useNuxtApp()?.nuxt2Context.app.router as VueRouter
+}
+
+// This provides an equivalent interface to `vue-router` (unlike legacy implementation)
+export const useRoute = () => {
+  if (getCurrentInstance()) {
+    return useVueRoute()
+  }
+
+  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> => {
   const nuxtApp = useNuxtApp()