Access global property of i18n instance

[David]

Hi,

is it possible to access the global property of the i18n instance for usage outside of components?
I couldn't find a way, so my current workaround is to use vue-i18n without the nuxt module and create my own plugin which exports i18n instance:

export const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
        en,
    },
})

export default defineNuxtPlugin((nuxt) => {
    const { vueApp } = nuxt
    vueApp.use(i18n)
})

Best regards
David

[Muhammad Mahmoud]

UPDATE: This works in dev and production

<script setup>
  definePageMeta({
    middleware: () => {
      const { vueApp } = useNuxtApp();
      const i18n = vueApp.config.globalProperties.$i18n
    },
  });
</script>

Original Answer

+1. This works in dev but breaks in production

<script setup>
  definePageMeta({
    middleware: () => {
      const { vueApp } = useNuxtApp();
      const i18n = vueApp.__VUE_I18N__.global;
    },
  });
</script>

[senher]

in the <script setup lang="ts"></script> can use
const {vueApp} = useNuxtApp(); const i18n = vueApp.i18n;

[Bruno Henry]

How to access this outside a .vue file?

i need to setup the vuelidate i18n messages and need to receive a i18n instance to pass to vuelidate.

example:

// @/assets/utils/i18n-validators.js


import * as validators from '@vuelidate/validators'
const { createI18nMessage } = validators


// here, i need to grab i18n instance


const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) })
export const required = withI18nMessage(validators.required)
export const email = withI18nMessage(validators.email)
export const minLength = withI18nMessage(validators.minLength, { withArguments: true })
export default {}

i make this only for test and works, but its an another instance and not change the locale when the main instance changes:

// @/assets/utils/i18n-validators.js


import * as validators from '@vuelidate/validators'
import en from '@/locales/en.json'
import pt from '@/locales/pt.json'
const { createI18nMessage } = validators
import { createI18n } from "vue-i18n"
const i18n = createI18n({ legacy: false, locale: 'pt', messages: { en, pt } })
const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) })
export const required = withI18nMessage(validators.required)
export const email = withI18nMessage(validators.email)
export const minLength = withI18nMessage(validators.minLength, { withArguments: true })
export default {}

[Muhammad Mahmoud]

@brunokunace import the nuxt app in your .js then you're good to go.

This is the modified version of my answer above. You could use import { useNuxtApp } from '#app only and take a different approach if you want.

// @/assets/utils/i18n-validators.js
import { useNuxtApp } from '#app';

const { vueApp } = useNuxtApp();
const i18n = vueApp.config.globalProperties.$i18n

[Bruno Henry]

hi @MuhammadM1998 , thanks for try help, but i receive another error when i use your solution, maybe because i use ssr, idk...

import * as validators from '@vuelidate/validators'
const { createI18nMessage } = validators
import { useNuxtApp } from '#app'
const { vueApp } = useNuxtApp()

const i18n = vueApp.config.globalProperties.$i18n
const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) })

export const required = withI18nMessage(validators.required)
export const email = withI18nMessage(validators.email)
export const minLength = withI18nMessage(validators.minLength, { withArguments: true })

export default {}

Error:

500
nuxt instance unavailable

at Module.useNuxtApp (./node_modules/nuxt/dist/app/nuxt.mjs:142:13)
at ./assets/utils/i18n-validators.js:6:42

[Muhammad Mahmoud]

@brunokunace I think the problem is due to SSR too but unfortunately I dont know how to help