VueCraft NPM

Установка ​

Требования ​

Peer-зависимостьВерсияОбязательна
vue^3.3.0да
vue-i18n^11.0.0да
vite>=5.0.0только для Vite-плагина

Ни vue, ни vue-i18n не входят в бандл — их нужно установить в проекте-потребителе.

Установка ​

bash
npm install vue-i18n-kit vue vue-i18n

Быстрый старт ​

1. Создайте файлы локалей ​

src/
└── locales/
    ├── en.json
    └── ru.json
json
// locales/en.json
{
  "buttons": {
    "submit": "Submit",
    "cancel": "Cancel"
  },
  "greeting": "Hello, {name}!",
  "items": "{count, plural, one {# item} other {# items}}"
}
json
// locales/ru.json
{
  "buttons": {
    "submit": "Отправить",
    "cancel": "Отмена"
  },
  "greeting": "Привет, {name}!",
  "items": "{count, plural, one {# товар} few {# товара} many {# товаров} other {# товаров}}"
}

Подсказка: запустите vue-i18n-kit init, чтобы автоматически создать шаг 1 (файлы локалей, конфиг, Vite-плагин). Мастер определяет ваш входной файл и выводит готовый к вставке сниппет для шага 2 ниже.

2. Зарегистрируйте плагин ​

Этот шаг всегда выполняется вручную — vue-i18n-kit init никогда не изменяет main.ts, он лишь выводит сниппет, чтобы вы вставили его сами.

ts
// main.ts
import { createApp } from 'vue'
import { createVueI18nPlugin } from 'vue-i18n-kit'
import App from './App.vue'

const app = createApp(App)

app.use(
  createVueI18nPlugin({
    defaultLocale: 'en',
    fallbackLocale: 'en',
    locales: {
      en: {
        messages: () => import('./locales/en.json'),
        meta: { display: 'English', flag: '🇬🇧' },
      },
      ru: {
        messages: () => import('./locales/ru.json'),
        meta: { display: 'Русский', flag: '🇷🇺' },
      },
    },
    persistLocale: true,
  }),
)

app.mount('#app')

3. Используйте composables в компонентах ​

vue
<script setup lang="ts">
import { useT, useLocale, useAvailableLocales } from 'vue-i18n-kit'

const { t, tm } = useT()
const { locale, setLocale, isLoading, localeMeta } = useLocale()
const { availableLocales } = useAvailableLocales()
</script>

<template>
  <div>
    <p>{{ t('greeting', { name: 'Alice' }) }}</p>
    <p>{{ tm('items', { count: 5 }) }}</p>

    <select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)">
      <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
        {{ loc.meta?.flag }} {{ loc.meta?.display ?? loc.code }}
      </option>
    </select>

    <span v-if="isLoading">Loading…</span>
    <button :disabled="isLoading">{{ t('buttons.submit') }}</button>
    <p>Active: {{ localeMeta?.flag }} {{ localeMeta?.display }}</p>
  </div>
</template>