i18n

i18n features for your Nuxt project so you can easily add internationalization.

Installation

npm i @nuxtjs/i18n --save-dev

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@nuxtjs/i18n']

Demo

i18n.config.ts

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

Heading.vue

<script setup>
  const { locale } = useI18n()
</script>

<template>
  <select v-model="locale">
    <option value="en">
      English
    </option>
    <option value="fr">
      French
    </option>
  </select>

  <p class="text-white">
    {{ $t('welcome') }}
  </p>
</template>

Welcome