nuxt-modules/i18n

Switching locale doesn't trigger `useAsyncData` on Homepage

Open

#3,599 opened on May 14, 2025

View on GitHub
 (15 comments) (2 reactions) (0 assignees)TypeScript (532 forks)github user discovery
help wantedneed discussion

Repository metrics

Stars
 (2,074 stars)
PR merge metrics
 (Avg merge 6d 10h) (74 merged PRs in 30d)

Description

Environment

  • Operating System: Darwin
  • Node Version: v20.18.0
  • Nuxt Version: 3.17.1
  • CLI Version: 3.25.1
  • Nitro Version: 2.11.12
  • Package Manager: pnpm@9.12.2
  • Builder: -
  • User Config: modules, $development, devtools, app, css, runtimeConfig, routeRules, future, compatibilityDate, vite, postcss, eslint, i18n, image, prismic, scripts
  • Runtime Modules: @nuxt/eslint@1.3.1, @nuxtjs/prismic@4.1.0, @nuxt/fonts@0.11.2, @nuxtjs/i18n@9.5.4, @nuxt/image@1.10.0, @vueuse/nuxt@13.1.0, @hebilicious/vue-query-nuxt@0.3.0, @nuxt/scripts@0.11.6
  • Build Modules: -

Reproduction

https://github.com/capitalenumerique/interfaceqc

Describe the bug

On my homepage, I have some static and dynamic text. When I change locale, the static text is updated, but not the dynamic text. Seems like my useAsyncData is not triggered on locale change. This ONLY happens on my homepage

On the Home page: Image Not working ⛔

The website: https://interfaceqc.com/en The repo: https://github.com/capitalenumerique/interfaceqc/blob/main/app/pages/index.vue The query:

const { data: page } = await useAsyncData('home', () => {
    return prismic.client.getSingle('home', {
        graphQuery: `{ ...truncated... }`,
        lang: `${locale.value}-ca`,
    });
});

Additional context

On the FAQ page (or any other page): Image Working ✅

Logs

Contributor guide

Research direction
Investigate why useAsyncData does not re fetch on locale change only on the homepage, possibly due to caching or key collision with i18n's locale switching. Check if the async data key 'home' conflicts with i18n's caching mechanism and ensure the query is properly re executed on route change for the homepage.
Tech stack
typescriptvuenodejs
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
NuxtVueTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60