fix(nuxt): avoid directly importing vue-router inside <NuxtLayout> (#8421)

packages/nuxt/src/app/components/layout.ts

@@ -1,8 +1,10 @@
 import { computed, defineComponent, h, inject, nextTick, onMounted, Ref, Transition, unref, VNode } from 'vue'
-import { RouteLocationNormalizedLoaded, useRoute as useVueRouterRoute } from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { _wrapIf } from './utils'
 import { useRoute } from '#app'
 // @ts-ignore
+import { useRoute as useVueRouterRoute } from '#build/pages'
+// @ts-ignore
 import layouts from '#build/layouts'
 // @ts-ignore
 import { appLayoutTransition as defaultLayoutTransition } from '#build/nuxt.config.mjs'

packages/nuxt/src/pages/module.ts

@@ -23,6 +23,11 @@ export default defineNuxtModule({
     // Disable module (and use universal router) if pages dir do not exists or user has disabled it
     if ((nuxt.options.pages === false || (nuxt.options.pages !== true && !pagesDirs.some(dir => existsSync(dir)))) && !isRouterOptionsPresent) {
       addPlugin(resolve(distDir, 'app/plugins/router'))
+      // Add vue-router import for `<NuxtLayout>` integration
+      addTemplate({
+        filename: 'pages.mjs',
+        getContents: () => 'export { useRoute } from \'#app\''
+      })
       return
     }
 
@@ -135,6 +140,12 @@ export default defineNuxtModule({
       }
     })
 
+    // Add vue-router import for `<NuxtLayout>` integration
+    addTemplate({
+      filename: 'pages.mjs',
+      getContents: () => 'export { useRoute } from \'vue-router\''
+    })
+
     // Add router options template
     addTemplate({
       filename: 'router.options.mjs',