Nuxt•4mo ago

Change Pinia value before initial render

I'm using Pinia to store a boolean value that controls the visibility of a breadcrumbs component in the layout (false by default). Pages determine whether the breadcrumbs are displayed or not. In a page component in <script setup>, if I toggle the breadcrumbs to true, the breadcrumbs component isn't actually displayed until after the page is loaded on the client side, causing the content to abruptly shift down. Is it possible for this Pinia value change to happen during SSR so the breadcrumbs are visible at initial page load? Here's what I'm doing (page data is coming from a headless CMS):

/store/site.ts
--------------

export const useSiteStore = defineStore('site', () => {
  const breadcrumbs = ref(false)

  return {
    breadcrumbs
  }
}

/store/site.ts
--------------

export const useSiteStore = defineStore('site', () => {
  const breadcrumbs = ref(false)

  return {
    breadcrumbs
  }
}

/pages/[slug].vue
-----------------

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())

const page = await useFetch('<API endpoint>', { slug: useRoute().params.slug })

if (page.showBreadcrumbs) {
  breadcrumbs.value = true
}
</script>

/pages/[slug].vue
-----------------

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())

const page = await useFetch('<API endpoint>', { slug: useRoute().params.slug })

if (page.showBreadcrumbs) {
  breadcrumbs.value = true
}
</script>

app.vue
-------

<template>
  <Header />
  <Breadcrumbs v-if="breadcrumbs" />
  <NuxtPage />
  <Footer />
</template>

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())
</script>

app.vue
-------

<template>
  <Header />
  <Breadcrumbs v-if="breadcrumbs" />
  <NuxtPage />
  <Footer />
</template>

<script setup>
import { useSiteStore } from '~/store/site'

const { breadcrumbs } = storeToRefs(useSiteStore())
</script>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Change Pinia value before initial render