Kamshak
Kamshak
PostsComments
NNuxt
Created by Kamshak on 4/7/2024 in #❓・help
Impossible rendering state? Trying to show a loading state for useAsyncData
found a way 👍 just checking for both now
7 replies
NNuxt
Created by Kamshak on 4/7/2024 in #❓・help
Impossible rendering state? Trying to show a loading state for useAsyncData
It's still not really working because there is both data and pending is true
7 replies
NNuxt
Created by Kamshak on 4/7/2024 in #❓・help
Impossible rendering state? Trying to show a loading state for useAsyncData
Thanks, turns out I wan't using ".value" on epnding as well
7 replies
NNuxt
Created by jd_solanki on 4/7/2024 in #❓・help
Optimal way to handle OAuth2 callback without registering route
do you still get a flash of content with that?
5 replies
NNuxt
Created by jd_solanki on 4/7/2024 in #❓・help
Optimal way to handle OAuth2 callback without registering route
I guess you could just await your API call in your script block so it suspends
5 replies
NNuxt
Created by Kamshak on 4/7/2024 in #❓・help
Impossible rendering state? Trying to show a loading state for useAsyncData
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
7 replies
NNuxt
Created by Kamshak on 4/7/2024 in #❓・help
Impossible rendering state? Trying to show a loading state for useAsyncData
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] },
);
7 replies