fix: restore useRoute and useRouter Nuxt composables

resolves #43
nuxt-modules · Sep 7, 2022 · 539d16f · 539d16f
1 parent a0e18ca
commit 539d16f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 30 deletions.
diff --git a/src/parts/router.ts b/src/parts/router.ts
@@ -1,5 +1,5 @@
 import { existsSync } from 'node:fs'
-import { useNuxt, useLogger, addPlugin } from '@nuxt/kit'
+import { useNuxt, useLogger } from '@nuxt/kit'
 import { join, resolve } from 'pathe'
 import { runtimeDir } from '../utils'
 
@@ -21,7 +21,6 @@ export const setupRouter = () => {
     return
   }
 
-  addPlugin(resolve(runtimeDir, 'router'))
   nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
   nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || []
   nuxt.options.vite.optimizeDeps.include.push('@ionic/vue-router')
@@ -31,32 +30,13 @@ export const setupRouter = () => {
       app.plugins = app.plugins.filter(
         p => !p.src.match(/nuxt3?\/dist\/(app\/plugins|pages\/runtime)\/router/)
       )
+      app.plugins.unshift({
+        src: resolve(runtimeDir, 'router'),
+        mode: 'all',
+      })
     })
   })
 
-  // Remove Nuxt useRoute & useRouter composables
-  nuxt.hook('autoImports:sources', sources => {
-    for (const source of sources) {
-      if (source.from === '#app') {
-        source.imports = source.imports.filter(
-          i => typeof i !== 'string' || !['useRoute', 'useRouter'].includes(i)
-        )
-      }
-    }
-    sources.push({
-      from: 'vue-router',
-      imports: ['useRouter', 'useRoute'],
-    })
-  })
-
-  // Remove vue-router types
-  nuxt.hook('prepare:types', ({ references }) => {
-    const index = references.findIndex(i => 'types' in i && i.types === 'vue-router')
-    if (index !== -1) {
-      references.splice(index, 1)
-    }
-  })
-
   // Add default ionic root layout
   nuxt.hook('app:resolve', app => {
     if (

diff --git a/src/runtime/router.ts b/src/runtime/router.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, createMemoryHistory } from '@ionic/vue-router'
 
-import { computed, reactive, shallowRef } from 'vue'
+import { computed, ComputedRef, reactive, shallowRef } from 'vue'
 import { createWebHashHistory, NavigationGuard, RouteLocation } from 'vue-router'
 import { createError } from 'h3'
 import { withoutBase, isEqual } from 'ufo'
@@ -72,9 +72,9 @@ export default defineNuxtPlugin(async nuxtApp => {
   })
 
   // https://github.com/vuejs/router/blob/main/packages/router/src/router.ts#L1225-L1233
-  const route = {} as { [K in RouteLocation]: ComputedRef<RouteLocation[K]> }
+  const route = {} as { [K in keyof RouteLocation]: ComputedRef<RouteLocation[K]> }
   for (const key in _route.value) {
-    route[key as keyof RouteLocation] = computed(() => _route.value[key as keyof RouteLocation])
+    route[key as 'path'] = computed(() => _route.value[key as 'path'])
   }
 
   nuxtApp._route = reactive(route)
@@ -86,7 +86,7 @@ export default defineNuxtPlugin(async nuxtApp => {
 
   const error = useError()
 
-  const initialLayout = useState('_layout')
+  const initialLayout = useState<string>('_layout')
   router.beforeEach(async (to, from) => {
     to.meta = reactive(to.meta)
     if (nuxtApp.isHydrating) {
@@ -117,7 +117,7 @@ export default defineNuxtPlugin(async nuxtApp => {
       const middleware =
         typeof entry === 'string'
           ? nuxtApp._middleware.named[entry] ||
-          (await namedMiddleware[entry]?.().then((r: any) => r.default || r))
+            (await namedMiddleware[entry]?.().then((r: any) => r.default || r))
           : entry
 
       if (!middleware) {