Breadcrumbs with async data (SSR)

Hi all, I'm currently facing a pretty straight forward problem, that I'm trying to solve for 2 days now.

I have a PageHeader component that displays a breadcrumb. The PageHeader is using a pinia store to fetch the breadcrumb config and render it. In every page I populate the breadrcrumb store with the data that should be displayed (I'm fetching async data with pinia colada):

pages/companies/[id].vue

<script setup lang="ts">
    const route = useRoute();

    const { getCompany } = useCompanies();
    const { state } = getCompany(route.params.id as string);

    const { setBreadcrumbs } = useBreadcrumbStore();
    setBreadcrumbs([
        { label: 'Companies', to: '/companies' },
        { label: state.data.name || 'Company Details' },
    ]);
</script>

<script setup lang="ts">
    const route = useRoute();

    const { getCompany } = useCompanies();
    const { state } = getCompany(route.params.id as string);

    const { setBreadcrumbs } = useBreadcrumbStore();
    setBreadcrumbs([
        { label: 'Companies', to: '/companies' },
        { label: state.data.name || 'Company Details' },
    ]);
</script>

When loading a page I'm getting hydration mismatch errors and the breadcrumb is initially empty and shows up only after a few milliseconds. So it flickers on page load. Also the async data in the breadcrumb is never shown as it is always undefined. On the page it shows without problems however.

I found a few posts and issues now, dealing with the same kind of problems (e.g. https://github.com/nuxt/nuxt/discussions/19424) but it does not seem that there is a good solution to this problem. I also tried to solve it by using

definePageMeta

definePageMeta

but it can't handle async data at all.

So any ssr friendly way to implement breadcrumbs with dynamic data?

GitHub

SSR Question: How to pass data (e.g. breadcrumbs) from pages to com...

Hello all, I've been dealing with a problem I just have for hours and have searched half the internet :) I would like to render a blog article on a page and put the breadcrumbs dynamically into...

Breadcrumbs with async data (SSR)

<script setup lang="ts">
    const route = useRoute();

    const { getCompany } = useCompanies();
    const { state } = getCompany(route.params.id as string);

    const { setBreadcrumbs } = useBreadcrumbStore();
    setBreadcrumbs([
        { label: 'Companies', to: '/companies' },
        { label: state.data.name || 'Company Details' },
    ]);
</script>

<script setup lang="ts">
    const route = useRoute();

    const { getCompany } = useCompanies();
    const { state } = getCompany(route.params.id as string);

    const { setBreadcrumbs } = useBreadcrumbStore();
    setBreadcrumbs([
        { label: 'Companies', to: '/companies' },
        { label: state.data.name || 'Company Details' },
    ]);
</script>

definePageMeta

definePageMeta

but it can't handle async data at all.

So any ssr friendly way to implement breadcrumbs with dynamic data?

GitHub

SSR Question: How to pass data (e.g. breadcrumbs) from pages to com...

Hello all, I've been dealing with a problem I just have for hours and have searched half the internet :) I would like to render a blog article on a page and put the breadcrumbs dynamically into...

Breadcrumbs with async data (SSR)

Breadcrumbs with async data (SSR)

Similar Threads

Similar Threads

Similar Threads