diff --git a/build/rollup.config.js b/build/rollup.config.js index 61a30e53b3..346d3fab8a 100755 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -81,7 +81,12 @@ function genConfig (opts) { 'external-helpers' ], presets: [ - ['es2015', { modules: false }] + ['env', { + targets: { + node: '6.11.0' + }, + modules: false + }] ], 'env': { 'test': { diff --git a/build/start.js b/build/start.js index ac1d3bdf67..9f5eaecc28 100755 --- a/build/start.js +++ b/build/start.js @@ -15,7 +15,8 @@ const packageJSON = readJSONSync(resolve(rootDir, 'package.json')) // Required and Excluded packages for start let requires = [ 'source-map-support', - 'pretty-error' + 'pretty-error', + 'minimist' ] const excludes = [ diff --git a/examples/custom-build/nuxt.config.js b/examples/custom-build/nuxt.config.js index 5feedeaaef..7f63c66e5c 100644 --- a/examples/custom-build/nuxt.config.js +++ b/examples/custom-build/nuxt.config.js @@ -1,15 +1,15 @@ module.exports = { build: { filenames: { - css: 'styles.[chunkhash].css', // default: common.[chunkhash].css - manifest: 'manifest.[hash].js', // default: manifest.[hash].js - vendor: 'vendor.[hash].js', // default: vendor.bundle.[hash].js - app: 'app.[chunkhash].js' // default: nuxt.bundle.[chunkhash].js + css: 'styles.[chunkhash].css', // default: common.[chunkhash].css + manifest: 'manifest.[hash].js', // default: manifest.[hash].js + vendor: 'vendor.[hash].js', // default: vendor.bundle.[hash].js + app: 'app.[chunkhash].js' // default: nuxt.bundle.[chunkhash].js }, vendor: ['lodash'], extend (config, { dev }) { if (dev) { - config.devtool = (dev ? 'eval-source-map' : false) + config.devtool = 'eval-source-map' } const urlLoader = config.module.rules.find((loader) => loader.loader === 'url-loader') // Increase limit to 100KO diff --git a/examples/dynamic-components/pages/index.vue b/examples/dynamic-components/pages/index.vue index 74f0026f39..6381e70525 100755 --- a/examples/dynamic-components/pages/index.vue +++ b/examples/dynamic-components/pages/index.vue @@ -45,7 +45,7 @@ ul { list-style: none; margin: 0; padding: 0; - with: 100%; + width: 100%; max-width: 300px; margin: auto; } @@ -68,4 +68,4 @@ ul li { opacity: 0; transform: translateY(20px); } - \ No newline at end of file + diff --git a/examples/global-css/assets/roboto.woff2 b/examples/global-css/assets/roboto.woff2 new file mode 100644 index 0000000000..555f98b120 Binary files /dev/null and b/examples/global-css/assets/roboto.woff2 differ diff --git a/examples/global-css/css/main.css b/examples/global-css/css/main.css index 762c321cb7..debffff97e 100644 --- a/examples/global-css/css/main.css +++ b/examples/global-css/css/main.css @@ -1,3 +1,11 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(../assets/roboto.woff2) format('woff2'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} + body { background: #eee; text-align: center; @@ -7,6 +15,7 @@ body { position: absolute; top: 0; left: 0; + font-family: 'Roboto'; } .content { margin-top: 100px; diff --git a/examples/global-css/nuxt.config.js b/examples/global-css/nuxt.config.js index f916e5a053..3dc2839759 100644 --- a/examples/global-css/nuxt.config.js +++ b/examples/global-css/nuxt.config.js @@ -9,5 +9,12 @@ module.exports = { css: [ 'bulma/css/bulma.css', '~/css/main.css' - ] + ], + render: { + bundleRenderer: { + shouldPreload: (file, type) => { + return ['script', 'style', 'font'].includes(type) + } + } + } } diff --git a/examples/global-css/package.json b/examples/global-css/package.json index 75e5b4647d..1525d69e4e 100644 --- a/examples/global-css/package.json +++ b/examples/global-css/package.json @@ -1,7 +1,7 @@ { "name": "nuxt-global-css", "dependencies": { - "bulma": "^0.4.3", + "bulma": "^0.5.1", "nuxt": "latest" }, "scripts": { diff --git a/examples/i18n/package.json b/examples/i18n/package.json index 5ca4f709ba..6c75b31cb7 100644 --- a/examples/i18n/package.json +++ b/examples/i18n/package.json @@ -1,7 +1,7 @@ { "name": "nuxt-i18n", "dependencies": { - "nuxt": "latest", + "nuxt": "^1.0.0-rc9", "vue-i18n": "^7.0.5" }, "scripts": { diff --git a/examples/i18n/plugins/i18n.js b/examples/i18n/plugins/i18n.js index e4859aadc9..81293fb7a7 100644 --- a/examples/i18n/plugins/i18n.js +++ b/examples/i18n/plugins/i18n.js @@ -3,7 +3,7 @@ import VueI18n from 'vue-i18n' Vue.use(VueI18n) -export default ({ app, store }) => { +export default ({ app, isClient, store }) => { // Set i18n instance on app // This way we can use it in middleware and pages asyncData/fetch app.i18n = new VueI18n({ diff --git a/examples/layout-transitions/README.md b/examples/layout-transitions/README.md new file mode 100644 index 0000000000..3bdd2a9092 --- /dev/null +++ b/examples/layout-transitions/README.md @@ -0,0 +1,3 @@ +# Layout transitions with Nuxt.js + +https://nuxtjs.org/examples/layout-transitions diff --git a/examples/layout-transitions/assets/main.css b/examples/layout-transitions/assets/main.css new file mode 100644 index 0000000000..dbb73ba005 --- /dev/null +++ b/examples/layout-transitions/assets/main.css @@ -0,0 +1,52 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; +} + +.container { + text-align: center; + padding-top: 200px; + font-size: 20px; + transition: all .5s cubic-bezier(.55,0,.1,1); +} + +.page-enter-active, .page-leave-active { + transition: opacity .5s +} +.page-enter, .page-leave-active { + opacity: 0 +} + +.layout-enter-active, .layout-leave-active { + transition: opacity .5s +} +.layout-enter, .layout-leave-active { + opacity: 0 +} + +.bounce-enter-active { + animation: bounce-in .8s; +} +.bounce-leave-active { + animation: bounce-out .5s; +} +@keyframes bounce-in { + 0% { transform: scale(0) } + 50% { transform: scale(1.5) } + 100% { transform: scale(1) } +} +@keyframes bounce-out { + 0% { transform: scale(1) } + 50% { transform: scale(1.5) } + 100% { transform: scale(0) } +} + +.slide-left-enter, +.slide-right-leave-active { + opacity: 0; + transform: translate(30px, 0); +} +.slide-left-leave-active, +.slide-right-enter { + opacity: 0; + transform: translate(-30px, 0); +} diff --git a/examples/layout-transitions/layouts/secondary.vue b/examples/layout-transitions/layouts/secondary.vue new file mode 100644 index 0000000000..d4a9065bd3 --- /dev/null +++ b/examples/layout-transitions/layouts/secondary.vue @@ -0,0 +1,11 @@ + diff --git a/examples/layout-transitions/nuxt.config.js b/examples/layout-transitions/nuxt.config.js new file mode 100644 index 0000000000..e1b2d64a6c --- /dev/null +++ b/examples/layout-transitions/nuxt.config.js @@ -0,0 +1,10 @@ +module.exports = { + build: { + vendor: ['axios'] + }, + css: ['~/assets/main.css'], + layoutTransition: { + name: 'layout', + mode: 'out-in' + } +} diff --git a/examples/layout-transitions/package.json b/examples/layout-transitions/package.json new file mode 100644 index 0000000000..38fd64e26c --- /dev/null +++ b/examples/layout-transitions/package.json @@ -0,0 +1,12 @@ +{ + "name": "nuxt-layout-transitions", + "dependencies": { + "axios": "^0.15.3", + "nuxt": "latest" + }, + "scripts": { + "dev": "../../bin/nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} diff --git a/examples/layout-transitions/pages/about.vue b/examples/layout-transitions/pages/about.vue new file mode 100644 index 0000000000..0ec094454f --- /dev/null +++ b/examples/layout-transitions/pages/about.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/layout-transitions/pages/index.vue b/examples/layout-transitions/pages/index.vue new file mode 100644 index 0000000000..fe5ce74005 --- /dev/null +++ b/examples/layout-transitions/pages/index.vue @@ -0,0 +1,7 @@ + diff --git a/examples/layout-transitions/pages/users.vue b/examples/layout-transitions/pages/users.vue new file mode 100644 index 0000000000..84ea80cf23 --- /dev/null +++ b/examples/layout-transitions/pages/users.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/examples/spa/nuxt.config.js b/examples/spa/nuxt.config.js index 1ee2ae7dec..7040b5d3dc 100644 --- a/examples/spa/nuxt.config.js +++ b/examples/spa/nuxt.config.js @@ -23,23 +23,19 @@ module.exports = { */ css: ['~/assets/main.css'], /* - ** Cutomize loading indicator + ** Customize loading indicator */ loadingIndicator: { /* ** See https://github.com/nuxt/nuxt.js/tree/dev/lib/app/views/loading for available loading indicators ** You can add a custom indicator by giving a path - ** Default: 'circle' */ - name: 'folding-cube', + // name: 'folding-cube', /* ** You can give custom options given to the template ** See https://github.com/nuxt/nuxt.js/blob/dev/lib/app/views/loading/folding-cube.html - ** Default: - ** - color: '#3B8070' - ** - background: 'white' */ - color: '#222', - background: 'white' + // color: '#DBE1EC' + // background: 'white' } } diff --git a/examples/typescript/modules/typescript.js b/examples/typescript/modules/typescript.js index ec98f8fd26..a45d341b89 100644 --- a/examples/typescript/modules/typescript.js +++ b/examples/typescript/modules/typescript.js @@ -7,7 +7,7 @@ module.exports = function (options) { loader: 'ts-loader' }) // Add TypeScript loader for vue files - for (rule of config.module.rules) { + for (let rule of config.module.rules) { if (rule.loader === 'vue-loader') { rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}' } diff --git a/examples/vue-apollo/package.json b/examples/vue-apollo/package.json index 907e221af3..f26ec4014c 100644 --- a/examples/vue-apollo/package.json +++ b/examples/vue-apollo/package.json @@ -1,8 +1,8 @@ { "name": "nuxt-vue-apollo", "dependencies": { - "@nuxtjs/apollo": "^2.0.0", - "nuxt": "^1.0.0-rc6" + "@nuxtjs/apollo": "^2.1.1", + "nuxt": "^1.0.0-rc9" }, "scripts": { "dev": "nuxt", diff --git a/lib/app/App.vue b/lib/app/App.vue index 37e6d69b37..771bd613f7 100644 --- a/lib/app/App.vue +++ b/lib/app/App.vue @@ -1,7 +1,9 @@ diff --git a/lib/app/client.js b/lib/app/client.js index 724c070344..4c43a21682 100644 --- a/lib/app/client.js +++ b/lib/app/client.js @@ -26,18 +26,19 @@ let router // Try to rehydrate SSR data from window const NUXT = window.__NUXT__ || {} -NUXT.components = window.__COMPONENTS__ || null <% if (debug || mode === 'spa') { %> // Setup global Vue error handler const defaultErrorHandler = Vue.config.errorHandler Vue.config.errorHandler = function (err, vm, info) { - err.statusCode = err.statusCode || err.name || 'Whoops!' - err.message = err.message || err.toString() + const nuxtError = { + statusCode: err.statusCode || err.name || 'Whoops!', + message: err.message || err.toString() + } // Show Nuxt Error Page if(vm && vm.$root && vm.$root.$nuxt && vm.$root.$nuxt.error && info !== 'render function') { - vm.$root.$nuxt.error(err) + vm.$root.$nuxt.error(nuxtError) } // Call other handler if exist @@ -49,7 +50,7 @@ Vue.config.errorHandler = function (err, vm, info) { if (process.env.NODE_ENV !== 'production') { console.error(err) } else { - console.error(err.message) + console.error(err.message || nuxtError.message) } } <% } %> @@ -132,30 +133,31 @@ async function loadAsyncComponents (to, from, next) { } } +function applySSRData(Component, ssrData) { + if (NUXT.serverRendered && ssrData) { + applyAsyncData(Component, ssrData) + } + Component._Ctor = Component + return Component +} + // Get matched components function resolveComponents(router) { - const path = getLocation(router.options.base) + const path = getLocation(router.options.base, router.options.mode) return flatMapComponents(router.match(path), (Component, _, match, key, index) => { // If component already resolved if (typeof Component !== 'function' || Component.options) { - const _Component = sanitizeComponent(Component) + const _Component = applySSRData(sanitizeComponent(Component), NUXT.data ? NUXT.data[index] : null) match.components[key] = _Component return _Component } // Resolve component return Component().then(Component => { - const _Component = sanitizeComponent(Component) - if (NUXT.serverRendered) { - applyAsyncData(_Component, NUXT.data[index]) - if (NUXT.components) { - Component.options.components = Object.assign(_Component.options.components, NUXT.components[index]) - } - _Component._Ctor = _Component - } - match.components[key] = _Component - return _Component + const _Component = applySSRData(sanitizeComponent(Component), NUXT.data ? NUXT.data[index] : null) + match.components[key] = _Component + return _Component }) }) } @@ -228,7 +230,7 @@ async function render (to, from, next) { await callMiddleware.call(this, Components, context, layout) if (context._redirected) return - this.error({ statusCode: 404, message: 'This page could not be found.' }) + this.error({ statusCode: 404, message: '<%= messages.error_404 %>' }) return next() } @@ -272,7 +274,7 @@ async function render (to, from, next) { }) // ...If .validate() returned false if (!isValid) { - this.error({ statusCode: 404, message: 'This page could not be found.' }) + this.error({ statusCode: 404, message: '<%= messages.error_404 %>' }) return next() } diff --git a/lib/app/components/nuxt-child.js b/lib/app/components/nuxt-child.js index 39b8e3c4e7..8df1feb71d 100644 --- a/lib/app/components/nuxt-child.js +++ b/lib/app/components/nuxt-child.js @@ -37,6 +37,19 @@ export default { name: 'nuxt-child', functional: true, render (h, { parent, data }) { + const nuxt = parent.$root.nuxt + const component = parent.$route.matched[0].components.default + + const layoutUid = parent._uid + const layoutName = component.options ? component.options.layout : null + + // If we're changing layout render the stored vnode + if (nuxt._layoutUid === layoutUid && + nuxt._layoutName !== layoutName) return nuxt._childVnode + + nuxt._layoutUid = layoutUid + nuxt._layoutName = layoutName + data.nuxtChild = true const _parent = parent const transitions = parent.$nuxt.nuxt.transitions @@ -62,11 +75,14 @@ export default { listeners[key] = transition[key].bind(_parent) } }) - return h('transition', { + + nuxt._childVnode = h('transition', { props: transitionProps, on: listeners }, [ h('router-view', data) ]) + + return nuxt._childVnode } } diff --git a/lib/app/components/nuxt-error.vue b/lib/app/components/nuxt-error.vue index 68b05a43be..a304f59e85 100644 --- a/lib/app/components/nuxt-error.vue +++ b/lib/app/components/nuxt-error.vue @@ -1,32 +1,21 @@