Nuxt•4mo ago

Hot-reload resets component state (What is best practice?)

Hi, What is some best practice ways to handle state in a hybrid Nuxt3 app? The issue When i navigate to the test page I get the profile, but whenever I change something and save(hot-reloading), the profile ends up undefined. I can use null-safe access and conditions to not get errors. But I would still need manually reload the page to work with the date. Is this the intended way? Solution? Run fetch onMounted? Global state with useState/Pinia? Re-populate the date using the Nuxt server cache? Code I have a text.vue page like this

<template>
  <h4>Server profile:</h4>
  <pre>{{ profile ?? 'ingen data' }}</pre>

  <h4>Client auth user:</h4>
  <pre>{{ clientUser ?? 'ingen data' }}</pre>

  <p v-if="pending">Loading…</p>
  <p v-if="error">Fejl: {{ error }}</p>
  <!-- <p>hej</p> -->
</template>

<script setup lang="ts">
const clientUser = useSupabaseUser()

const { data: profile, pending, error } = await useFetch('/api/me', {
  headers: useRequestHeaders(['cookie']),
})
</script>

<template>
  <h4>Server profile:</h4>
  <pre>{{ profile ?? 'ingen data' }}</pre>

  <h4>Client auth user:</h4>
  <pre>{{ clientUser ?? 'ingen data' }}</pre>

  <p v-if="pending">Loading…</p>
  <p v-if="error">Fejl: {{ error }}</p>
  <!-- <p>hej</p> -->
</template>

<script setup lang="ts">
const clientUser = useSupabaseUser()

const { data: profile, pending, error } = await useFetch('/api/me', {
  headers: useRequestHeaders(['cookie']),
})
</script>

and a server/api/me/index.get.ts

import { serverSupabaseUser } from '#supabase/server'

export default defineEventHandler(async (event) => {
  const user = await serverSupabaseUser(event)
  if (!user) {
    throw createError({ statusCode: 401, statusMessage: 'Not authenticated' })
  }

  const profile = await prisma.profile.findUnique({
    where: { userId: user.id },
    include: {
      occupancies: true,
      userRoles: { select: { role: true } },
    },
  })

  if (!profile) {
    throw createError({ statusCode: 404, statusMessage: 'Profile not found' })
  }

  return profile
})

import { serverSupabaseUser } from '#supabase/server'

export default defineEventHandler(async (event) => {
  const user = await serverSupabaseUser(event)
  if (!user) {
    throw createError({ statusCode: 401, statusMessage: 'Not authenticated' })
  }

  const profile = await prisma.profile.findUnique({
    where: { userId: user.id },
    include: {
      occupancies: true,
      userRoles: { select: { role: true } },
    },
  })

  if (!profile) {
    throw createError({ statusCode: 404, statusMessage: 'Profile not found' })
  }

  return profile
})

Thanks

3 Replies

kapa.ai•4mo ago

Hi @gentlemanfinn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hot-reload (HMR) in Nuxt 3 resets component state by design, as it reloads the module and re-initializes your component. This means any local state or data fetched with composables like useFetch will be lost and need to be re-fetched or re-initialized. This is expected behavior and not unique to your setup. Best Practices for Handling State in Nuxt 3 with HMR: 1. Global State with useState or Pinia:
If you want to persist state across hot-reloads (and between components/pages), use Nuxt’s useState composable or a global store like Pinia. State managed this way is more resilient to HMR resets, especially if you leverage Nuxt’s experimental state restoration features or persist state to cookies/localStorage as needed. See the Nuxt docs on state management for examples. 2. Re-fetch Data on Component Mount:
For data that must always be up-to-date (like a user profile), it’s common to re-fetch it in a lifecycle hook such as onMounted. This ensures that after HMR, your component will fetch the latest data again. However, this can cause a brief loading state after every HMR. 3. Persist State Between Reloads:
If you want to persist state even after a full reload (not just HMR), consider using useCookie or localStorage, but be mindful of hydration mismatches. The recommended approach is to use useCookie for SSR-friendly persistence, as shown in this Stack Overflow answer. 4. Nuxt’s reloadNuxtApp Utility:
If you want to force a full reload and optionally persist state, you can use reloadNuxtApp. By default, it saves the current state accessible via useState, and you can enable experimental state restoration for more advanced use cases. See the reloadNuxtApp documentation for details. Summary for Your Case: - It is expected that useFetch data is lost on HMR. - For critical data (like user profiles), use global state (useState/Pinia) and/or re-fetch on mount. - For persistence across reloads, use useCookie or enable state restoration. - There is no built-in way to keep local component state through HMR without using global state or persistence. References:
- Nuxt State Management Best Practices - Persist State Between Reloads in Nuxt v3 (Stack Overflow) - reloadNuxtApp Utility If you need to avoid manual reloads, move your profile fetching logic into a global store or useState, and re-fetch as needed on mount or after HMR. This is the standard approach in Nuxt 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1085501642662740031> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

gentlemanfinnOP•4mo ago

I'll be using Pinia. If anyone sees this and want to chime in with your preferred approach, please do.

Gaming

Programming

Hot-reload resets component state (What is best practice?)

Did you find this page helpful?