N
Nuxt•3w ago
Lewis

i18n doesnt fully refresh the page

i18n stores a cookie of the locale, so when fetching the root page it redirects, instead of fully refetching the page, it tries to do the redirect from the client and fails
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @Lewis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, it appears that the issue you're describing is related to how Nuxt handles redirects and state persistence during server-side rendering (SSR) and client-side navigation. Let me explain the problem and provide some insights: 1. Cookie persistence: The i18n module in Nuxt indeed stores the selected locale in a cookie, as mentioned in the configuration examples from the Stack Overflow posts. 2. Server-side redirect: When fetching the root page, if a locale is detected from the cookie, the server may attempt to redirect to the appropriate localized route. 3. Client-side navigation: The problem you're experiencing seems to occur because the redirect is being handled on the client-side instead of a full page refresh. This behavior is actually expected in Nuxt, as explained in the Nuxt Lifecycle documentation: "Any redirection on the server will result in a Location: header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie." To address this issue, you have a few options: 1. Force a full page refresh: You can use the refreshNuxtData() utility to force a refetch of all data. Here's an example from the Nuxt documentation on refreshNuxtData: 
const refreshing = ref(false)
const refreshAll = async () => {
  refreshing.value = true
  try {
    await refreshNuxtData()
  } finally {
    refreshing.value = false
  }
}
const refreshing = ref(false)
const refreshAll = async () => {
  refreshing.value = true
  try {
    await refreshNuxtData()
  } finally {
    refreshing.value = false
  }
}
2. Update cookie and redirect manually: Instead of relying on automatic redirects, you can update the locale cookie and then use navigateTo() to force a full page navigation. This approach was suggested in a Stack Overflow answer: 
const route = useRoute();
const langCookie = useCookie('language');

watch(
  () => route.query.hl,
  (newLang) => {
    langCookie.value = newLang;
    navigateTo(route.path);
  },
  { immediate: true }
);
const route = useRoute();
const langCookie = useCookie('language');

watch(
  () => route.query.hl,
  (newLang) => {
    langCookie.value = newLang;
    navigateTo(route.path);
  },
  { immediate: true }
);
3. Server-side redirect: Ensure that locale changes are handled server-side when possible. You can use Nuxt middleware or server routes to handle locale changes and perform proper redirects. Remember that when working with i18n and routing in Nuxt, it's important to handle both server-side and client-side scenarios to ensure consistent behavior across different navigation methods. If you need more specific guidance, please provide details about your Nuxt and i18n configuration, as well as the exact steps to reproduce the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@304249277096525824> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?