feat: add api for preloading route loaders

client.d.ts

@@ -42,6 +42,7 @@ declare module 'vue-router/auto' {
     // Experimental Data Fetching
     definePage,
     DataLoaderPlugin,
+    preloadRoute,
     NavigationResult,
   } from 'unplugin-vue-router/runtime'
   // must be added to the virtual vue-router/auto

playground/src/App.vue

@@ -7,6 +7,7 @@ import type {
 } from 'vue-router'
 import { ref } from 'vue'
 import { routes } from 'vue-router/auto-routes'
+import { preloadRoute } from 'unplugin-vue-router/runtime'
 
 console.log(`We have ${routes.length} routes.`)
 
@@ -105,6 +106,12 @@ function _test() {
           <input type="text" v-model="targetRoute" />
         </label>
         <button>Go</button>
+        <button
+          type="button"
+          @click.prevent="preloadRoute(router, targetRoute)"
+        >
+          Preload
+        </button>
       </form>
     </div>
   </header>

playground/src/pages/[name].vue

@@ -5,6 +5,7 @@ export const useUserData = defineBasicLoader(
   '/[name]',
   async (route) => {
     await delay(1000)
+    console.log('useUserData called for', route.params.name)
     if (route.name === '/[name]') {
       route.params
     }

src/codegen/vueRouterModule.ts

@@ -16,6 +16,7 @@ export { definePage } from 'unplugin-vue-router/runtime'
 export {
   DataLoaderPlugin,
   NavigationResult,
+  preloadRoute,
 } from 'unplugin-vue-router/data-loaders'
 
 export * from 'unplugin-vue-router/data-loaders/basic'

src/data-loaders/entries/index.ts

@@ -1,6 +1,7 @@
 export {
   DataLoaderPlugin,
   NavigationResult,
+  preloadRoute,
   withLoaderContext,
 } from 'unplugin-vue-router/runtime'
 export type {

src/data-loaders/index.ts

@@ -10,7 +10,11 @@ export type {
 } from './createDataLoader'
 
 // new data fetching
-export { DataLoaderPlugin, NavigationResult } from './navigation-guard'
+export {
+  DataLoaderPlugin,
+  NavigationResult,
+  preloadRoute,
+} from './navigation-guard'
 export type {
   DataLoaderPluginOptions,
   SetupLoaderGuardOptions,

src/data-loaders/meta-extensions.ts

@@ -1,7 +1,8 @@
-import { type App } from 'vue'
+import type { App, EffectScope } from 'vue'
 import type { DataLoaderEntryBase, UseDataLoader } from './createDataLoader'
 import type {
   APP_KEY,
+  EFFECT_SCOPE_KEY,
   LOADER_ENTRIES_KEY,
   LOADER_SET_KEY,
   PENDING_LOCATION_KEY,
@@ -46,6 +47,8 @@ declare module 'vue-router' {
 
     [APP_KEY]: App<unknown>
 
+    [EFFECT_SCOPE_KEY]: EffectScope
+
     [IS_SSR_KEY]: boolean
   }
 

src/data-loaders/navigation-guard.spec.ts

@@ -16,6 +16,7 @@ import { getRouter } from 'vue-router-mock'
 import {
   ABORT_CONTROLLER_KEY,
   LOADER_SET_KEY,
+  preloadRoute,
   setCurrentContext,
   DataLoaderPlugin,
   NavigationResult,
@@ -470,4 +471,99 @@ describe('navigation-guard', () => {
       expect(router.currentRoute.value.fullPath).toBe('/#ok')
     })
   })
+
+  describe('preloadRoute', () => {
+    it('collects loaders from the matched route', async () => {
+      setupApp(false)
+      const router = getRouter()
+      router.addRoute({
+        name: '_test',
+        path: '/fetch',
+        component,
+        meta: {
+          loaders: [loader1, loader1], // duplicated on purpose
+        },
+      })
+      router.addRoute({
+        name: '_test2',
+        path: '/fetch2',
+        component,
+        meta: {
+          loaders: [loader2, loader3],
+        },
+      })
+      await preloadRoute(router, '/fetch')
+      let set = router.resolve('/fetch').meta[LOADER_SET_KEY]
+      expect([...set!]).toEqual([loader1])
+      await preloadRoute(router, '/fetch2')
+      set = router.resolve('/fetch2').meta[LOADER_SET_KEY]
+      expect([...set!]).toEqual([loader2, loader3])
+    })
+
+    it.todo('collects loaders from nested routes', async () => {
+      setupApp(false)
+      const router = getRouter()
+      router.addRoute({
+        name: '_test',
+        path: '/fetch',
+        component,
+        meta: {
+          loaders: [loader1],
+        },
+        children: [
+          {
+            name: '_test2',
+            path: 'nested',
+            component,
+            meta: {
+              loaders: [loader2, loader3],
+            },
+          },
+        ],
+      })
+      await preloadRoute(router, '/fetch/nested')
+      const set = router.resolve('/fetch/nested').meta[LOADER_SET_KEY]
+      // TODO: fix parent loader (loader1) not being collected
+      expect([...set!]).toEqual([loader1, loader2, loader3])
+    })
+
+    it.todo('collects all loaders from lazy loaded pages', async () => {
+      setupApp(false)
+      const router = getRouter()
+      router.addRoute({
+        name: '_test',
+        path: '/fetch',
+        component: () =>
+          import('../../tests/data-loaders/ComponentWithLoader.vue'),
+      })
+      await preloadRoute(router, '/fetch')
+      const set = router.resolve('/fetch').meta[LOADER_SET_KEY]
+      expect([...set!]).toEqual([useDataOne, useDataTwo])
+    })
+
+    it('resolves all loaders', async () => {
+      setupApp(false)
+      const router = getRouter()
+      const l1 = mockedLoader()
+      const l2 = mockedLoader()
+      router.addRoute({
+        name: '_test',
+        path: '/fetch',
+        component,
+        meta: {
+          loaders: [l1.loader, l2.loader],
+        },
+      })
+
+      let isPreloaded = false
+      preloadRoute(router, '/fetch').then(() => (isPreloaded = true))
+      await vi.runAllTimersAsync()
+      l1.resolve()
+      await vi.runAllTimersAsync()
+      expect(isPreloaded).toBeFalsy()
+      l2.resolve()
+      await vi.runAllTimersAsync()
+      expect(isPreloaded).toBeTruthy()
+    })
+  })
 })