Dynamically load i18n messages based on context

// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    // Module Options
    strategy: 'no_prefix',
    locales: [
      {
        code: 'en',
        file: 'i18n/locales/en.ts'
      }
    ],
    lazy: true,
    defaultLocale: 'eb',
    experimental: {
      localeDetector: './localeDetector.ts',
    },
  },
})

// i18n/locales/en.ts
export default defineI18nLocale(async (locale) => {
  const route = useRoute()
  const organization = route.params.organization as string
  return await $fetch(`/api/${organization}/i18n/${locale}`)
})

// app.vue
<script setup lang="ts">
const { locale, loadLocaleMessages } = useI18n()
const organization = useOrganization()

watch(organization, async () => {
  await loadLocaleMessages(locale)
}, {
  immediate: true,
})
</script>
<template>
  <div>
    <NuxtRouteAnnouncer />
    <!-- <VitePwaManifest /> -->
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

ssr:error Failed locale loading: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.