problem with useFetch and nuxt i18n modules

Question

i am working on nuxt 3 project, i have problem with useFetch and nuxt i18n modules, in my default.vue layout i have footer, navbar components, there are also data fetched from backend when site is loaded, however page content changed when locale is changed, but navbar, footer data locales is not changing, anyone used nuxt i18n with useFetch?

there are navbar and footer components included in default.vue, when locale is changed page content is changed according to selected locale, but navbar categories and footer data is not fetched according to selected locale, any nuxt 3 expert here?

Answer 1

You can watch the locale variable and explicitly refresh any data you need.

const { t, locale } = useI18n();

const data = useFetch("/api/data");

watch(locale, () => {
  data.refresh();
});

Answer 2

same issue in nuxt 3 here.

my nav.vue does not hot reload in header and footer component, while successfully hot reload in page.

// nav.vue
const banana = [
  {
    id: "1",
    title: t("NAV.HOME"),
    path: "/",
  },
  {
    id: "2",
    title: t("NAV.SERVICE"),
    path: "/service",
  },
  {
    id: "3",
    title: t("NAV.VACCINE"),
    path: "/vaccine",
  },
  {
    id: "4",
    title: t("NAV.ARTICLE"),
    path: "/article",
   },
   {
     id: "5",
     title: t("NAV.ABOUT"),
     path: "/about",
   },
   {
     id: "6",
     title: t("NAV.CONTACT"),
     path: "/contact",
   },
];
    
<ul>
  <li v-for="item in banana" :key="item.id">
    <NuxtLink
      :to="localePath(`${t(item.path)}`)">{{ item.title }}</NuxtLink>
  </li>
</ul>


// en.js
export default {
  NAV: {
    HOME: "home",
    SERVICE: "service",
    VACCINE: "vaccine",
    ARTICLE: "article",
    ABOUT: "about",
    CONTACT: "contact",
  }
};