From f490786fa3795fed1c6017430b95f1c78531e8d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Wed, 8 Feb 2017 18:49:16 +0100
Subject: [PATCH] vue-i18n example

---
 examples/vue-i18n/middleware/i18n.js          |  7 +++++
 examples/vue-i18n/middleware/vue-i18n.js      |  7 -----
 examples/vue-i18n/nuxt.config.js              |  9 ++++---
 examples/vue-i18n/pages/_lang/index.vue       |  6 ++++-
 examples/vue-i18n/plugins/axios.js            |  9 +++++++
 examples/vue-i18n/plugins/i18n.js             | 12 +++++++++
 examples/vue-i18n/plugins/vue-i18n.js         |  6 -----
 .../vue-i18n/{lang => static/locales}/en.json |  0
 .../vue-i18n/{lang => static/locales}/fr.json |  0
 examples/vue-i18n/store/lang.js               | 27 +++++++++++++++++++
 10 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 examples/vue-i18n/middleware/i18n.js
 delete mode 100644 examples/vue-i18n/middleware/vue-i18n.js
 create mode 100644 examples/vue-i18n/plugins/axios.js
 create mode 100644 examples/vue-i18n/plugins/i18n.js
 delete mode 100644 examples/vue-i18n/plugins/vue-i18n.js
 rename examples/vue-i18n/{lang => static/locales}/en.json (100%)
 rename examples/vue-i18n/{lang => static/locales}/fr.json (100%)
 create mode 100644 examples/vue-i18n/store/lang.js

diff --git a/examples/vue-i18n/middleware/i18n.js b/examples/vue-i18n/middleware/i18n.js
new file mode 100644
index 0000000000..19b4f0fc44
--- /dev/null
+++ b/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)
+}
diff --git a/examples/vue-i18n/middleware/vue-i18n.js b/examples/vue-i18n/middleware/vue-i18n.js
deleted file mode 100644
index 8a42177d24..0000000000
--- a/examples/vue-i18n/middleware/vue-i18n.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// import Vue from 'vue'
-
-export default function ({ params }) {
-  console.log(params)
-  // if (params)
-  // Vue.config.lang = 'en'
-}
diff --git a/examples/vue-i18n/nuxt.config.js b/examples/vue-i18n/nuxt.config.js
index 272ccd1efe..ab672788fa 100644
--- a/examples/vue-i18n/nuxt.config.js
+++ b/examples/vue-i18n/nuxt.config.js
@@ -1,6 +1,9 @@
 module.exports = {
-  build: {
-    vendor: ['vue-i18n']
+  router: {
+    middleware: 'i18n'
   },
-  plugins: ['~plugins/vue-i18n']
+  build: {
+    vendor: ['axios']
+  },
+  plugins: ['~plugins/i18n']
 }
diff --git a/examples/vue-i18n/pages/_lang/index.vue b/examples/vue-i18n/pages/_lang/index.vue
index 681f7ea258..78f3154ec4 100644
--- a/examples/vue-i18n/pages/_lang/index.vue
+++ b/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>
diff --git a/examples/vue-i18n/plugins/axios.js b/examples/vue-i18n/plugins/axios.js
new file mode 100644
index 0000000000..e44041d5f0
--- /dev/null
+++ b/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)
diff --git a/examples/vue-i18n/plugins/i18n.js b/examples/vue-i18n/plugins/i18n.js
new file mode 100644
index 0000000000..db834b5309
--- /dev/null
+++ b/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
+}
diff --git a/examples/vue-i18n/plugins/vue-i18n.js b/examples/vue-i18n/plugins/vue-i18n.js
deleted file mode 100644
index 4b5f28c440..0000000000
--- a/examples/vue-i18n/plugins/vue-i18n.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-
-if (process.BROWSER_BUILD) {
-  var VueI18n = require('vue-i18n')
-  Vue.use(VueI18n)
-}
diff --git a/examples/vue-i18n/lang/en.json b/examples/vue-i18n/static/locales/en.json
similarity index 100%
rename from examples/vue-i18n/lang/en.json
rename to examples/vue-i18n/static/locales/en.json
diff --git a/examples/vue-i18n/lang/fr.json b/examples/vue-i18n/static/locales/fr.json
similarity index 100%
rename from examples/vue-i18n/lang/fr.json
rename to examples/vue-i18n/static/locales/fr.json
diff --git a/examples/vue-i18n/store/lang.js b/examples/vue-i18n/store/lang.js
new file mode 100644
index 0000000000..4c58d1f668
--- /dev/null
+++ b/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)
+  }
+}