Lijah Posts - Answer Overflow

Lijah

•Created by Lijah on 7/24/2024 in #❓・help

NuxtI18n - Access global i18n outside of components or even composables

I am trying to implement NuxtI18n after using VueI18n. In some composables, I can use useI18n() or useNuxtApp().$i18n. How can I achieve the same behavior as the code below in nuxtI18n?

// some utiltiy file that may be ran in a worker or outside

import i18n from "@/i18n";

...
  export const someFunction = () => {
      const formattedString = i18n.global.te(myStringToTranslate) ?  i18n.global.t(myStringToTranslate) : myStringToTranslate;
  }
...

// some utiltiy file that may be ran in a worker or outside

import i18n from "@/i18n";

...
  export const someFunction = () => {
      const formattedString = i18n.global.te(myStringToTranslate) ?  i18n.global.t(myStringToTranslate) : myStringToTranslate;
  }
...

I've tried things like this, but sometimes calling these composables throws errors

  export const someFunction = () => {
      const { t, te, } = useI18n();
      //or
      const { t, te, } = useNuxtApp().$i18n;
      const formattedString = te(myStringToTranslate) ?  t(myStringToTranslate) : myStringToTranslate;
  }

  export const someFunction = () => {
      const { t, te, } = useI18n();
      //or
      const { t, te, } = useNuxtApp().$i18n;
      const formattedString = te(myStringToTranslate) ?  t(myStringToTranslate) : myStringToTranslate;
  }

If I ran either in a composable, they usually work, but not always. Like when I run the composable in a worker

export function composable() {
    const { t, } = useI18n() // blows up
};

export function composable() {
    const { t, } = useI18n() // blows up
};

5 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

I have code porting from Vue 3 to Nuxt 3, in Vue 3 I called onUnmounted without fail. The same component, now in Nuxt 3, seems to not be calling onUnmounted nor is it calling onBeforeUnmount. onMounted is working as expected.

13 replies

NNuxt

•Created by Lijah on 4/1/2024 in #❓・help

Routing to another page leads to null parent node error

When converting a Vue app to Nuxt and after following directory and layout structures, routing leads to a null parent node error.

Nuxt - 3.11.1
Vue - Latest

Nuxt - 3.11.1
Vue - Latest

Using both template (NuxtLink) and programatic (router.push) routing, the app throws Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') All methods fill the URL with the proper routes and I can manually navigate to the pages but for some reason the router does not work. This seemed to be related to this huge GitHub issue https://github.com/nuxt/nuxt/issues/13309 But trying almost all the suggestions, none seem to have worked. I am following the patterns I use in a working Nuxt App I have used in another project. What is more bizzare is that when debugging, I can occasionally get the routing to work between simple pages after waiting for some time or saving small changes. However, when rebooting the server, the routing error happens again.

6 replies

Gaming

Programming