Skip to content

Commit 69e5423

Browse files
DemivanDemivan
committed
feat(loader): add webpack fluent-vue-loader
Loader allows using <i18n> section in Vue single file components to colocate localization messages with rest of component Another benefit of loader is that localization messages can be loaded asynchroniosly if component is loaded asynchroniosly
1 parent 5544202 commit 69e5423

File tree

17 files changed

+6063
-96
lines changed

17 files changed

+6063
-96
lines changed

‎.travis.yml

-20
This file was deleted.

‎examples/typescript/src/App.vue

+20-16
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@
44

55
<h4>$t method</h4>
66
<div>
7-
<span>
8-
{{ $t('greeting', { name: 'World' }) }}
9-
</span>
7+
<span>{{ $t('greeting', { name: 'World' }) }}</span>
108
</div>
119

1210
<h4>$ta method</h4>
1311
<div>
14-
<span v-bind="$ta('greeting')">{{ $t('greeting', { name: 'World' }) }}</span>
12+
<span v-bind="$ta('greeting')">{{ $t('greeting', { name: 'World' }) }}</span>
1513
</div>
1614

1715
<h4>Directive</h4>
@@ -31,17 +29,23 @@
3129
</template>
3230

3331
<script lang="ts">
34-
import Vue from 'vue'
32+
import Vue from 'vue'
3533
36-
export default Vue.extend({
37-
name: 'typescript',
38-
computed: {
39-
t () {
40-
return this.$t('user-name')
41-
},
42-
ta () {
43-
return this.$ta('greeting')
44-
}
45-
}
46-
})
34+
export default Vue.extend({
35+
name: 'typescript',
36+
computed: {
37+
username() {
38+
return this.$t('user-name')
39+
},
40+
greeting() {
41+
return this.$ta('greeting')
42+
},
43+
},
44+
})
4745
</script>
46+
47+
<style lang="scss">
48+
.test {
49+
display: block;
50+
}
51+
</style>

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@
5050
"conventional-changelog-cli": "^2.0.31",
5151
"csstype": "^2.6.8",
5252
"enquirer": "^2.3.2",
53+
"eslint": "^7.3.1",
54+
"eslint-plugin-vue": "^6.2.2",
5355
"execa": "^2.0.4",
5456
"fs-extra": "^8.1.0",
5557
"jest": "^25.2.3",

‎packages/fluent-vue-loader/example/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "fluent-vue-loader-example",
3+
"scripts": {
4+
"build": "webpack",
5+
"dev": "webpack-dev-server"
6+
},
7+
"devDependencies": {
8+
"babel-loader": "^8.1.0",
9+
"html-webpack-plugin": "^4.3.0",
10+
"vue-loader": "^15.9.1",
11+
"webpack": "^4.42.1",
12+
"webpack-cli": "^3.3.11",
13+
"webpack-dev-server": "^3.11.0"
14+
},
15+
"dependencies": {
16+
"vue": "^2.6.11"
17+
}
18+
}

‎packages/fluent-vue-loader/example/src/App.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<form>
3+
<label>{{ $t('language') }}</label>
4+
<select v-model="locale">
5+
<option value="en">en</option>
6+
<option value="ja">ja</option>
7+
</select>
8+
9+
<p>{{ $t('hello') }}</p>
10+
</form>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'App',
16+
data () {
17+
return {
18+
locale: 'en'
19+
}
20+
},
21+
created () {
22+
console.log(this)
23+
}
24+
}
25+
</script>
26+
27+
<i18n locale="en">
28+
language = English
29+
hello = Hello
30+
</i18n>
31+
32+
<i18n locale="uk">
33+
language = Ukraininan
34+
hello = Hello
35+
</i18n>

‎packages/fluent-vue-loader/example/src/index.html

+11
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><%= htmlWebpackPlugin.options.title %></title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
</body>
11+
</html>

‎packages/fluent-vue-loader/example/src/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Vue from 'vue'
2+
import FluentVue from '../../../fluent-vue'
3+
import App from './App.vue'
4+
5+
const fluent = new FluentVue({
6+
locale: 'en',
7+
bundles: [],
8+
})
9+
10+
Vue.use(FluentVue)
11+
12+
const app = new Vue({
13+
fluent,
14+
render(h) {
15+
return h(App)
16+
},
17+
})
18+
19+
app.$mount('#app')

‎packages/fluent-vue-loader/example/webpack.config.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const path = require('path')
2+
const { VueLoaderPlugin } = require('vue-loader')
3+
const HtmlWebpackPlugin = require('html-webpack-plugin')
4+
5+
module.exports = {
6+
mode: 'development',
7+
entry: {
8+
main: path.resolve(__dirname, './src/index.js'),
9+
},
10+
output: {
11+
path: path.resolve(__dirname, 'dist'),
12+
filename: '[name].js',
13+
publicPath: '/dist/',
14+
},
15+
module: {
16+
rules: [
17+
{
18+
test: /\.vue$/,
19+
loader: 'vue-loader',
20+
},
21+
{
22+
test: /\.js$/,
23+
loader: 'babel-loader',
24+
},
25+
{
26+
resourceQuery: /blockType=i18n/,
27+
type: 'javascript/auto',
28+
use: [path.resolve(__dirname, '../dist/fluent-vue-loader.cjs.js')],
29+
},
30+
],
31+
},
32+
plugins: [
33+
new VueLoaderPlugin(),
34+
new HtmlWebpackPlugin({
35+
template: 'src/index.html',
36+
}),
37+
],
38+
}

0 commit comments

Comments
 (0)