|
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