ui/docs/content/1.getting-started/7.i18n/2.vue.md

navigation.title, title, description, select

navigation.title	title	description	select
Vue	Internationalization (i18n) in a Vue app	Learn how to internationalize your Vue app and support multi-directional support (LTR/RTL).	items label icon to Nuxt i-logos-nuxt-icon /getting-started/i18n/nuxt label icon to Vue i-logos-vue /getting-started/i18n/vue

::note{to="/components/app"} Nuxt UI provides an App component that wraps your app to provide global configurations. ::

Locale

Use the locale prop with the locale you want to use from @nuxt/ui/locale:

<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

<template>
  <UApp :locale="fr">
    <RouterView />
  </UApp>
</template>

Custom locale

You also have the option to add your locale using defineLocale:

<script setup lang="ts">
import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale'

const locale = defineLocale('My custom locale', {
  // implement pairs
})
</script>

<template>
  <UApp :locale="locale">
    <RouterView />
  </UApp>
</template>

Dynamic locale

To dynamically switch between languages, you can use the Vue I18n plugin.

::steps{level="4"}

Install the Vue I18n package

::code-group{sync="pm"}

pnpm add vue-i18n@10

yarn add vue-i18n@10

npm install vue-i18n@10

bun add vue-i18n@10

::

Use the Vue I18n plugin in your main.ts

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages: {
    en: {
      // ...
    },
    de: {
      // ...
    }
  }
})

const app = createApp(App)

app.use(i18n)
app.use(ui)

app.mount('#app')

Set the locale prop using useI18n

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'

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

<template>
  <UApp :locale="locales[locale]">
    <RouterView />
  </UApp>
</template>

::

Supported languages

:supported-languages

Direction

Use the dir prop with ltr or rtl to set the global reading direction of your app:

<template>
  <UApp dir="rtl">
    <NuxtPage />
  </UApp>
</template>

Dynamic direction

To dynamically change the global reading direction of your app, you can use VueUse's useTextDirection composable to detect and switch between LTR and RTL text directions.

::steps{level="4"}

Install the @vueuse/core package

::code-group{sync="pm"}

pnpm add @vueuse/core

yarn add @vueuse/core

npm install @vueuse/core

bun add @vueuse/core

::

Set the dir prop using useTextDirection

<script setup lang="ts">
import { computed } from 'vue'
import { useTextDirection } from '@vueuse/core'

const textDirection = useTextDirection()
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>

<template>
  <UApp :dir="dir">
    <RouterView />
  </UApp>
</template>