Internacionalização (i18n)

O Nitro UI oferece suporte a mais de 50 locales e internacionalização multidirecional (LTR/RTL).

Uso

O Nitro UI fornece um componente App que envolve seu app para fornecer configurações globais, incluindo a prop locale.

Locale

Use a prop locale com o locale que você quer usar de @nitro/ui/locale:

App.vue
<script setup lang="ts">
import { fr } from '@nitro/ui/locale'
</script>

<template>
  <NApp :locale="fr">
    <RouterView />
  </NApp>
</template>
Cada locale tem uma propriedade code (ex.: en, en-GB, fr) que determina o formato de data/hora em componentes como Calendar, InputDate e InputTime.

Locale personalizado

Você pode criar seu próprio locale usando o utilitário defineLocale:

App.vue
<script setup lang="ts">
import type { Messages } from '@nitro/ui'
import { defineLocale } from '@nitro/ui/composables'

const locale = defineLocale<Messages>({
  name: 'My custom locale',
  code: 'en',
  dir: 'ltr',
  messages: {
    // implement pairs
  }
})
</script>

<template>
  <NApp :locale="locale">
    <RouterView />
  </NApp>
</template>
Observe o parâmetro code; nele você precisa passar o código ISO do idioma. Exemplo:
  • hi Hindi (language)
  • de-AT: German (language) as used in Austria (region)

Estender o locale

Você pode personalizar um locale existente sobrescrevendo suas messages ou seu code usando o utilitário extendLocale:

App.vue
<script setup lang="ts">
import { en } from '@nitro/ui/locale'
import { extendLocale } from '@nitro/ui/composables'

const locale = extendLocale(en, {
  code: 'en-AU',
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

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

Locale dinâmico

Para alternar dinamicamente entre idiomas, você pode usar o plugin Vue I18n.

Instale o pacote Vue I18n

pnpm add vue-i18n@11

Use o plugin Vue I18n no seu main.ts

src/main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import ui from '@nitro/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

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

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

app.mount('#app')

Defina a prop locale usando useI18n

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

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

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

Direção dinâmica

Cada locale tem uma propriedade dir que será usada pelo componente App para definir a direcionalidade de todos os componentes.

Em uma aplicação multilíngue, você pode querer definir os atributos lang e dir no elemento <html> dinamicamente com base no locale do usuário, o que você pode fazer com o composable useHead:

App.vue
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
import * as locales from '@nitro/ui/locale'

const { locale } = useI18n()

const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir
  }
})
</script>

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

Idiomas suportados

By default, the en locale is used.

🇧🇷
Português (Brasil)
Code: pt-BR
You can use the nitro-ui CLI to create a new locale: 
nitro-ui make locale --code "en" --name "English"

Color Mode

O Nitro UI se integra ao VueUse para permitir a troca fácil entre os temas claro e escuro.

SSR

O Nitro UI tem suporte nativo ao SSR do Vue. Este guia vai ajudar você a habilitá-lo por completo.