# @intlify/vue-i18n-extensions > vue-i18n extensions Latest version **9.0.0** (published 2026-05-23) · MIT license · 0 weekly downloads ## Install ```sh npm install @intlify/vue-i18n-extensions pnpm add @intlify/vue-i18n-extensions yarn add @intlify/vue-i18n-extensions bun add @intlify/vue-i18n-extensions ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 9.0.0 | | Published | 2026-05-23 | | First published | 2020-01-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >= 22 | | Dependencies | 2 | | Unpacked size | 58 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 103 | | Author | kazuya kawaguchi | | Maintainers | kazupon, ota-meshi | | Keywords | extensions, i18n, optimaization, server-side-rendering, vue, vue-i18n | ## Links - npm: https://www.npmjs.com/package/@intlify/vue-i18n-extensions - Repository: https://github.com/intlify/vue-i18n-extensions - Homepage: https://github.com/intlify/vue-i18n-extensions#readme - Issues: https://github.com/intlify/vue-i18n-extensions/issues - npm.io page: https://npm.io/package/@intlify/vue-i18n-extensions ## Dependencies (2) - [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.24.6 - [@vue/compiler-dom](https://npm.io/package/@vue/compiler-dom.md) ^3.2.45 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 9.0.0 (latest) — 2026-05-23 - 2.0.0-rc.1 (rc) — 2021-02-09 - 2.0.0-beta.1 (beta) — 2020-09-17 - 2.0.0-alpha.2 (alpha) — 2020-08-07 - 9.0.0-beta.1 — 2026-05-23 - 8.0.0 — 2024-12-29 - 7.0.0 — 2024-09-22 - 6.2.0 — 2024-06-17 - 6.1.1 — 2024-06-13 - 6.1.0 — 2024-06-12 - 6.0.6 — 2024-06-11 - 6.0.5 — 2024-06-10 - 6.0.4 — 2024-06-10 - 6.0.3 — 2024-06-10 - 6.0.2 — 2024-06-10 - … 12 more at https://npm.io/package/@intlify/vue-i18n-extensions/versions ## README # 🌏 @intlify/vue-i18n-extensions [![npm](https://img.shields.io/npm/v/@intlify/vue-i18n-extensions/next.svg)](https://www.npmjs.com/package/@intlify/vue-i18n-extensions) [![npm](https://img.shields.io/npm/v/@intlify/vue-i18n-extensions.svg)](https://www.npmjs.com/package/@intlify/vue-i18n-extensions) Extensions for vue-i18n > [!IMPORTANT] > This `next` branch is development branch for Vue 3! The version for Vue 2 is now in [`master`](https://github.com/intlify/vue-i18n-extensions/tree/master) branch! This library exports the following extensions: ## 🌟 Features - Server-side rendering for `v-t` custom directive - Pre-Translation ## 💿 Installation ```sh # npm npm i --save-dev @intlify/vue-i18n-extensions@next # pnpm pnpm add -D @intlify/vue-i18n-extensions@next # yarn yarn add -D @intlify/vue-i18n-extensions@next ``` ## 🚀 Extensions ### Server-side rendering for `v-t` custom directive You can use transform offered with this package, to support Server-side rendering for `v-t` custom directives. In order to use this feature, you need to specify to Vue compiler option. The following example that use `compile` of `@vue/compiler-ssr`: ```js import * as runtimeDom from '@vue/runtime-dom' import { compile } from '@vue/compiler-ssr' import { defineComponent, createSSRApp } from 'vue' import { renderToString } from '@vue/server-renderer' import { createI18n, useI18n } from 'vue-i18n' import { transformVTDirective } from '@intlify/vue-i18n-extensions' // create i18n instance const i18n = createI18n({ locale: 'ja', messages: {} }) // get transform from `transformVTDirective` function const transformVT = transformVTDirective() // compile your source const source = `
` const { code } = compile(source, { mode: 'function', directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option! }) // render functionalization const render = Function('require', 'Vue', code)(require, runtimeDom) // e.g. set render function to App component const App = defineComponent({ setup() { return useI18n({ locale: 'en', inheritLocale: false, messages: { en: { apple: 'no apples | one apple | {count} apples', banana: 'no bananas | {n} banana | {n} bananas', dessert: 'I eat @:{name}!' } } }) }, ssrRender: render }) // create SSR app const app = createSSRApp(App) // install vue-i18n app.use(i18n) console.log(await renderToString(app)) // output ->
I eat 2 bananas!
` ``` ### Pre-Translation with using `v-t` custom directive You can pre-translation i18n locale messages of vue-i18n. > [!WARNING] > Only the global scope i18n locale messages can be pre-translated !! > [!WARNING] > only `v-t` custom directive is supported !! In order to use this feature, you need to specify to Vue compiler option. The following example that use `compile` of `@vue/compiler-dom`: ```js import { compile } from '@vue/compiler-dom' import { createI18n } from 'vue-i18n' import { transformVTDirective } from '@intlify/vue-i18n-extensions' // create i18n instance const i18n = createI18n({ locale: 'ja', messages: { en: { hello: 'hello' }, ja: { hello: 'こんにちは' } } }) // get transform from `transformVTDirective` function, with `i18n` option const transformVT = transformVTDirective({ i18n }) const { code } = compile(`

`, { mode: 'function', hoistStatic: true, prefixIdentifiers: true, directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option! }) console.log(code) /* output -> const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue return function render(_ctx, _cache) { return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\")) } */ ``` The following configuration example of `vue-loader`: ```js const { VueLoaderPlugin } = require('vue-loader') const { createI18n } = require('vue-i18n') const { transformVTDirective } = require('@intlify/vue-i18n-extensions') const i18n = createI18n({ locale: 'ja', messages: { en: { hello: 'hello' }, ja: { hello: 'こんにちは' } } }) const transformVT = transformVTDirective(i18n) module.exports = { module: { // ... rules: [ { test: /\.vue$/, use: [ { loader: 'vue-loader', options: { compilerOptions: { directiveTransforms: { t: transformVT } } } } ] } // ... ] }, plugins: [new VueLoaderPlugin()], parallel: false // the compilerOptions.directiveTransforms are not serializable } ``` You can specify the transform resulting from `transformVTDirective` in the compiler options for each package offered by vue-next, and tool chains: - `@vue/compiler-core` (`options` at `baseCompile` function) - `@vue/compiler-dom` (`options` at `compile` function) - `@vue/compiler-ssr` (`options` at `compile` function) - `@vue/compiler-sfc` (`compilerOptions` at `compileTemplate` function) - `vue-loader` (`compilerOptions` at `options`) - `rollup-plugin-vue` (`compilerOptions` at [`Options`](https://github.com/vuejs/rollup-plugin-vue/blob/next/src/index.ts#L50)) - `vite` (`vueCompilerOptions` at [`CoreOptions`](https://github.com/vitejs/vite/blob/master/src/node/config.ts#L154)) ## 🤝 API About details, See [docs](./docs/@intlify/vue-i18n-extensions-api.md) ## ©️ License [MIT](http://opensource.org/licenses/MIT) --- _Source: https://npm.io/package/@intlify/vue-i18n-extensions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._