Nuxt I18n V8 in Nuxt 3 as plugin

Question

Can anybody help me with Nuxt/I18n.
Integration in Nuxt 3 App as plugin?

In docs there is an example where options are passed in defineNuxtConfig({..}) But how can I make separate plugin like this

import en_US from '@root/locales/en_US.json';

export default defineNuxtPlugin(({ vueApp }) => {
  const locale = 'en_US'; //temp code for example

  const i18n = Some kind a i18n function here({
    locale,
    fallbackLocale: locale,
    messages: {
      en_US,
    }
  })

  vueApp.use(i18n)
})

Thanks in advance.

Answer 1

here is my i18n.ts file content

import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import tr from '../locales/tr.json'
import { defineNuxtPlugin, useRuntimeConfig } from "#app";
import { useMainStore } from "~/stores";

export default defineNuxtPlugin(( nuxtApp ) => {
  const config = useRuntimeConfig();
  const ms = useMainStore();

  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: ms.miriLang, //config.locale.defaultLocale || 'tr',
    fallbackLocale: config.locale.fallbackLocale || 'en',
    messages: {
      tr,
      en
    }
  })

  nuxtApp.vueApp.use(i18n);
  // nuxtApp.provide("i18n", i18n);
  // nuxtApp.vueApp.provide("i18n", i18n);
})

you may define your translations in json files en.json file:

{
    "button.home": "Home",
    "button.admin": "Admin",
}

you can use this in template section with $t('button.home') and in composition api t('button.home') with imports:

import { useI18n } from "vue-i18n";

const {t} = useI18n();

if you want to to use i18n inside plugins folder you need to use it like this:

useI18n().t('shop.payment'),