From 71e71d13273c604b12bde55fc53f1cde92adf62d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 2 Oct 2021 13:32:28 +0100
Subject: [PATCH] =?UTF-8?q?feat(bridge,=20nuxt3):=20expose=20equivalent=20?=
 =?UTF-8?q?`useRoute`=20and=20`useRouter`=20com=E2=80=A6=20(#615)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bridge/package.json                  |  3 ++-
 packages/bridge/src/runtime/capi.legacy.mjs   |  2 ++
 packages/bridge/src/runtime/composables.ts    | 26 +++++++++++++++++++
 .../nuxt3/src/global-imports/identifiers.ts   |  4 +++
 test/fixtures/bridge/layouts/default.vue      | 17 ++++++++++++
 test/fixtures/bridge/pages/test/_slug.vue     |  7 +++++
 yarn.lock                                     |  8 ++++++
 7 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/bridge/layouts/default.vue
 create mode 100644 test/fixtures/bridge/pages/test/_slug.vue

diff --git a/packages/bridge/package.json b/packages/bridge/package.json
index def75eb771..1939895344 100644
--- a/packages/bridge/package.json
+++ b/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"
   }
 }
diff --git a/packages/bridge/src/runtime/capi.legacy.mjs b/packages/bridge/src/runtime/capi.legacy.mjs
index 5027d5f3d7..80b8772e41 100644
--- a/packages/bridge/src/runtime/capi.legacy.mjs
+++ b/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)
 }
diff --git a/packages/bridge/src/runtime/composables.ts b/packages/bridge/src/runtime/composables.ts
index 0a1b8a2ac9..cdb6ff5937 100644
--- a/packages/bridge/src/runtime/composables.ts
+++ b/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
+}
diff --git a/packages/nuxt3/src/global-imports/identifiers.ts b/packages/nuxt3/src/global-imports/identifiers.ts
index 006cf329bc..70cd6a0d47 100644
--- a/packages/nuxt3/src/global-imports/identifiers.ts
+++ b/packages/nuxt3/src/global-imports/identifiers.ts
@@ -51,6 +51,10 @@ const identifiers = {
     'nextTick',
     'provide',
     'useCssModule'
+  ],
+  'vue-router': [
+    'useRoute',
+    'useRouter'
   ]
 }
 
diff --git a/test/fixtures/bridge/layouts/default.vue b/test/fixtures/bridge/layouts/default.vue
new file mode 100644
index 0000000000..1f3e121ad5
--- /dev/null
+++ b/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>
diff --git a/test/fixtures/bridge/pages/test/_slug.vue b/test/fixtures/bridge/pages/test/_slug.vue
new file mode 100644
index 0000000000..ed1ce3942b
--- /dev/null
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 24c87ac42a..b451ba2682 100644
--- a/yarn.lock
+++ b/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"