|
6 | 6 |
|
7 | 7 | > Extensions for vue-i18n
|
8 | 8 |
|
9 |
| -This library exports the following extensions: |
| 9 | +**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! |
10 | 10 |
|
11 |
| -## :star: Features |
12 |
| -- directive: `v-t` custom directive for server-side |
13 |
| -- module: `v-t` custom directive compiler module for `vue-template-compiler` or `vue-loader` (`compilerModules` option) |
14 |
| - |
15 |
| -## :cd: Installation |
16 |
| - |
17 |
| -```sh |
18 |
| -$ npm i --save-dev @intlify/vue-i18n-extensions |
19 |
| -``` |
20 |
| - |
21 |
| -## :rocket: Extensions |
22 |
| - |
23 |
| -### directive: `v-t` custom directive for server-side |
24 |
| -This directive is `v-t` custom directive for server-side-rendering. You can specify it as [`directives` option](https://ssr.vuejs.org/en/api.html#directives) of `createRenderer` function. |
25 |
| - |
26 |
| -The following example: |
27 |
| - |
28 |
| -```javascript |
29 |
| -import Vue from 'vue' |
30 |
| -import VueI18n from 'vue-i18n' |
31 |
| -import { createRenderer } from 'vue-server-renderer' |
32 |
| -import { directive as t } from '@intlify/vue-i18n-extensions' |
33 |
| - |
34 |
| -Vue.use(VueI18n) |
35 |
| - |
36 |
| -const i18n = new VueI18n({ |
37 |
| - locale: 'en', |
38 |
| - messages: { |
39 |
| - en: { |
40 |
| - hello: 'hello' |
41 |
| - }, |
42 |
| - ja: { |
43 |
| - hello: 'こんにちは' |
44 |
| - } |
45 |
| - } |
46 |
| -}) |
47 |
| -const renderer = createRenderer({ directives: { t } }) |
48 |
| - |
49 |
| -const app = new Vue({ |
50 |
| - i18n, |
51 |
| - render (h) { |
52 |
| - // <p v-t="'hello'"></p> |
53 |
| - return h('p', { |
54 |
| - directives: [{ |
55 |
| - name: 't', rawName: 'v-t', |
56 |
| - value: ('hello'), expression: "'hello'" |
57 |
| - }] |
58 |
| - }) |
59 |
| - } |
60 |
| -}) |
61 |
| - |
62 |
| -renderer.renderToString(app, (err, html) => { |
63 |
| - console.log(html) // output -> '<p data-server-rendered="true">hello</p>' |
64 |
| -}) |
65 |
| -``` |
66 |
| - |
67 |
| -### module: `v-t` custom directive compiler module |
68 |
| -This module is `v-t` custom directive module for vue compiler. You can specify it as [`modules` option](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#vue-template-compiler) of `vue-template-compiler`. |
69 |
| - |
70 |
| -> :warning: NOTE: This extension is not isomorphic/universal codes. for Node.js environment only. |
71 |
| -
|
72 |
| -The following example that use `compile` function of `vue-template-compiler`: |
73 |
| - |
74 |
| -```javascript |
75 |
| -import Vue from 'vue' |
76 |
| -import VueI18n from 'vue-i18n' |
77 |
| -import { compile } from 'vue-template-compiler' |
78 |
| -import { module } from '@intlify/vue-i18n-extensions' |
79 |
| - |
80 |
| -Vue.use(VueI18n) |
81 |
| - |
82 |
| -const i18n = new VueI18n({ |
83 |
| - locale: 'en', |
84 |
| - messages: { |
85 |
| - en: { |
86 |
| - hello: 'hello' |
87 |
| - }, |
88 |
| - ja: { |
89 |
| - hello: 'こんにちは' |
90 |
| - } |
91 |
| - }, |
92 |
| - missing: (locale, key) => { |
93 |
| - console.log(`translation missing: locale=${locale}, key=${key}`) |
94 |
| - } |
95 |
| -}) |
96 |
| -const i18nModule = module(i18n) |
97 |
| - |
98 |
| -const { ast, render } = compile(`<p v-t="'hello'"></p>`, { modules: [i18nModule] }) |
99 |
| -console.log(ast.i18n) // output -> 'hello' |
100 |
| -console.log(render) // output -> `with(this){return _c('p',{domProps:{"textContent":_s("hello")}})}` |
101 |
| -``` |
102 |
| - |
103 |
| -The following configration example of `vue-loader`: |
104 |
| - |
105 |
| -```javascript |
106 |
| -const Vue = require('vue') |
107 |
| -const VueI18n = require('vue-i18n') |
108 |
| -const i18nExtensions = require('@intlify/vue-i18n-extensions') |
109 |
| -const messages = require('./locales.json') |
110 |
| - |
111 |
| -Vue.use(VueI18n) |
112 |
| - |
113 |
| -const i18n = new VueI18n({ |
114 |
| - locale: 'ja', |
115 |
| - messages: messages |
116 |
| -}) |
117 |
| - |
118 |
| -module.exports = { |
119 |
| - module: { |
120 |
| - rules: [{ |
121 |
| - test: /\.vue$/, |
122 |
| - loader: 'vue', |
123 |
| - options: { |
124 |
| - compilerModules: [i18nExtensions.module(i18n)], |
125 |
| - // other vue-loader options go here |
126 |
| - loaders: {} |
127 |
| - } |
128 |
| - }] |
129 |
| - } |
130 |
| -} |
131 |
| -``` |
132 |
| - |
133 |
| -## :scroll: Changelog |
134 |
| -Details changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/vue-i18n-extensions/blob/dev/CHANGELOG.md). |
135 |
| - |
136 |
| - |
137 |
| -## :exclamation: Issues |
138 |
| -Please make sure to read the [Issue Reporting Checklist](https://github.com/intlify/vue-i18n-extensions/blob/dev/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately. |
139 |
| - |
140 |
| - |
141 |
| -## :muscle: Contribution |
142 |
| -Please make sure to read the [Contributing Guide](https://github.com/intlify/vue-i18n-extensions/blob/dev/CONTRIBUTING.md) before making a pull request. |
| 11 | +## Status: WIP |
143 | 12 |
|
144 | 13 | ## :copyright: License
|
145 | 14 |
|
|
0 commit comments