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 @@ 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) + } +}