Skip to content

Commit 9c5b966

Browse files
committed
update docs
1 parent a922f76 commit 9c5b966

File tree

1 file changed

+2
-133
lines changed

1 file changed

+2
-133
lines changed

README.md

Lines changed: 2 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -6,140 +6,9 @@
66

77
> Extensions for vue-i18n
88
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!
1010

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
14312

14413
## :copyright: License
14514

0 commit comments

Comments
 (0)