feat(nuxt): add onBeforeRouteLeave and onBeforeRouteUpdate compos…

…ables

packages/nuxt/src/app/composables/index.ts

@@ -10,7 +10,7 @@ export type { FetchResult, UseFetchOptions } from './fetch'
 export { useCookie } from './cookie'
 export type { CookieOptions, CookieRef } from './cookie'
 export { useRequestHeaders, useRequestEvent, setResponseStatus } from './ssr'
-export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, setPageLayout, navigateTo, useRoute, useActiveRoute, useRouter } from './router'
+export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useActiveRoute, useRouter } from './router'
 export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router'
 export { preloadComponents, prefetchComponents, preloadRouteComponents } from './preload'
 export { isPrerendered, loadPayload, preloadPayload } from './payload'

packages/nuxt/src/app/composables/router.ts

@@ -1,4 +1,4 @@
-import { getCurrentInstance, inject } from 'vue'
+import { getCurrentInstance, inject, onUnmounted } from 'vue'
 import type { Router, RouteLocationNormalizedLoaded, NavigationGuard, RouteLocationNormalized, RouteLocationRaw, NavigationFailure, RouteLocationPathRaw } from 'vue-router'
 import { sendRedirect } from 'h3'
 import { hasProtocol, joinURL, parseURL } from 'ufo'
@@ -17,6 +17,19 @@ export const useRoute = (): RouteLocationNormalizedLoaded => {
   return useNuxtApp()._route
 }
 
+export const onBeforeRouteLeave = (guard: NavigationGuard) => {
+  const unsubscribe = useRouter().beforeEach((to, from, next) => {
+    if (to === from) { return }
+    return guard(to, from, next)
+  })
+  onUnmounted(unsubscribe)
+}
+
+export const onBeforeRouteUpdate = (guard: NavigationGuard) => {
+  const unsubscribe = useRouter().beforeEach(guard)
+  onUnmounted(unsubscribe)
+}
+
 /** @deprecated Use `useRoute` instead. */
 export const useActiveRoute = (): RouteLocationNormalizedLoaded => {
   return useNuxtApp()._route

packages/nuxt/src/imports/presets.ts

@@ -64,6 +64,15 @@ const appPreset = defineUnimportPreset({
   ]
 })
 
+// vue-router
+const routerPreset = defineUnimportPreset({
+  from: '#app',
+  imports: [
+    'onBeforeRouteLeave',
+    'onBeforeRouteUpdate'
+  ]
+})
+
 // vue
 const vuePreset = defineUnimportPreset({
   from: 'vue',
@@ -140,5 +149,6 @@ const vuePreset = defineUnimportPreset({
 export const defaultPresets: InlinePreset[] = [
   ...commonPresets,
   appPreset,
+  routerPreset,
   vuePreset
 ]

packages/nuxt/src/pages/module.ts

@@ -54,6 +54,14 @@ export default defineNuxtModule({
       references.push({ types: 'vue-router' })
     })
 
+    // Add vue-router route guard imports
+    nuxt.hook('imports:sources', (sources) => {
+      const routerImports = sources.find(s => s.from === '#app' && s.imports.includes('onBeforeRouteLeave'))
+      if (routerImports) {
+        routerImports.from = 'vue-router'
+      }
+    })
+
     // Regenerate templates when adding or removing pages
     nuxt.hook('builder:watch', async (event, path) => {
       const dirs = [