i18n

Alixan UI ресми Nuxt i18n модулін қолданады. Жоба message keys типтелген күйде сақтайды, ал тілді ауыстыру мен persistence модуль арқылы орындалады.

Толық ақпарат үшін: Nuxt i18n құжаттамасы.

Орнату

Nuxt i18n модулін орнатып, оны тіркеңіз: nuxt.config.ts.

npx nuxt module add i18n

Конфигурация

Қолданыңыз strategy: 'prefix_except_default' сонда әдепкі тіл prefix-сіз қалады, ал басқа locales prefix алады.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './configs/i18n.config.ts',
    defaultLocale: 'en',
    strategy: 'prefix_except_default',
    detectBrowserLanguage: false,
    locales: [
      { code: 'en', name: 'English', file: 'en.json' },
      { code: 'ru', name: 'Русский', file: 'ru.json' },
      { code: 'kk', name: 'Қазақша', file: 'kk.json' },
    ],
  },
})

Сыртқы vueI18n config файлын көрсетіп, i18n warnings мәндерін өшіріңіз: i18n/configs/i18n.config.ts.

i18n/configs/i18n.config.ts

export default {
  // Disable warnings because some UI props intentionally pass plain strings through $t.
  missingWarn: false,
  fallbackWarn: false,
}

Translations

Аударма JSON файлдарын сақтаңыз: i18n/locales. file option әр locale мәнін өз аударма файлымен байланыстырады.

i18n/locales/en.json

{
  "app": {
    "settings": "Open settings"
  },
  "settings": {
    "language": "Language"
  },
  "component": {
    "button": "Button"
  }
}

i18n/locales/ru.json

{
  "app": {
    "settings": "Открыть настройки"
  },
  "settings": {
    "language": "Язык"
  },
  "component": {
    "button": "Кнопка"
  }
}

i18n/locales/kk.json

{
  "app": {
    "settings": "Баптауларды ашу"
  },
  "settings": {
    "language": "Тіл"
  },
  "component": {
    "button": "Батырма"
  }
}

Қолдану

Тіл

<script setup lang="ts">
type Locale = 'en' | 'ru' | 'kk'

const { locale, setLocale } = useI18n()

const languageOptions: Array<{ label: string; value: Locale }> = [
  { label: 'English', value: 'en' },
  { label: 'Русский', value: 'ru' },
  { label: 'Қазақша', value: 'kk' },
]

const changeLocale = async (value: Locale): Promise<void> => {
  useHead({
    htmlAttrs: { lang: value },
  })
  await setLocale(value)
}
</script>

<template>
  <div class="space-y-2">
    <p class="px-1 text-sm font-medium text-muted-foreground">
      {{ $t('settings.language') }}
    </p>
    <Select
      :model-value="locale"
      :options="languageOptions"
      @change="changeLocale($event.value as Locale)"
    />
  </div>
</template>

Локализацияланған сілтемелер

Ішкі Nuxt routes мәндерін Button, IconButton немесе NuxtLink ішіне бермес бұрын useLocalePath арқылы ораңыз. Осылай беттер арасында өткенде ағымдағы locale prefix сақталады.

Example.vue

<template>
  <Button :to="$localePath('/button')">
    Button
  </Button>
</template>

Page Meta

Page-level SEO translation keys мәндерін usePageMeta ішіне беріңіз. Composable оларды ішкі түрде useI18n().t арқылы шешеді.

pages/button.vue

<script setup lang="ts">
usePageMeta({
  title: 'seo.metaTitle',
  description: 'seo.metaDescription',
})
</script>