Vue.js single file components starter-kit with Vuex and I18n configuration
Create interactive Vue.js single file components (SFC), compile them into standalone JS files and connect to your webpage 👌
- Clone repository
https://github.com/dmitriyakkerman/vue-vuex-i18n-browser-sfc-starter.git- Install dependencies
npm install- Configure your Vuex store modules in
src/js/storefolder.
// src/js/store/modules/counter.js
export default {
state: {
count: 1
},
mutations: {
increment (state) {
state.count++
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
}// src/js/store/index.js
import Vue from "vue";
import Vuex from 'vuex'
import counter from "./modules/counter";
Vue.use(Vuex);
export const store = new Vuex.Store({
modules: {
counter
}
});- Configure your I18n localization in
src/js/langfolder.
// src/js/lang/messages.js
export const messages = {
en: {
message: {
greeting: 'Hello world!'
}
},
ru: {
message: {
greeting: 'Привет, мир!'
}
}
};// src/js/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {messages} from "./messages";
Vue.use(VueI18n);
export const i18n = new VueI18n({
locale: 'en',
messages
});- Create and configure you Vue.js single file components in
src/js/partialfolder using Vuex and I18n.
// src/js/partial/greeting/Greeting.vue
<template>
<div>
<h1>{{ $t("message.greeting") }}</h1>
</div>
</template>
<script>
export default {}
</script>// src/js/partial/greeting/main.js
import Vue from 'vue';
import {i18n} from "../../lang";
import Greeting from "./Greeting.vue";
Vue.config.productionTip = false;
new Vue({
i18n,
render: h => h(Greeting),
}).$mount('.greeting');// src/js/partial/counter/Counter.vue
<template>
<div>
<div>Count: {{ count }}</div>
<div>Double count: {{ doubleCount }}</div>
<button @click="increment">Increment count</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.counter.count
},
doubleCount() {
return this.$store.getters.doubleCount
}
},
methods: {
increment() {
this.$store.commit('increment')
}
}
}
</script>// src/js/partial/counter/main.js
import Vue from 'vue';
import {store} from "../../store";
import Counter from "./Counter.vue";
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(Counter),
}).$mount('.counter');- Configure entry points in
webpack.config.js.
// webpack.config.js
module.exports = {
...
entry: {
'greeting': ['./src/js/partial/greeting/main.js'],
'counter': ['./src/js/partial/counter/main.js']
},
...
};- Build your standalone JS files using one of these commands:
Build mode
npm run buildBuild watch mode
npm run startThis will create minified js files in dist/js folder.
- Create view files in
viewsfolder, create root selectors for your single file components and connect your compiled standalone JS files.
// views/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example</title>
</head>
<body>
<div class="greeting"></div>
<hr>
<div class="counter"></div>
<script src="../dist/js/greeting.min.js"></script>
<script src="../dist/js/counter.min.js"></script>
</body>
</html>- Enjoy! 🎉
Each compiled standalone JS file includes Vue.js by default.
Please, consider removing Vue.js import from any of your js files(especially in case you use multiple compiled SFC on the same page) and connecting Vue.js globally via CDN.
This will extremely reduce the size of you compiled SFC ☝️
// src/js/store/index.js
- import Vue from "vue";
...// src/js/lang/index.js
- import Vue from 'vue'
...// src/js/partial/greeting/main.js
- import Vue from 'vue'
...// src/js/partial/counter/main.js
- import Vue from 'vue'// views/index.html
...
+ <script src="https://unpkg.com/vue"></script>
...