Skip to content

Commit 1ff910b

Browse files
committed
update docs
1 parent 6870379 commit 1ff910b

File tree

1 file changed

+103
-1
lines changed

1 file changed

+103
-1
lines changed

README.md

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,109 @@
88
99
**NOTE:** :warning: This `next` branch is development branch for Vue 3! The stable version is now in [`master`](https://github.com/intlify/vue-i18n-extensions/tree/master) branch!
1010

11-
## Status: WIP ![Test](https://github.com/intlify/vue-i18n-extensions/workflows/Test/badge.svg)
11+
## Status: Alpha ![Test](https://github.com/intlify/vue-i18n-extensions/workflows/Test/badge.svg)
12+
13+
This library exports the following extensions:
14+
15+
## :star: Features
16+
- module: `v-t` custom directive compiler module for the following:
17+
- `@vue/compiler-core` (`options` at `baseCompile` function)
18+
- `@vue/compiler-dom` (`options` at `compile` function)
19+
- `@vue/compiler-sfc` (`compilerOptions` at `compileTemplate` function)
20+
- `vue-loader` (`compilerOptions` at `options`)
21+
22+
## :cd: Installation
23+
24+
```sh
25+
$ npm i --save-dev @intlify/vue-i18n-extensions@alpha
26+
```
27+
28+
## :rocket: Extensions
29+
30+
### module: `v-t` custom directive compiler module
31+
This module is `v-t` custom directive module for vue compilers. You can specify it.
32+
33+
The following example that use `compile` function of `@vue/compiler-dom`:
34+
35+
```js
36+
import { compile } from '@vue/compiler-dom'
37+
import { createI18n } from 'vue-i18n'
38+
import { defineTransformVT } from '@intlify/vue-i18n-extensions'
39+
40+
const i18n = createI18n({
41+
locale: 'ja',
42+
messages: {
43+
en: {
44+
hello: 'hello'
45+
},
46+
ja: {
47+
hello: 'こんにちは'
48+
}
49+
}
50+
})
51+
const transformVT = defineTransformVT(i18n)
52+
53+
const { code } = compile(`<p v-t="'hello'"></p>`, {
54+
mode: 'function',
55+
hoistStatic: true,
56+
prefixIdentifiers: true,
57+
directiveTransforms: { t: transformVT }
58+
})
59+
console.log(codel)
60+
/* output -> 'hello'
61+
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
62+
63+
const _hoisted_1 = { textContent: "こんにちは" }
64+
65+
return function render(_ctx, _cache) {
66+
return (_openBlock(), _createBlock("p", _hoisted_1))
67+
}
68+
*/
69+
```
70+
71+
The following configration example of `vue-loader`:
72+
73+
```js
74+
const { VueLoaderPlugin } = require('vue-loader')
75+
const { createI18n } = require('vue-i18n')
76+
const { defineTransformVT } = require('@intlify/vue-i18n-extensions')
77+
78+
const i18n = createI18n({
79+
locale: 'ja',
80+
messages: {
81+
en: {
82+
hello: 'hello'
83+
},
84+
ja: {
85+
hello: 'こんにちは'
86+
}
87+
}
88+
})
89+
const transformVT = defineTransformVT(i18n)
90+
91+
module.exports = {
92+
module: {
93+
// ...
94+
rules: [
95+
{
96+
test: /\.vue$/,
97+
use: [
98+
{
99+
loader: 'vue-loader',
100+
options: {
101+
compilerOptions: {
102+
directiveTransforms: { t: transformVT }
103+
}
104+
}
105+
}
106+
]
107+
},
108+
// ...
109+
]
110+
},
111+
plugins: [new VueLoaderPlugin()]
112+
}
113+
```
12114

13115
## :copyright: License
14116

0 commit comments

Comments
 (0)