diff --git a/src/data-loaders/defineColadaLoader.ts b/src/data-loaders/defineColadaLoader.ts index a30379412..dbbdc3070 100644 --- a/src/data-loaders/defineColadaLoader.ts +++ b/src/data-loaders/defineColadaLoader.ts @@ -31,8 +31,7 @@ import { trackRoute, IS_SSR_KEY, } from 'unplugin-vue-router/data-loaders' -import {} from './utils' -import { type ShallowRef, shallowRef, watch } from 'vue' +import { getCurrentInstance, type ShallowRef, shallowRef, watch } from 'vue' import { type EntryKey, type UseQueryOptions, @@ -396,6 +395,16 @@ export function defineColadaLoader( | DataLoaderColadaEntry | undefined + if (process.env.NODE_ENV !== 'production') { + const isNavigating = !!router[PENDING_LOCATION_KEY] + const componentInstance = getCurrentInstance() + if (!isNavigating && !entry && !options.lazy && componentInstance) { + console.warn( + `[unplugin-vue-router] The "${options.key ?? ''}" loader is not lazy and is not exposed by a route. Either make it lazy or export it from the page.\nLearn more at https://uvr.esm.is/data-loaders/defining-loaders.html#connecting-a-loader-to-a-page` + ) + } + } + if ( // if the entry doesn't exist, create it with load and ensure it's loading !entry || diff --git a/src/data-loaders/defineLoader.ts b/src/data-loaders/defineLoader.ts index 6d76d4c6e..0fd349c58 100644 --- a/src/data-loaders/defineLoader.ts +++ b/src/data-loaders/defineLoader.ts @@ -25,7 +25,7 @@ import { IS_SSR_KEY, } from 'unplugin-vue-router/data-loaders' -import { shallowRef } from 'vue' +import { getCurrentInstance, shallowRef } from 'vue' import { DefineDataLoaderOptionsBase_DefinedData, toLazyValue, @@ -337,6 +337,16 @@ export function defineBasicLoader( // console.log('is same route', entry?.pendingTo === route) // console.log('-- END --') + if (process.env.NODE_ENV !== 'production') { + const isNavigating = !!router[PENDING_LOCATION_KEY] + const componentInstance = getCurrentInstance() + if (!isNavigating && !entry && !options.lazy && componentInstance) { + console.warn( + `[unplugin-vue-router] The "${options.key ?? ''}" loader is not lazy and is not exposed by a route. Either make it lazy or export it from the page.\nLearn more at https://uvr.esm.is/data-loaders/defining-loaders.html#connecting-a-loader-to-a-page` + ) + } + } + if ( // if the entry doesn't exist, create it with load and ensure it's loading !entry || diff --git a/tests/data-loaders/tester.ts b/tests/data-loaders/tester.ts index 160399ec9..2b7b9c6d9 100644 --- a/tests/data-loaders/tester.ts +++ b/tests/data-loaders/tester.ts @@ -466,6 +466,42 @@ export function testDefineLoader( } ) + it('warns if a non lazy loader is used in a component but was not exposed by the page', async () => { + const l1 = mockedLoader({ lazy: false, key: 'l1' }) + const router = getRouter() + router.addRoute({ + name: 'a', + path: '/a', + component: defineComponent({ + setup() { + const { data } = l1.loader() + return { data } + }, + template: `

{{ data }}

`, + }), + // no loaders + meta: { loaders: [] }, + }) + + l1.spy.mockResolvedValue('ok') + + mount(() => h(RouterViewMock), { + global: { + plugins: [ + [DataLoaderPlugin, { router }], + ...(plugins?.(customContext!) || []), + ], + }, + }) + + await router.push('/a') + await flushPromises() + + expect( + `https://uvr.esm.is/data-loaders/defining-loaders.html#connecting-a-loader-to-a-page` + ).toHaveBeenWarned() + }) + it('passes a signal to the loader', async () => { const spy = vi.fn<