Skip to content

Инлайн-переводы

vueI18nInlinePlugin встраивает все JSON-файлы локалей в продакшен-бандл на этапе сборки через виртуальный модуль. HTTP-запросов во время выполнения нет — переводы это обычный JavaScript-объект, встроенный в бандл.

Идеально подходит для: SSR-приложений, offline-совместимых PWA, небольших проектов, где размер бандла менее важен, чем задержка загрузки.

ts
// vite.config.ts
import { vueI18nInlinePlugin } from 'vue-i18n-kit/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueI18nInlinePlugin({
      locales: {
        en: 'src/locales/en.json',
        ru: 'src/locales/ru.json',
        de: 'src/locales/de.json',
      },
    }),
  ],
})

Использование в приложении

ts
import inlineLocales from 'virtual:vue-i18n-kit/locales'

app.use(
  createVueI18nPlugin({
    defaultLocale: 'en',
    locales: {
      en: { messages: inlineLocales.en, meta: { display: 'English' } },
      ru: { messages: inlineLocales.ru, meta: { display: 'Русский' } },
    },
  }),
)

TypeScript — добавьте в env.d.ts или vite-env.d.ts:

ts
declare module 'virtual:vue-i18n-kit/locales' {
  const locales: Record<string, Record<string, unknown>>
  export default locales
}