useNuxtApp inside an action throws error

[liqueflies]

Hello!

I am trying to run useNuxtApp() inside pinia but it doesn't work.

nuxt.mjs:98 Uncaught (in promise) Error: nuxt instance unavailable

I need to access to it cause from my server req I have the country code of the user.

Full reproduction:

const countryKey = 'ip-address-geolocation'

export default defineNuxtPlugin((nuxtApp) => {
  const countryCode = ref(null)

  if (process.server) {
    const countryFromHeaders =
      nuxtApp?.ssrContext?.req?.headers?.[countryKey] ?? 'ZZ'

    // update value to provide
    countryCode.value = countryFromHeaders

    nuxtApp.hook('app:rendered', () => {
      nuxtApp.payload[countryKey] = countryFromHeaders
    })
  }

  if (process.client) {
    countryCode.value = nuxtApp.payload[countryKey]
  }

  nuxtApp.provide('countryCode', countryCode)
})

async cartCreate() {
   // Wnat to grab my country code here!
   const app = useNuxtApp()
   ... /* unreachable code */
}

Thank you!

[posva]

This is normal, it's the same as calling useNuxtApp() inside a component method rather that at the setup() level. You need to put it in a plugin instead:

pinia.use(() => ({ $app: markRaw(useNuxtApp()) }))

You have access to the nuxt context as this.$nuxt but I can't remember if it contains the nuxt app and all the differences between Nuxt 2, bridge, and 3

[liqueflies]

While answering I've found this.$nuxt property.
So, the problem should be solved now, if I can ask - is this choice a "design" choice or for a nuxt limit?

It's a little bit strange to me :)
I expect to use my composables function also, is this not possible too?

Don't want to be boring just talking :)

Thank you 💚

[posva]

This is by design in Vue because ofhow inject/provide works!

[liqueflies]

Usually when I am providing something with Vue I create a composable like that:

// MyStuffProvider.vue
<script setup>
const state = reactive({
  stateA: '',
  stateB: '',
})

provide('MyStuff', toRefs(readonly(state)))
</script>

// the composable
export default function useMyStuff() {
  const context = inject('MyStuff')
  export default context
}

// random component inside provider
<script setup>
const { stateA, stateB } = useMyStuff() 
</script>

Is this so bad?