Skip to content
This repository was archived by the owner on Dec 31, 2024. It is now read-only.

Commit a510145

Browse files
kazuponkazupon
committed
📝 docs(example): add custom formatter example
1 parent e8cacab commit a510145

File tree

11 files changed

+3831
-0
lines changed

11 files changed

+3831
-0
lines changed

‎examples/formatting/custom/.babelrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["es2015", { "modules": false }]
4+
]
5+
}

‎examples/formatting/custom/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log

‎examples/formatting/custom/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# vue-i18n-custom-formatter-example
2+
3+
Custom formatter example for vue-i18n
4+
5+
> :warning: You must use [the ECMA-402 (Intl) support browser](http://kangax.github.io/compat-table/esintl/) due to try this example
6+
7+
## Build Setup
8+
9+
``` bash
10+
# install dependencies
11+
npm install
12+
13+
# serve with hot reload at localhost:8080
14+
npm run dev
15+
16+
# build for production with minification
17+
npm run build
18+
```
19+
20+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎examples/formatting/custom/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-i18n-custom-formatter-example</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎examples/formatting/custom/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "vue-i18n-custom-formatter-example",
3+
"version": "1.0.0",
4+
"author": "kazuya kawaguchi <kawakazu80@gmail.com>",
5+
"dependencies": {
6+
"messageformat": "^1.0.2",
7+
"vue": "^2.1.0"
8+
},
9+
"devDependencies": {
10+
"babel-core": "^6.0.0",
11+
"babel-loader": "^6.0.0",
12+
"babel-preset-es2015": "^6.0.0",
13+
"cross-env": "^3.0.0",
14+
"css-loader": "^0.25.0",
15+
"file-loader": "^0.9.0",
16+
"vue-loader": "^10.0.0",
17+
"vue-template-compiler": "^2.1.0",
18+
"webpack": "^2.2.0",
19+
"webpack-dev-server": "^2.2.0"
20+
},
21+
"private": true,
22+
"scripts": {
23+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
24+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
25+
"postinstall": "npm link ../../../"
26+
}
27+
}

‎examples/formatting/custom/src/App.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div id="app">
3+
<div class="locale">
4+
<select v-model="locale" @change="$i18n.locale = locale">
5+
<option value="en-US">english</option>
6+
<option value="ja-JP">日本語</option>
7+
</select>
8+
</div>
9+
<div class="messages">
10+
<p id="normal">{{ $t('message.hello') }}</p>
11+
<p id="plural">{{ $t('message.plural', { n: 4 }) }}</p>
12+
<p id="select">{{ $t('message.select', { gender: 'male' }) }}</p>
13+
<p id="number">{{ $t('message.number', { current: 0.5 }) }}</p>
14+
<p id="time">{{ $t('message.time', { current: new Date() }) }}</p>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
name: 'app',
22+
data () {
23+
return { locale: 'en-US' }
24+
}
25+
}
26+
</script>

‎examples/formatting/custom/src/formatter.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import MessageFormat from 'messageformat'
2+
3+
export default class CustomFormatter {
4+
constructor (options = {}) {
5+
this._locale = options.locale || 'en-US'
6+
this._formatter = new MessageFormat(this._locale)
7+
this._formatter.setIntlSupport(true)
8+
this._caches = Object.create(null)
9+
}
10+
11+
format (message, ...args) {
12+
let fn = this._caches[message]
13+
if (!fn) {
14+
fn = this._formatter.compile(message, this._locale)
15+
this._caches[message] = fn
16+
}
17+
return fn(...args)
18+
}
19+
}

‎examples/formatting/custom/src/i18n.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Vue from 'vue'
2+
import VueI18n from 'vue-i18n'
3+
import Formatter from './formatter'
4+
5+
Vue.use(VueI18n)
6+
7+
const locale = 'en-US' // default locale
8+
const formatter = new Formatter({ locale })
9+
10+
export default new VueI18n({
11+
locale,
12+
formatter,
13+
messages: {
14+
'en-US': {
15+
message: {
16+
hello: 'hello!!',
17+
plural: 'You have {n, plural, =0{no messages} one{1 message} other{# messages}}.',
18+
select: '{gender, select, male{He} female{She} other{They}} liked this.',
19+
number: 'Current Percent: {current, number, percent}',
20+
time: 'Current Time: {current, time, short}'
21+
}
22+
},
23+
'ja-JP': {
24+
message: {
25+
hello: 'こんにちは！！',
26+
select: '{gender, select, male{彼} female{彼女} other{彼ら}} はこれを好きです。',
27+
number: '現在パーセンテージ {current, number, percent}',
28+
time: '現在時刻: {current, time, medium}',
29+
}
30+
}
31+
}
32+
})

‎examples/formatting/custom/src/main.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import i18n from './i18n'
4+
5+
new Vue({
6+
i18n,
7+
render: h => h(App)
8+
}).$mount('#app')

‎examples/formatting/custom/webpack.config.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.vue$/,
15+
loader: 'vue-loader',
16+
options: {
17+
loaders: {
18+
}
19+
// other vue-loader options go here
20+
}
21+
},
22+
{
23+
test: /\.js$/,
24+
loader: 'babel-loader',
25+
exclude: /node_modules/
26+
},
27+
{
28+
test: /\.(png|jpg|gif|svg)$/,
29+
loader: 'file-loader',
30+
options: {
31+
name: '[name].[ext]?[hash]'
32+
}
33+
}
34+
]
35+
},
36+
resolve: {
37+
alias: {
38+
'vue$': 'vue/dist/vue.common.js'
39+
}
40+
},
41+
devServer: {
42+
historyApiFallback: true,
43+
noInfo: true
44+
},
45+
performance: {
46+
hints: false
47+
},
48+
devtool: '#eval-source-map'
49+
}
50+
51+
if (process.env.NODE_ENV === 'production') {
52+
module.exports.devtool = '#source-map'
53+
// http://vue-loader.vuejs.org/en/workflow/production.html
54+
module.exports.plugins = (module.exports.plugins || []).concat([
55+
new webpack.DefinePlugin({
56+
'process.env': {
57+
NODE_ENV: '"production"'
58+
}
59+
}),
60+
new webpack.optimize.UglifyJsPlugin({
61+
sourceMap: true,
62+
compress: {
63+
warnings: false
64+
}
65+
}),
66+
new webpack.LoaderOptionsPlugin({
67+
minimize: true
68+
})
69+
])
70+
}

0 commit comments

Comments
 (0)