feat(bridge, nuxt3): expose equivalent useRoute and useRouter com… (#615)

packages/bridge/package.json

@@ -32,6 +32,7 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/node-fetch": "^3.0.2",
-    "unbuild": "latest"
+    "unbuild": "latest",
+    "vue-router": "3"
   }
 }

packages/bridge/src/runtime/capi.legacy.mjs

@@ -300,10 +300,12 @@ export const wrapProperty = (property, makeComputed = true) => () => {
 }
 
 export const useRouter = () => {
+  warnOnce('useRouter', 'You are using `useRouter`, which can be replaced with `useRouter` from `@nuxt/bridge`.')
   return getCurrentInstance().$router
 }
 
 export const useRoute = () => {
+  warnOnce('useRoute', 'You are using `useRoute`, which can be replaced with `useRoute` from `@nuxt/bridge`.')
   const vm = getCurrentInstance()
   return computed(() => vm.$route)
 }

packages/bridge/src/runtime/composables.ts

@@ -1,3 +1,8 @@
+import { reactive } from '@vue/composition-api'
+import type VueRouter from 'vue-router'
+import type { Route } from 'vue-router'
+import { useNuxtApp } from './app'
+
 export * from '@vue/composition-api'
 
 const mock = () => () => { throw new Error('not implemented') }
@@ -8,3 +13,24 @@ export const useSSRRef = mock()
 export const useData = mock()
 export const useGlobalData = mock()
 export const useHydration = mock()
+
+// Auto-import equivalents for `vue-router`
+export const useRouter = () => {
+  return useNuxtApp()?.legacyNuxt.router as VueRouter
+}
+
+// This provides an equivalent interface to `vue-router` (unlike legacy implementation)
+export const useRoute = () => {
+  const nuxt = useNuxtApp()
+
+  if (!nuxt._route) {
+    Object.defineProperty(nuxt, '__route', {
+      get: () => nuxt.legacyNuxt.context.route
+    })
+    nuxt._route = reactive(nuxt.__route)
+    const router = useRouter()
+    router.afterEach(route => Object.assign(nuxt._route, route))
+  }
+
+  return nuxt._route as Route
+}

packages/nuxt3/src/global-imports/identifiers.ts

@@ -51,6 +51,10 @@ const identifiers = {
     'nextTick',
     'provide',
     'useCssModule'
+  ],
+  'vue-router': [
+    'useRoute',
+    'useRouter'
   ]
 }
 

test/fixtures/bridge/layouts/default.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Nuxt />
+    {{ route.path }}
+  </div>
+</template>
+
+<script>
+import { useRoute } from '#app'
+export default {
+  setup () {
+    const route = useRoute()
+    console.log(route.path)
+    return { route }
+  }
+}
+</script>

test/fixtures/bridge/pages/test/_slug.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <nuxt-link :to="`/test/${Math.random() * 100}`">
+      Random path
+    </nuxt-link>
+  </div>
+</template>

yarn.lock

@@ -1455,6 +1455,7 @@ __metadata:
     ufo: ^0.7.9
     unbuild: latest
     unplugin: ^0.2.16
+    vue-router: 3
   languageName: unknown
   linkType: soft
 
@@ -14227,6 +14228,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"vue-router@npm:3":
+  version: 3.5.2
+  resolution: "vue-router@npm:3.5.2"
+  checksum: 342049e7cb0e4974879c57f9ecce342c180a1abce8df71137f902b201faa18d0a65c44936cbd4e9d62d5770d8f95395d73a5e05efa255475817f350bf7a094d1
+  languageName: node
+  linkType: hard
+
 "vue-router@npm:^4.0.11":
   version: 4.0.11
   resolution: "vue-router@npm:4.0.11"