locale.Use a prop locale com o locale que você quer usar de @nitro/ui/locale:
<script setup lang="ts">
import { fr } from '@nitro/ui/locale'
</script>
<template>
<NApp :locale="fr">
<NuxtPage />
</NApp>
</template>
code (ex.: en, en-GB, fr) que determina o formato de data/hora em componentes como Calendar, InputDate e InputTime.Você pode criar seu próprio locale usando o utilitário defineLocale:
<script setup lang="ts">
import type { Messages } from '@nitro/ui'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<NApp :locale="locale">
<NuxtPage />
</NApp>
</template>
code; nele você precisa passar o código ISO do idioma. Exemplo:hi Hindi (language)de-AT: German (language) as used in Austria (region)Você pode personalizar um locale existente sobrescrevendo suas messages ou seu code usando o utilitário extendLocale:
<script setup lang="ts">
import { en } from '@nitro/ui/locale'
const locale = extendLocale(en, {
code: 'en-AU',
messages: {
commandPalette: {
placeholder: 'Search a component...'
}
}
})
</script>
<template>
<NApp :locale="locale">
<NuxtPage />
</NApp>
</template>
Para alternar dinamicamente entre idiomas, você pode usar o módulo Nuxt I18n.
pnpm add @nuxtjs/i18n
yarn add @nuxtjs/i18n
npm install @nuxtjs/i18n
bun add @nuxtjs/i18n
nuxt.config.tsexport default defineNuxtConfig({
modules: [
'@nitro/ui',
'@nuxtjs/i18n'
],
css: ['~/assets/css/main.css'],
i18n: {
locales: [{
code: 'de',
name: 'Deutsch'
}, {
code: 'en',
name: 'English'
}, {
code: 'fr',
name: 'Français'
}]
}
})
locale usando useI18n<script setup lang="ts">
import * as locales from '@nitro/ui/locale'
const { locale } = useI18n()
</script>
<template>
<NApp :locale="locales[locale]">
<NuxtPage />
</NApp>
</template>
Quando o @nuxtjs/i18n está instalado, o componente Link localiza automaticamente os links internos usando o helper $localePath. Isso significa que você não precisa envolver manualmente seus links com localePath() ou localeRoute().
<template>
<!-- Automatically becomes /en/about or /fr/about based on current locale -->
<NLink to="/about">About</NLink>
<NButton to="/contact">Contact</NButton>
</template>
localePath() ou localeRoute() manualmente se necessário.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:
<script setup lang="ts">
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]">
<NuxtPage />
</NApp>
</template>
By default, the en locale is used.
pt-BRnitro-ui CLI to create a new locale: nitro-ui make locale --code "en" --name "English"