How I Configure Multilingual Support in Nuxt3

Let's first list the package versions used in the project, as different versions may have different configurations

  "nuxt": "^3.16.0",
  "@nuxt/content": "^2.13.4",
  "@nuxtjs/i18n": "9.5.4",

How should i18n be configured?

We can configure i18n in the nuxt.config.ts file. Remember to import the @nuxtjs/i18n package name in the modules configuration

  i18n: {
      vueI18n: './i18n.config.js', // custom path example
      defaultLocale: 'en',
      locales: ['zh', 'en'],
      // Enable browser language detection
      detectBrowserLanguage: {
        useCookie: true,      // Use Cookie to store user selection (avoid repeated detection)
        cookieKey: 'i18n_redirected', // Cookie name
        redirectOn: 'root',   // Only redirect on root path (like `/`)
        alwaysRedirect: false, // Whether to detect on every visit (default false)
        fallbackLocale: 'en'  // Fallback to default language if browser language doesn't match
      },
      strategy: 'prefix_except_default', // No prefix for default language
    },

One thing to note here is the path of the vueI18n configuration file, which by default needs to be in the i18n folder in the root directory. You need to create it manually for our multilingual support to take effect. prefix_except_default is set so that the default language doesn't need a prefix. You can click strategy to learn more information.

  i18n
   --i18n.config.js

What does i18n.config.js configure?

Here's an example with Chinese and English:

import zh from '../locales/zh.js'
import en from '../locales/en.js'

const messages = {
  zh: zh,
  en: en,
}
export default defineI18nConfig(() => {
  return {
    legacy: false,
    locale: 'en',
    messages
  }
})

As we can see, we imported two files. There is a locales directory in the root directory with configuration files for two languages, formatted roughly like this:

en.js

export default {
  home: {
    title: 'Home',
    meta: {
      description: 'Welcome to Yiming Yang\'s website. Here you can find articles, tips, learning resources and more information about Web Development, Artificial Intelligence, JavaScript, TypeScript, Node.js, Vue and Nuxt.',
    },
  }
}

zh.js

export default {
  home: {
    title: '首页',
    meta: {
      description: '欢迎来到我的杨义明网站。在这里你可以获取有关Web开发、人工智能、JavaScript、TypeScript、Node.js、Vue以及Nuxt的相关文章、技巧、学习资源等更多信息。',
    }
    }
}

How to use multilingual in Vue template files

First method using t:

const { t } = useI18n()
useHead({
  title: `${t('home.title')} - ${t('seoData.title')}`,
  meta: [
    {
      name: 'description',
      content: t('home.meta.description'),
    },
  ],
})

Second method using $t:

   <h1 class="text-xl sm:text-4xl pb-2 font-bold">
      {{ $t('aboutPage.title') }}
    </h1>

How to convert link addresses to multilingual

const localePath = useLocalePath()

<NuxtLink :to="localePath('/')" :class="{ underline: $route.path === localePath('/') }">
      {{ $t('navbarData.homeTitle') }}
</NuxtLink>

As we can see, we use localePath to get the multilingual path.

How to implement language switching on the page

The idea is to have a button on the page that switches when clicked:

function toggleLanguage() {
  const targetLocale = locale.value === 'en' ? 'zh' : 'en'
  const currentPath = route.fullPath
  const targetPath = currentPath.replace(`/${locale.value}`, '') || '/'
  locale.value = targetLocale
  router.push(localePath(targetPath))
}

// We call the toggleLanguage method
 <button
      @click="toggleLanguage"
    >
      <Icon :name="locale === 'en' ? 'twemoji:flag-china' : 'twemoji:flag-united-states'" size="20" />
    </button>

The key is that we use locale.value for language switching and use localePath to get the multilingual path.

How to configure multilingual support in @nuxt/content

Here's the multilingual configuration for the content directory:

content
  --blogs
    ....
  --zh
    --blogs
      ....

When we want to get the correct content content, we need to pay attention to our multilingual path, for example:

const { data } = await useAsyncData('home', () => {
  let path = `/blogs`
  if(locale.value !== defaultLocale){
    path = `${locale.value}/blogs`
  }
  return queryContent(path).sort({ _id: -1 }).find()
})

Summary

That's how I configure multilingual support in nuxt3. I hope this helps you avoid some detours.

Table Of Content