Nuxt•9mo ago

Impossible rendering state? Trying to show a loading state for useAsyncData

I'm trying to render a loading state for while data is fetching. I'm having trouble hiding the loading state - it just stays.

3 Replies

KamshakOP•9mo ago

I'm nue to Vue / Nuxt but this here really has me puzzled, should this be possible? Template

<div class="bg-red-500" v-if="documentsInCategory.pending">
  {{ documentsInCategory.pending }}
</div>

<div class="bg-red-500" v-if="documentsInCategory.pending">
  {{ documentsInCategory.pending }}
</div>

Script:

const categoryData = useAsyncData(`[category-uid-${route.params.uid}]`, () =>
  prismic.client.getByUID("category", route.params.uid as string),
);
const page = categoryData.data;

useHead({
  title: page.value?.data.meta_title,
  meta: [
    {
      name: "description",
      content: page.value?.data.meta_description,
    },
  ],
});

const documentsInCategory = useAsyncData(
  `category-${route.params.uid}-documents`,
  async () => {
    if (!page.value?.id) {
      return null;
    }

    const articles = await prismic.client.get<ArticleDocument>({
      filters: [prismic.filter.at("my.article.category", page.value.id)],
    });

    return articles;
  },
  { watch: [categoryData] },
);

const categoryData = useAsyncData(`[category-uid-${route.params.uid}]`, () =>
  prismic.client.getByUID("category", route.params.uid as string),
);
const page = categoryData.data;

useHead({
  title: page.value?.data.meta_title,
  meta: [
    {
      name: "description",
      content: page.value?.data.meta_description,
    },
  ],
});

const documentsInCategory = useAsyncData(
  `category-${route.params.uid}-documents`,
  async () => {
    if (!page.value?.id) {
      return null;
    }

    const articles = await prismic.client.get<ArticleDocument>({
      filters: [prismic.filter.at("my.article.category", page.value.id)],
    });

    return articles;
  },
  { watch: [categoryData] },
);

Ok I must be doing something really obiously wrong because this reproduces with the most tiny component: https://stackblitz.com/edit/nuxt-starter-zdl7ze?file=pages%2Findex.vue,app.vue

Enzo F.•9mo ago

Hi, I made it work from your example in the url with this:

const data = useLazyAsyncData('test', async () => {
  return 'test';
}, {
  server: false
});

const data = useLazyAsyncData('test', async () => {
  return 'test';
}, {
  server: false
});

KamshakOP•9mo ago

Thanks, turns out I wan't using ".value" on epnding as well It's still not really working because there is both data and pending is true found a way 👍 just checking for both now

Gaming

Programming

Impossible rendering state? Trying to show a loading state for useAsyncData