diff --git a/examples/vue-i18n/README.md b/examples/vue-i18n/README.md new file mode 100644 index 0000000000..d55e9ec258 --- /dev/null +++ b/examples/vue-i18n/README.md @@ -0,0 +1,3 @@ +# i18n with Nuxt.js + +https://nuxtjs.org/examples/i18n diff --git a/examples/vue-i18n/layouts/default.vue b/examples/vue-i18n/layouts/default.vue new file mode 100644 index 0000000000..eaf4bddcc1 --- /dev/null +++ b/examples/vue-i18n/layouts/default.vue @@ -0,0 +1,100 @@ + + + + + Nuxt i18n + + + {{ $t('links.home') }} + + + {{ $t('links.about') }} + + + {{ $t('links.french') }} + + + {{ $t('links.english') }} + + + + + + + + + + + diff --git a/examples/vue-i18n/layouts/error.vue b/examples/vue-i18n/layouts/error.vue new file mode 100644 index 0000000000..32e5417d15 --- /dev/null +++ b/examples/vue-i18n/layouts/error.vue @@ -0,0 +1,59 @@ + + + + {{ error.statusCode }} + + {{ error.message }} + + Back to the home page + + + + + + + diff --git a/examples/vue-i18n/locales/en-US.json b/examples/vue-i18n/locales/en-US.json new file mode 100644 index 0000000000..898218c0a0 --- /dev/null +++ b/examples/vue-i18n/locales/en-US.json @@ -0,0 +1,16 @@ +{ + "links": { + "home": "Home", + "about": "About", + "english": "English version", + "french": "French version" + }, + "home": { + "title": "Welcome", + "introduction": "This is an introduction in English." + }, + "about": { + "title": "About", + "introduction": "This page is made to give you more informations." + } +} diff --git a/examples/vue-i18n/locales/fr-FR.json b/examples/vue-i18n/locales/fr-FR.json new file mode 100644 index 0000000000..b4e96aeb96 --- /dev/null +++ b/examples/vue-i18n/locales/fr-FR.json @@ -0,0 +1,16 @@ +{ + "links": { + "home": "Accueil", + "about": "À propos", + "english": "Version Anglaise", + "french": "Version Française" + }, + "home": { + "title": "Bienvenue", + "introduction": "Ceci est un texte d'introduction en Français." + }, + "about": { + "title": "À propos", + "introduction": "Cette page est faite pour vous donner plus d'informations." + } +} diff --git a/examples/vue-i18n/middleware/i18n.js b/examples/vue-i18n/middleware/i18n.js new file mode 100644 index 0000000000..ea4d486b46 --- /dev/null +++ b/examples/vue-i18n/middleware/i18n.js @@ -0,0 +1,5 @@ +export default function ({ app, store, params, error }) { + const locale = params.lang || 'en-US' + store.commit('SET_LANG', locale) + app.$i18n.locale = store.state.locale +} diff --git a/examples/vue-i18n/nuxt.config.js b/examples/vue-i18n/nuxt.config.js new file mode 100644 index 0000000000..d9fd7ea922 --- /dev/null +++ b/examples/vue-i18n/nuxt.config.js @@ -0,0 +1,14 @@ +module.exports = { + loading: { + color: 'cyan' + }, + router: { + middleware: 'i18n' + }, + build: { + vendor: ['vue-i18n'] + }, + plugins: [ + { src: '~plugins/i18n.js', injectAs: 'i18n' } + ] +} diff --git a/examples/vue-i18n/package.json b/examples/vue-i18n/package.json new file mode 100644 index 0000000000..04228a1d9e --- /dev/null +++ b/examples/vue-i18n/package.json @@ -0,0 +1,12 @@ +{ + "name": "nuxt-i18n", + "dependencies": { + "axios": "^0.15.3", + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} diff --git a/examples/vue-i18n/pages/_lang/about.vue b/examples/vue-i18n/pages/_lang/about.vue new file mode 100644 index 0000000000..e01f333525 --- /dev/null +++ b/examples/vue-i18n/pages/_lang/about.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/examples/vue-i18n/pages/_lang/index.vue b/examples/vue-i18n/pages/_lang/index.vue new file mode 100644 index 0000000000..9bd4e585d9 --- /dev/null +++ b/examples/vue-i18n/pages/_lang/index.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/examples/vue-i18n/pages/about.vue b/examples/vue-i18n/pages/about.vue new file mode 100644 index 0000000000..e01f333525 --- /dev/null +++ b/examples/vue-i18n/pages/about.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/examples/vue-i18n/pages/index.vue b/examples/vue-i18n/pages/index.vue new file mode 100644 index 0000000000..9bd4e585d9 --- /dev/null +++ b/examples/vue-i18n/pages/index.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/examples/vue-i18n/partials/About.vue b/examples/vue-i18n/partials/About.vue new file mode 100644 index 0000000000..9b3e526674 --- /dev/null +++ b/examples/vue-i18n/partials/About.vue @@ -0,0 +1,21 @@ + + + + {{ $t('about.title') }} + {{ $t('about.introduction') }} + + + + + diff --git a/examples/vue-i18n/partials/Home.vue b/examples/vue-i18n/partials/Home.vue new file mode 100644 index 0000000000..0ee45a5ca2 --- /dev/null +++ b/examples/vue-i18n/partials/Home.vue @@ -0,0 +1,21 @@ + + + + {{ $t('home.title') }} + {{ $t('home.introduction') }} + + + + + diff --git a/examples/vue-i18n/plugins/i18n.js b/examples/vue-i18n/plugins/i18n.js new file mode 100644 index 0000000000..8587fa6588 --- /dev/null +++ b/examples/vue-i18n/plugins/i18n.js @@ -0,0 +1,18 @@ +import Vue from 'vue' +import VueI18n from 'vue-i18n' +import store from '~store' + +Vue.use(VueI18n) + +console.log(store.state.locale) + +const i18n = new VueI18n({ + locale: store.state.locale, + fallbackLocale: 'en-US', + messages: { + 'en-US': require('~/locales/en-US.json'), + 'fr-FR': require('~/locales/fr-FR.json') + } +}) + +export default i18n diff --git a/examples/vue-i18n/store/index.js b/examples/vue-i18n/store/index.js new file mode 100644 index 0000000000..a978956377 --- /dev/null +++ b/examples/vue-i18n/store/index.js @@ -0,0 +1,11 @@ +export const state = { + locale: 'en-US' +} + +export const mutations = { + SET_LANG (state, locale) { + if (['en-US', 'fr-FR'].indexOf(locale) !== -1) { + state.locale = locale + } + } +} diff --git a/lib/app/index.js b/lib/app/index.js index 45040673e1..26dd7fd8c2 100644 --- a/lib/app/index.js +++ b/lib/app/index.js @@ -42,13 +42,13 @@ if (process.browser) { // Includes external plugins <% plugins.forEach(function (plugin) { - if (typeof plugin === 'string') { %> - require('<%= plugin %>') - <% } else if (plugin.src && plugin.ssr !== false) { %> - require('<%= plugin.src %>') - <% } else if (plugin.src) { %> + if (plugin.ssr) { %> + <%= (plugin.injectAs ? 'let ' + plugin.injectAs + ' = ' : '') %>require('<%= plugin.src %>') + <%= (plugin.injectAs ? plugin.injectAs + ' = ' + plugin.injectAs + '.default || ' + plugin.injectAs : '') %> + <% } else { %> if (process.browser) { - require('<%= plugin.src %>') + <%= (plugin.injectAs ? 'let ' + plugin.injectAs + ' = ' : '') %>require('<%= plugin.src %>') + <%= (plugin.injectAs ? plugin.injectAs + ' = ' + plugin.injectAs + '.default || ' + plugin.injectAs : '') %> } <% } %> <% }) %> @@ -62,7 +62,7 @@ serialize(transition) .replace('enterCancelled(', 'function(').replace('beforeLeave(', 'function(').replace('leave(', 'function(') .replace('afterLeave(', 'function(').replace('leaveCancelled(', 'function(') %> -const app = { +let app = { router, <%= (store ? 'store,' : '') %> _nuxt: { @@ -100,4 +100,15 @@ const app = { ...App } +// Inject external plugins in app +<% plugins.forEach(function (plugin) { + if (plugin.injectAs && plugin.ssr) { %> + app.<%= plugin.injectAs %> = <%= plugin.injectAs %> + <% } else if (plugin.injectAs) { %> + if (process.browser) { + app.<%= plugin.injectAs %> = <%= plugin.injectAs %> + } + <% } %> +<% }) %> + export { app, router<%= (store ? ', store' : '') %>, NuxtError } diff --git a/lib/build.js b/lib/build.js index 10dd0f49c9..fb5fc6194b 100644 --- a/lib/build.js +++ b/lib/build.js @@ -205,7 +205,7 @@ function * generateRoutesAndFiles () { if (typeof p === 'string') { return { src: r(this.srcDir, p), ssr: true } } - return { src: r(this.srcDir, p.src), ssr: !!p.ssr } + return { src: r(this.srcDir, p.src), ssr: (p.ssr === false ? false : true), injectAs: (p.injectAs || false) } }), appPath: './App.vue', layouts: layouts, diff --git a/package.json b/package.json index 378ed7d136..a9c3585cc4 100644 --- a/package.json +++ b/package.json @@ -56,13 +56,13 @@ "babel-core": "^6.24.0", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.24.0", - "babel-preset-vue-app": "^0.5.1", + "babel-preset-vue-app": "^1.1.0", "chokidar": "^1.6.1", "co": "^4.6.0", "compression": "^1.6.2", - "css-loader": "^0.27.3", + "css-loader": "^0.28.0", "debug": "^2.6.3", - "file-loader": "^0.10.1", + "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.6.1", "fs-extra": "^2.1.2", "glob": "^7.1.1", @@ -74,28 +74,28 @@ "memory-fs": "^0.4.1", "pify": "^2.3.0", "post-compile-webpack-plugin": "^0.1.1", - "preload-webpack-plugin": "^1.2.1", + "preload-webpack-plugin": "^1.2.2", "progress-bar-webpack-plugin": "^1.9.3", "script-ext-html-webpack-plugin": "^1.7.1", "serialize-javascript": "^1.3.0", "serve-static": "^1.12.1", "url-loader": "^0.5.8", - "vue": "^2.2.5", - "vue-loader": "^11.3.3", - "vue-meta": "^0.5.5", - "vue-router": "^2.3.0", - "vue-server-renderer": "^2.2.5", + "vue": "^2.2.6", + "vue-loader": "^11.3.4", + "vue-meta": "^0.5.6", + "vue-router": "^2.3.1", + "vue-server-renderer": "^2.2.6", "vue-ssr-html-stream": "^2.2.0", - "vue-ssr-webpack-plugin": "^1.0.2", - "vue-template-compiler": "^2.2.5", + "vue-ssr-webpack-plugin": "^2.1.0", + "vue-template-compiler": "^2.2.6", "vuex": "^2.2.1", - "webpack": "^2.3.2", + "webpack": "^2.3.3", "webpack-bundle-analyzer": "^2.3.1", "webpack-dev-middleware": "^1.10.1", - "webpack-hot-middleware": "^2.17.1" + "webpack-hot-middleware": "^2.18.0" }, "devDependencies": { - "ava": "^0.18.2", + "ava": "^0.19.0", "babel-eslint": "^7.2.1", "babel-plugin-array-includes": "^2.0.3", "babel-plugin-transform-async-to-generator": "^6.22.0", @@ -103,17 +103,17 @@ "babel-preset-stage-2": "^6.22.0", "codecov": "^2.1.0", "copy-webpack-plugin": "^4.0.1", - "eslint": "^3.18.0", - "eslint-config-standard": "^8.0.0-beta.2", + "eslint": "^3.19.0", + "eslint-config-standard": "^10.0.0", "eslint-plugin-html": "^2.0.1", "eslint-plugin-import": "^2.2.0", - "eslint-plugin-node": "^4.2.1", + "eslint-plugin-node": "^4.2.2", "eslint-plugin-promise": "^3.5.0", - "eslint-plugin-standard": "^2.1.1", + "eslint-plugin-standard": "^2.2.0", "finalhandler": "^1.0.1", "jsdom": "^9.12.0", "json-loader": "^0.5.4", - "nyc": "^10.2.0-candidate.0", + "nyc": "^10.2.0", "request": "^2.81.0", "request-promise-native": "^1.0.3", "webpack-node-externals": "^1.5.4"
Back to the home page
{{ $t('about.introduction') }}
{{ $t('home.introduction') }}