Data loaders are only fetched once

[amir20]

I am sure I am doing some wrong but data loaders are not correctly triggered.

I have the following Vue SFC:

<template>
  {{ isLoading }}
</template>
<script lang="ts">
import { defineBasicLoader } from "unplugin-vue-router/data-loaders/basic";

export const useContainerData = defineBasicLoader("/container/[id]", async (to) => {
  console.log("Loading container data...", to.params.id);
  await new Promise((resolve) => setTimeout(resolve, 2000));
  console.log("Container data loaded!");
  return { id: new Date(), shouldInvalidate: () => true };
});
</script>
<script lang="ts" setup>
const route = useRoute("/container/[id]");
const id = toRef(() => route.params.id);
const { isLoading, data, reload } = useContainerData();
watchEffect(() => {
  console.log("isLoading:", isLoading.value);
  console.log(data.value?.id);
});


</script>
<route lang="yaml">
meta:
  containerMode: true
</route>

1. I first load the page, I expect the navigation to wait 2 seconds and then load. That doesn't happen
2. I only see "Loading container data" in console once.
3. Going to new pages, I never see it again.

My setup is similar to https://github.com/antfu-collective/vitesse/tree/main with a router.ts:

import { type App } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import { routes } from "vue-router/auto-routes";
import { setupLayouts } from "virtual:generated-layouts";
import { DataLoaderPlugin } from "unplugin-vue-router/data-loaders";

export const router = createRouter({
  history: createWebHistory(withBase("/")),
  routes: setupLayouts(routes),
});

export const install = (app: App) => {
  app.use(DataLoaderPlugin, { router });
  app.use(router);
};

What am I doing wrong? If I manually do reload() then it works. But that's not to be expected.

[posva]

It sounds like you are exporting the loader in a component that isn’t a page (component of a route). It doesn’t have to be used by pages but must be exported by one in order to be attached to the navigation

[amir20]

This is a page defined at assets/pages/container/[id].vue.

I looked for an example where they were used successfully but wasn't able to find one.

[posva]

Try inspecting with vite inspect the generated files of vue-router/auto-routes. It's difficult to help without a reproduction

[amir20]

Sorry, I moved on because I couldn't find any working examples.

[pete-intranel]

I had a similar sounding issue and it took me a while to narrow it down to configuration in vite.config.ts for VueRouter.

I had VueRouter({ importMode: 'sync'}). Removing importMode (defaults to async) resolved the issue.

Are sync imports not supported? If not, is there some way of issuing a warning for invalid configuration?

[posva]

The sync mode is supported