npmpackage.info

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

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

@intlify/unplugin-vue-i18n

6.0.0

unplugin for Vue I18n

vue-i18n

10.0.4

Internationalization plugin for Vue.js

@intlify/vue-i18n-loader

4.2.0

vue-i18n for webpack loader

@intlify/eslint-plugin-vue-i18n

3.1.0

ESLint plugin for Vue I18n

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

@intlify/vue-i18n-extensions

vue-i18n extensions

6.0.0

MIT

TypeScript

20,161,854 4.3

Installations

npm install @intlify/vue-i18n-extensions

Score

Supply Chain

90.3

Quality

84.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

4

Total

272

Closed

92

Merged

176

Issues

Open

4

Total

13

Closed

9

Releases

v7.0.0

Published on 22 Sept 2024

v6.2.0

Published on 17 Jun 2024

v6.1.1

Published on 13 Jun 2024

v6.1.0

Published on 12 Jun 2024

v6.0.6

Published on 11 Jun 2024

v6.0.5

Published on 10 Jun 2024

View all 27 releases

Developer

intlify

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>= 18

Typescript Support

Yes

Node Version

18.20.3

NPM Version

10.7.0 Statistics

93 Stars

286 Commits

11 Forks

6 Watching

11 Branches

13 Contributors

Updated on 26 Nov 2024

Languages

TypeScript (95.7%)

JavaScript (2.79%)

Shell (0.78%)

Vue (0.38%)

HTML (0.35%)

Total Downloads

Cumulative downloads

Total Downloads

20,161,854

Last day

3.1%

25,294

Compared to previous day

Last week

12.1%

125,287

Compared to previous week

Last month

39.9%

468,242

Compared to previous month

Last year

-25.1%

4,066,431

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

Dangerous-Workflow

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

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

4

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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

Token-Permissions

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

0

CII-Best-Practices

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

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.

Score

4.3

/10

Last Scanned on 2024-11-18

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

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

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

@intlify/vue-i18n-extensions

Installations

Score

Pull Requests

4

272

92

176

Issues

4

13

9

Releases

Developer

intlify

Developer Guide

CommonJS

>= 18

Yes

18.20.3

10.7.0

Statistics

Languages

Total Downloads

20,161,854

Daily Downloads

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

10

4

1

0

0

0

0

0

0

4.3

/10

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

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