npmpackage.info

Gathering detailed insights and metrics for @intlify/vue-i18n-extensions

Other packages similar to @intlify/vue-i18n-extensions

@intlify/vue-i18n-extensions-nightly

5.0.1-28621993.348528d

vue-i18n extensions

Gathering detailed insights and metrics for @intlify/vue-i18n-extensions

@intlify/vue-i18n-extensions

vue-i18n extensions

6.0.0

100

MIT

TypeScript

10.04 kB

Installations

npm install @intlify/vue-i18n-extensions

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>= 18

Node Version

18.20.3

NPM Version

10.7.0 Pull Requests

Open

11

Total

310

Closed

101

Merged

198

Issues

Open

4

Total

14

Closed

10

Releases

v8.0.0

Updated on Dec 29, 2024

v7.0.0

Updated on Sep 22, 2024

v6.2.0

Updated on Jun 17, 2024

v6.1.1

Updated on Jun 13, 2024

v6.1.0

Updated on Jun 12, 2024

v6.0.6

Updated on Jun 11, 2024

View All 28 releases

Languages

TypeScript

JavaScript

Shell

Vue

HTML

TypeScript (95.6%)

JavaScript (2.89%)

Shell (0.78%)

Vue (0.38%)

HTML (0.35%)

Developer

intlify

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

100 Stars

310 Commits

13 Forks

5 Watchers

18 Branches

14 Contributors

Updated on Jun 25, 2025

Maintainers

View All 14 Contributors

Package Meta Information

Latest Version

6.0.0

Package Id

@intlify/vue-i18n-extensions@6.0.0

Unpacked Size

10.04 kB

Size

3.83 kB

File Count

NPM Version

10.7.0

Node Version

18.20.3

Published on

Jun 07, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

🌏 @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 branch!

This library exports the following extensions:

🌟 Features

Server-side rendering for v-t custom directive
Pre-Translation

💿 Installation

1# npm
2npm i --save-dev @intlify/vue-i18n-extensions@next
3
4# pnpm
5pnpm add -D @intlify/vue-i18n-extensions@next
6
7# yarn
8yarn 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:

1import * as runtimeDom from '@vue/runtime-dom'
2import { compile } from '@vue/compiler-ssr'
3import { defineComponent, createSSRApp } from 'vue'
4import { renderToString } from '@vue/server-renderer'
5import { createI18n, useI18n } from 'vue-i18n'
6import { transformVTDirective } from '@intlify/vue-i18n-extensions'
7
8// create i18n instance
9const i18n = createI18n({
10  locale: 'ja',
11  messages: {}
12})
13
14// get transform from  `transformVTDirective` function
15const transformVT = transformVTDirective()
16
17// compile your source
18const source = `<div v-t="{ path: 'dessert', locale: 'en', plural: 2, args: { name: 'banana' } }"/>`
19const { code } = compile(source, {
20  mode: 'function',
21  directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
22})
23
24// render functionalization
25const render = Function('require', 'Vue', code)(require, runtimeDom)
26
27// e.g. set render function to App component
28const App = defineComponent({
29  setup() {
30    return useI18n({
31      locale: 'en',
32      inheritLocale: false,
33      messages: {
34        en: {
35          apple: 'no apples | one apple | {count} apples',
36          banana: 'no bananas | {n} banana | {n} bananas',
37          dessert: 'I eat @:{name}!'
38        }
39      }
40    })
41  },
42  ssrRender: render
43})
44
45// create SSR app
46const app = createSSRApp(App)
47
48// install vue-i18n
49app.use(i18n)
50
51console.log(await renderToString(app))
52// output -> <div>I eat 2 bananas!</div>`

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:

1import { compile } from '@vue/compiler-dom'
2import { createI18n } from 'vue-i18n'
3import { transformVTDirective } from '@intlify/vue-i18n-extensions'
4
5// create i18n instance
6const i18n = createI18n({
7  locale: 'ja',
8  messages: {
9    en: {
10      hello: 'hello'
11    },
12    ja: {
13      hello: 'こんにちは'
14    }
15  }
16})
17
18// get transform from  `transformVTDirective` function, with `i18n` option
19const transformVT = transformVTDirective({ i18n })
20
21const { code } = compile(`<p v-t="'hello'"></p>`, {
22  mode: 'function',
23  hoistStatic: true,
24  prefixIdentifiers: true,
25  directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
26})
27console.log(code)
28/*
29  output ->
30    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
31
32    return function render(_ctx, _cache) {
33      return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\"))
34    }
35*/

The following configuration example of vue-loader:

1const { VueLoaderPlugin } = require('vue-loader')
2const { createI18n } = require('vue-i18n')
3const { transformVTDirective } = require('@intlify/vue-i18n-extensions')
4
5const i18n = createI18n({
6  locale: 'ja',
7  messages: {
8    en: {
9      hello: 'hello'
10    },
11    ja: {
12      hello: 'こんにちは'
13    }
14  }
15})
16const transformVT = transformVTDirective(i18n)
17
18module.exports = {
19  module: {
20    // ...
21    rules: [
22      {
23        test: /\.vue$/,
24        use: [
25          {
26            loader: 'vue-loader',
27            options: {
28              compilerOptions: {
29                directiveTransforms: { t: transformVT }
30              }
31            }
32          }
33        ]
34      }
35      // ...
36    ]
37  },
38  plugins: [new VueLoaderPlugin()],
39  parallel: false // the compilerOptions.directiveTransforms are not serializable
40}

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)
vite (vueCompilerOptions at CoreOptions)

🤝 API

About details, See docs

©️ License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

2

Maintained

Determines if the project is "actively maintained".

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 1

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:102: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:133: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/ci.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/github-label-sync.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/github-label-sync.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/release.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/release.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reproduire.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/reproduire.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/typos.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/typos.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/typos.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/intlify/vue-i18n-extensions/typos.yml/next?enable=pin
Info: 0 out of 13 GitHub-owned GitHubAction dependencies pinned
Info: 1 out of 5 third-party GitHubAction dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@intlify/vue-i18n-extensions - 6.0.0 | npmpackage.info

Other packages similar to @intlify/vue-i18n-extensions

Other packages similar to @intlify/vue-i18n-extensions

@intlify/vue-i18n-extensions

Installations

Developer Guide

Yes

CommonJS

>= 18

18.20.3

10.7.0

Pull Requests

11

310

101

198

Issues

4

14

10

Releases

Languages

Developer

intlify

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

🌏 @intlify/vue-i18n-extensions

🌟 Features

💿 Installation

🚀 Extensions

Server-side rendering for v-t custom directive

Pre-Translation with using v-t custom directive

🤝 API

©️ License

10

10

10

2

1

0

0

0

0

0

0

0

3

/10

Server-side rendering for `v-t` custom directive

Pre-Translation with using `v-t` custom directive