setup i18n

nuxt.config.js

@@ -49,6 +49,7 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
+    '~/plugins/i18n.js'
   ],
 
   /*

package-lock.json

@@ -10364,6 +10364,11 @@
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g=="
     },
+    "vue-i18n": {
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.11.2.tgz",
+      "integrity": "sha512-STcpmxqBrG77SyWi7e0Yn/B3DjKR6mSDwYS4F/V7zoi+e/+CPbVb2TaBqFwnrkoDcPmRfjM7nTwsiRQQOGdifw=="
+    },
     "vue-loader": {
       "version": "15.7.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.0.tgz",

package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "cross-env": "^5.2.0",
     "nuxt": "^2.4.0",
-    "nuxt-clipboard2": "^0.2.1"
+    "nuxt-clipboard2": "^0.2.1",
+    "vue-i18n": "^8.11.2"
   },
   "devDependencies": {
     "autoprefixer": "^8.6.4",

plugins/i18n.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+export default ({ app, store }) => {
+  // Set i18n instance on app
+  // This way we can use it in middleware and pages asyncData/fetch
+  app.i18n = new VueI18n({
+    locale: store.state.locale,
+    fallbackLocale: 'en',
+    messages: {
+      'en': require('~/locales/en.json'),
+      'fr': require('~/locales/fr.json')
+    }
+  })
+
+  app.i18n.path = (link) => {
+    if (app.i18n.locale === app.i18n.fallbackLocale) {
+      return `/${link}`
+    }
+
+    return `/${app.i18n.locale}/${link}`
+  }
+}

store/store.js

@@ -0,0 +1,12 @@
+export const state = () => ({
+  locales: ['en', 'fr', 'de'],
+  locale: 'en'
+})
+
+export const mutations = {
+  SET_LANG(state, locale) {
+    if (state.locales.indexOf(locale) !== -1) {
+      state.locale = locale
+    }
+  }
+}