Is it possible to make the useAsyncData composable delay page rendering until the data is loaded
type UseBDRequest = {
param?: string;
key: string;
methodKey?:
| "page"
| "types"
| "type"
| "option"
| "options"
| "menu"
| "menus"
| "categories"
| "category"
| "assets"
| "asset";
setMeta?: boolean | null;
canredirect404?: boolean | null;
};
export const useBDRequest = ({
param = "",
key,
methodKey = "page",
setMeta = true,
canredirect404 = true,
}: UseBDRequest): { data: Ref<any>; pending: Ref<boolean>; error: Ref<any> } => {
const { $head, $api } = useNuxtApp();
// return useAsyncData(key, () => $api.mongomethodKey);
const { data, pending, error } = useAsyncData(key, () => $api.mongomethodKey);
watchEffect(() => {
if (setMeta && data.value?.success && data.value?.data) {
const {
meta_title = "",
meta_description = "",
meta_keywords = "",
meta_og = {},
name = "",
noindex = false,
nofollow = false,
canonical = "",
updated_at = "",
} = data.value.data;
useHead(
$head({
meta_title,
meta_description,
meta_keywords,
meta_image: meta_og?.["og:image"] "",
title: name,
noindex,
nofollow,
canonical,
lastmodified: updated_at,
})
);
}
if (canredirect404 && (error.value data.value?.success === false)) {
navigateTo("/404");
}
});
return { data, pending, error };
};
3 Replies
Hi @pabloelsoso.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to make the
useAsyncData composable delay page rendering until the data is loaded in Nuxt. By default, useAsyncData blocks navigation until its async handler is resolved, meaning the page will not render until the data is fetched. This is the standard behavior unless you explicitly set the lazy option to true, which would allow navigation to proceed before the data is loaded.
From the documentation:
By default,So, in your custom composable, as long as you useuseAsyncDatablocks navigation until its async handler is resolved.useLazyAsyncDataprovides a wrapper arounduseAsyncDatathat triggers navigation before the handler is resolved by setting thelazyoption totrueDocs > useLazyAsyncData.
useAsyncData without the lazy: true option, page rendering will be delayed until the data is loaded:
If you want to allow the page to render before the data is loaded (i.e., not block navigation), you would use useLazyAsyncData or set the lazy option to true:
But in your current implementation, navigation will be blocked until the data is fetched, which matches your requirement to delay page rendering until the data is loaded Docs > useAsyncData Docs > useLazyAsyncData.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1023026134310469662> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at
https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables.