feat: composables for Nuxt progress bar

[aaronhuisinga]

🐛 The bug Nuxt contains built in loading support via a configurable progress bar. The framework contains several hooks for updating the progress bar, including when asyncData or fetch are called, as well as watchers for routeChanged, paramChanged, and queryChanged.

We switched to the Composition API a few months ago and didn't notice the chance in behavior, but it appears that these hooks aren't currently implemented for methods such as useAsync or useFetch. We also aren't seeing the progress bar update for any watchers for route params or query changes.

🌈 Expected behaviour When useAsync or useFetch are called, the Nuxt progress bar is expected to show and update progress of the calls inside them. When a watched route parameter or query changes, the Nuxt progress bar is expected to show and update progress of calls triggered by these changes.

ℹ️ Additional context Examples that work in a non-Composition API setup:

async asyncData({ app }) {
  await app.$axios.get('/api/v1/test');
},

watchQuery: ['page'],

These would show the progress bar when the axios request was made inside of the asyncData method, as well as when the page query parameter changes.

The equivalents in Composition API (do not work):

const { $axios, query } = useContext();

useAsync(async () => {
    await $axios.get('/api/v1/test');
});

watch(
  () => [query.value.page],
  () => $axios.get('/api/v1/test')
);

[jeanmatthieud]

It's really missing as the loading functionality is a core functionality of NuxtJs

[Destaq]

Running into this issue now and it's a major pain point. Any chance of this being implemented in Nuxt Composition API?

[thomas4Bitcraft]

Any updates on this?