pinia nuxt 3 [Vue warn]: Hydration node mismatch when updating state in SSR

[fahdaddi]

[Vue warn]: Hydration node mismatch:

• Client vnode: div
• Server rendered DOM:
  at
  at <Default ref=Ref< undefined > >
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" >
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... >
  at
  at
  at

~/layouts/default.vue:

<template>
  <div class="wrap">
    <Common />
    <Header :show-cart-drop="route.name.indexOf('checkout-cart') == -1" />
    <main class="main" :class="{ mt: !isDesktop }">
      <Suspense>
        <template #default>
          <NuxtPage />
        </template>

        <template #fallback>
          <GeneralSkeleton />
        </template>
      </Suspense>
    </main>
    <!-- <Footer /> -->
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useMainStore } from "~/store";

import Common from "~/components/layouts/Common.vue";
import Header from "~/components/layouts/Header/index.vue";
import Footer from "~/components/layouts/Footer/index.vue";
import GeneralSkeleton from "~/components/modules/skeleton/GeneralSkeleton.vue";

const $store = useMainStore();
const { isDesktop } = useDevice();

const meta_title = computed(() => $store.meta_title);

useHead({
  title: meta_title.value,
});
</script>

~/components/layouts/Common.vue

<template>
<span
      href="#__app"
      class="totop"
      :class="{ hide: !fab }"
      @click.prevent="scrollToTopClicked()"
    >
      <c-svg name="chevron-up" class="md" />
    </span>

the part causing the mismatch warning because of the trustbox state is this template:

    <template v-if="trustbox && !$initiatedTrustBadge">
      <div
        class="trustbadge"
        :class="{ hide: !trustbadge }"
        @click="openTrustedshop()"
      >
        <div class="details">
          <Rating :rating="trustbox.score.value" />
          <div class="score">
            <b>{{ trustbox.score.formatted }}</b
            ><span>/5</span>
          </div>
        </div>

        <c-svg name="trustedshops" class="logo" />
      </div>
    </template>

    <CookieAlert v-if="showAlert" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useMainStore } from "~/store";

import Rating from "~/components/modules/store/product/Rating.vue";
import CookieAlert from "~/components/common/CookieAlert.vue";

const $store = useMainStore();
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const {$initiatedTrustBadge }= useNuxtApp();

const { oruga, notify, showIntentModal, openCookies } = useHelpers();

const fab = ref(false);
const trustbadge = ref(true);

const showAlert = computed(() => $store.showCookieAlert);

const trustbox = computed(() => $store.trustbox);
</script>

~/composables/useHeaders.js:

import { defu } from "defu";
import { useMainStore } from "~/store";

export function useHeaders(options = {}) {
  const {
    ssrContext,
    $pinia,
  } = useNuxtApp();

  const $store = useMainStore($pinia);

  const userAuthToken = $store.auth_token;
  const userCartToken = $store.c_token;

  const config = useRuntimeConfig();

  const headers = {};

  headers["X-Requested-With"] = "XMLHttpRequest";
  if (userAuthToken) headers["jwtAuthorization"] = `Bearer ${userAuthToken}`;
  if (userAuthToken) headers["C-Token"] = userCartToken;

  const defaults = {
    baseURL: config.public.API_URL,

    // set user token if connected
    headers: headers,

    onResponse({ request, response, options }) {
      const data = response._data;

      if (process.server && data) {
        if (data.init) {
          if (data.init.intent) {
            if (data.init.intent.exit) {
              $store.SET_LEAVING_MODAL(true);
            }
            if (data.init.intent.entry != null) {
              $store.SET_ENTER_MODAL(data.init.intent.entry.duration);
              $store.SET_ENTER_MODAL_CONTENT(data.init.intent.entry);
            }
          }

          $store.UPDATE_CART_COUNT(data.init.count ? data.init.count.cart : 0);
          $store.SET_ME(data.init.user);

the part where I update the trustbox state in SSR from the index.vue useAsyncData

          $store.SET_TRUSTBOX(data.init.trustbox);
          $store.SET_AUTH_EXPIRES(data.init.token.expires);
          $store.SET_MENU(data.init.nav);
          if (data.init.brands) $store.SET_BRANDS(data.init.brands);
          if (data.init.packs) $store.SET_PACKS([]);
        }

        console.log(
          "setting user",
          "server: " + process.server,
          "client: " + process.client
        );

        if (data.alternates) {
          $store.SET_ALTERNATES(data.alternates);
        }
      }

      console.log("store.me", $store.me);
    },

    onRequest({ request, options }) {
      let origin;

      if (process.client) {
        origin = window.location.origin;
      } else {
        origin =
          (config.http || "http://") + ssrContext?.event.node.req.headers.host;

        options.headers["X-SSR"] = true;
      }

      // Set the request headers
      options.headers["X-Requested-With"] = "XMLHttpRequest";
      options.headers["X-ORIGIN"] = origin;

      if (userAuthToken)
        options.headers["jwtAuthorization"] = `Bearer ${userAuthToken}`;
      if (userAuthToken) options.headers["C-Token"] = userCartToken;
    },
  };

  // for nice deep defaults, please use unjs/defu
  const params = defu(options, defaults);

  return params;
}

~/pages/index.vue

<template>....</template>

<script setup>
import { ref, computed } from "vue";
import { useMainStore } from "~/store/index.js";

import KeenSlider from "~/components/modules/KeenSlider.vue";
import KeenSlide from "~/components/modules/KeenSlide.vue";
import Usp from "~/components/common/Usp.vue";
import ProductThumbnail from "~/components/modules/store/product/Thumbnail.vue";
import TopBrands from "~/components/modules/TopBrands.vue";
import Partners from "~/components/common/Partners.vue";
import Trustbox from "~/components/common/Trustbox.vue";

definePageMeta({
  // name: "Home",
});

const $store = useMainStore();

const router = useRouter();
const localePath = useLocalePath();
const { cdn, pushUrl, serverError } = useHelpers();
const { isMobile, isDesktop } = useDevice();
const { t } = useI18n();

const { data } = await useAsyncData("home", async () => {
  return await $fetch("home", useHeaders())
    .then((d) => {
      $store.UPDATE_META_TITLE(d.meta_title);
      $store.SET_MENU(d.categories);
      $store.SET_BRANDS(d.brands);
      if (d.pack_categories) $store.SET_PACKS(d.pack_categories);

      const meta = [
        {
          hid: "description",
          name: "description",
          content: d.meta_description,
        },
        {
          hid: "og:title",
          property: "og:title",
          content: d.meta_title,
        },
        {
          hid: "og:description",
          property: "og:description",
          content: d.meta_description,
        },
        {
          hid: "twitter:title",
          name: "twitter:title",
          content: d.meta_title,
        },
      ];

      return {
        home: d,
        meta: meta,
      };
    })
    .catch((e) => serverError(e));
});

const home = ref(data.value.home);
</script>

[fahdaddi]

@tslocke

[martinapetrova]

I had the same issue and adding a hydrate function in my store solved this for me: https://pinia.vuejs.org/cookbook/composables.html#SSR

[kedniko]

Related nuxt/nuxt#15474 (comment)

AFAIK: If you change store values inside your page components, you cannot alter components "higher up" like the layout or app.vue with it because they are already rendered during SSR (top-down).

But because the client assumes that the new value is propagated everywhere, it will use it for all components. Thus the hydration error.