i18n

package.json

@@ -26,21 +26,26 @@
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.1.1",
+    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
     "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.1",
+    "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
     "cssnano": "^3.10.0",
     "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.1.3",
     "eslint-friendly-formatter": "^3.0.0",
+    "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^3.0.0",
-    "eslint-config-airbnb-base": "^11.1.3",
-    "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.2.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
@@ -49,8 +54,7 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
+    "inject-loader": "^3.0.0",
-    "cross-env": "^5.0.1",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
@@ -61,31 +65,28 @@
     "karma-spec-reporter": "0.0.31",
     "karma-webpack": "^2.0.2",
     "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^3.0.0",
-    "babel-plugin-istanbul": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
-    "chromedriver": "^2.27.2",
-    "cross-spawn": "^5.0.1",
     "nightwatch": "^0.9.12",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.8.0",
+    "svg-inline-loader": "^0.8.0",
     "url-loader": "^0.5.8",
+    "vue-i18n": "^7.2.0",
     "vue-loader": "^13.0.4",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.4.2",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
-    "webpack-merge": "^4.1.0",
+    "webpack-merge": "^4.1.0"
-    "svg-inline-loader": "^0.8.0"
   },
   "engines": {
     "node": ">= 4.0.0",

src/api/index.js

@@ -2,7 +2,7 @@ require('es6-promise').polyfill();
 require('isomorphic-fetch');
 
 /**
- * TODO
+ * TODO: Handle country/locale
  */
 export default function (EAN) {
     return fetch(

src/components/NavigationDrawer.vue

@@ -11,23 +11,23 @@
                     <v-icon>home</v-icon>
                 </v-list-tile-action>
                 <v-list-tile-content>
-                    <v-list-tile-title>Home</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.home') }}</v-list-tile-title>
                 </v-list-tile-content>
             </v-list-tile>
             <v-list-tile :to="{ name: 'Scan' }">
                 <v-list-tile-action>
-                    <v-icon>search</v-icon>
+                    <v-icon>camera_alt</v-icon>
                 </v-list-tile-action>
                 <v-list-tile-content>
-                    <v-list-tile-title>Scan</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.scan') }}</v-list-tile-title>
                 </v-list-tile-content>
             </v-list-tile>
             <v-list-tile :to="{ name: 'ManualBarcode' }">
                 <v-list-tile-action>
-                    <v-icon>search</v-icon>
+                    <v-icon>keyboard</v-icon>
                 </v-list-tile-action>
                 <v-list-tile-content>
-                    <v-list-tile-title>Find by barcode</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.manualBarcode') }}</v-list-tile-title>
                 </v-list-tile-content>
             </v-list-tile>
             <v-list-tile :to="{ name: 'Preferences' }">
@@ -35,7 +35,7 @@
                     <v-icon>settings</v-icon>
                 </v-list-tile-action>
                 <v-list-tile-content>
-                    <v-list-tile-title>Preferences</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.preferences') }}</v-list-tile-title>
                 </v-list-tile-content>
             </v-list-tile>
         </v-list>

src/i18n/en/index.js

@@ -0,0 +1,16 @@
+export default {
+    navigation: {
+        home: 'Home',
+        scan: 'Scan',
+        manualBarcode: 'Manual barcode',
+        preferences: 'Preferences',
+    },
+    misc: {
+        or: 'or',
+    },
+    manualBarcode: {
+        heading: 'Which barcode are you looking for?',
+        EAN13Barcode: 'EAN13 barcode',
+        go: 'Go!',
+    },
+};

src/i18n/index.js

@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+// Import translations
+import enMessages from './en';
+
+Vue.use(VueI18n);
+
+
+export function getBrowserLocales() {
+    let langs = [];
+
+    if (navigator.languages) {
+        // Chrome does not currently set navigator.language correctly
+        // https://code.google.com/p/chromium/issues/detail?id=101138
+        // but it does set the first element of navigator.languages correctly
+        langs = navigator.languages;
+    } else if (navigator.userLanguage) {
+        // IE only
+        langs = [navigator.userLanguage];
+    } else {
+        // as of this writing the latest version of firefox + safari set this correctly
+        langs = [navigator.language];
+    }
+
+    // Some browsers does not return uppercase for second part
+    const locales = langs.map((lang) => {
+        const locale = lang.split('-');
+        return locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : lang;
+    });
+
+    return locales;
+}
+
+// All available translations
+const messages = {
+    en: enMessages,
+};
+
+// Get best matching locale
+const locale = getBrowserLocales().find(
+    browserLocale => Object.prototype.hasOwnProperty.call(messages, browserLocale),
+);
+
+export default new VueI18n({
+    locale: locale || 'en',  // Fallback to 'en' locale
+    messages,
+});

src/main.js

@@ -1,11 +1,14 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+
 import Vuetify from 'vuetify';
 import '../node_modules/vuetify/dist/vuetify.min.css';
+
 import App from './App';
 import router from './router';
 import store from './store';
+import i18n from './i18n';
 
 Vue.config.productionTip = false;
 
@@ -16,6 +19,7 @@ new Vue({
     el: '#app',
     router,
     store,
+    i18n,
     template: '<App/>',
     components: { App },
 });

src/views/ManualBarcode.vue

@@ -1,7 +1,7 @@
 <template>
     <v-container fluid layout wrap class="manualbarcode-panel">
         <v-layout row>
-            <h2 class="headline text-xs-center">Which barcode are you looking for?</h2>
+            <h2 class="headline text-xs-center">{{ $t('manualBarcode.heading') }}</h2>
         </v-layout>
 
         <v-layout row class="mt-4">
@@ -16,7 +16,7 @@
                     <v-layout row wrap align-baseline>
                         <v-flex xs9>
                             <v-text-field
-                                label="EAN13 barcode"
+                                :label="$t('manualBarcode.EAN13Barcode')"
                                 placeholder="1234567890128"
                                 v-model="ean13"
                                 :rules="ean13Rules"
@@ -35,7 +35,7 @@
                                     class="no-min-width"
                                     dark
                                     >
-                                    Go!
+                                    {{ $t('manualBarcode.go') }}
                                 </v-btn>
                             </p>
                         </v-flex>
@@ -51,7 +51,7 @@ import BarcodeIcon from '@/components/BarcodeIcon';
 
 export default {
     created() {
-        this.$store.dispatch('setTitle', { title: 'Manual barcode' });
+        this.$store.dispatch('setTitle', { title: this.$t('navigation.manualBarcode') });
         this.$store.dispatch('setBackgroundColor', { backgroundColor: '#42A5F5' });
     },
     components: {