vue-i18n example

examples/vue-i18n/middleware/i18n.js

@@ -0,0 +1,7 @@
+export default async function ({ store, params, error }) {
+  const lang = params.lang || 'en'
+  if (!store.state.lang.locales.includes(lang)) {
+    return error({ message: 'Page not found', statusCode: 404 })
+  }
+  return store.dispatch('lang/setLang', lang)
+}

examples/vue-i18n/middleware/vue-i18n.js

@@ -1,7 +0,0 @@
-// import Vue from 'vue'
-
-export default function ({ params }) {
-  console.log(params)
-  // if (params)
-  // Vue.config.lang = 'en'
-}

examples/vue-i18n/nuxt.config.js

@@ -1,6 +1,9 @@
 module.exports = {
-  build: {
+  router: {
-    vendor: ['vue-i18n']
+    middleware: 'i18n'
   },
-  plugins: ['~plugins/vue-i18n']
+  build: {
+    vendor: ['axios']
+  },
+  plugins: ['~plugins/i18n']
 }

examples/vue-i18n/pages/_lang/index.vue

@@ -1,3 +1,7 @@
 <template>
-  <p v-html="$t('message.welcome')"></p>
+  <div>
+    <p>{{ $t('message.welcome') }}</p>
+    <nuxt-link to="/fr">French</nuxt-link>
+    <nuxt-link to="/">English</nuxt-link>
+  </div>
 </template>

examples/vue-i18n/plugins/axios.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+let options = {}
+// The server-side needs a full url to works
+if (process.SERVER_BUILD) {
+  options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
+}
+
+export default axios.create(options)

examples/vue-i18n/plugins/i18n.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import store from '~store'
+
+Vue.prototype.$t = function (key) {
+  const state = store.state.lang
+  let keys = key.split('.')
+  let value = state._[state.lang]
+  keys.forEach((k) => {
+    value = value[k]
+  })
+  return value
+}

examples/vue-i18n/plugins/vue-i18n.js

@@ -1,6 +0,0 @@
-import Vue from 'vue'
-
-if (process.BROWSER_BUILD) {
-  var VueI18n = require('vue-i18n')
-  Vue.use(VueI18n)
-}

examples/vue-i18n/store/lang.js

@@ -0,0 +1,27 @@
+import axios from '~plugins/axios'
+
+export const state = {
+  locales: ['en', 'fr'], // available langages
+  lang: null, // current lang
+  _: {} // store for translations
+}
+
+export const mutations = {
+  SET_LANG (state, lang) {
+    state.lang = lang
+  },
+  SET_TRANSLATION (state, translation) {
+    state._[state.lang] = translation
+  }
+}
+
+export const actions = {
+  async setLang ({ state, commit }, lang) {
+    if (state._[lang]) {
+      return commit('SET_LANG', lang)
+    }
+    let res = await axios.get(`/locales/${lang}.json`)
+    commit('SET_LANG', lang)
+    commit('SET_TRANSLATION', res.data)
+  }
+}