リリースノート

v1.0.0-rc11

Fix

v1.0.0-rc10

Improvements

  • Add resourcesLoaded plugin for Renderer #1586
  • Fix: rename context.serverState to context.nuxtState #1600
  • Fix: Handle synchronous components attached to routes

v1.0.0-rc9

Features

  • Add context.nuxtState (only on client-side and universal mode), equals to window.__NUXT__, useful for plugins which are using beforeNuxtRender hook

Fix

v1.0.0-rc8

Features

  • We now use Vuex 2.4.0 which allow us to bind context into actions and mutations! If you use official axios-module you can now use: ```js export default { actions: { async getProfile({ commit }) {
     const profile = await this.$axios.$get('user/profile')
     // Also app context is available using `this.app`
    } } }

```

Improvements

  • Fix compile error when using scrollBehavior #1517
  • Fix maximum call stack size exceeded #582
  • Match correct route when resolveComponents in hash mode #1532
  • Remove bulma in dependencies #1531
  • Disable ModuleConcatenationPlugin as of some problems with resource hints #1508
  • Use css-loader@0.28.6, you can now use ~/assets/... into your <style>

v1.0.0-rc7

Features

  • Add <no-ssr> component (from vue-no-ssr), it allows you to render component only for client-side, see example
  • Add process.mode to let you know in which mode your are into your application ('universal' or 'spa')
  • Add loading.rtl option (default false) to set the direction of the progress bar from right to left
  • Advanced: Plugins can inject a value into app and every vue instances, see example for more details

Improvements

  • Move store replaceState after plugins calls, this way, plugins can update the store before hydratation on client-side (https://github.com/nuxt/nuxt.js/commit/8dca35821621aa28e977eda189049d594464662e)
  • Fix "Invalid character in error Message" (#437, #438, @yuchonghua)
  • Fix renderer: resolve handler key as option for serverMiddleware (459363beeafbf899dc13fa08e9a304da8a03ef79, #1274)
  • Rename context.hotReload to context.isHMR
  • build.extend can now return the new config (PR #1447, fix #1288)
  • Fix problem with route chunk names (#1461)
  • Fix asyncData with nested pages in production build (#1248)
  • Avoid setting babe.presets if build.babel.babelrc is true
  • Router base is now added to all middleware so nuxt won't conflict with other middleware (1ca5739a2f58857cecf4f7ce96f1603a0f0b51ae)
  • Fix static import in css with alias conflict (#1435)

v1.0.0-rc6

Improvements

  • Use vue-meta to build meta tags for spa mode based on nuxt.config.js(39f431efdf1d68f457d0bae2b345f7f27708e36b)
  • Fix asyncData & fetch calls on spa mode with children (#1423)
  • Remove typings for TypeScript (fix #1419)
  • Fix problems with common chunk (7973d67f5b92cab4f59c54ee443ca4c1654072ce)
  • Fix sass loader with indentedSyntax (#1436, b931dd40cea828021f3092d1e224053a1baacba0)

Features

  • Experimental webpack dll support to split vendor in a way that can drastically improve dev build time performance (d7fbe47c31d30f8d4971bfe8605d92b2fc71a15c) This option is disabled by default, you can enable by setting build.dll to true in nuxt.config.js for beta testing and reporting any possible issues with this feature (don't forget to git ignore .cache/)

v1.0.0-rc5

Improvements

  • Route orders is handled with wildcard, see #1275
  • nuxt generate won't sort the CSS class names by default (fix some issues with Semantic UI), see https://github.com/nuxt/nuxt.js/commit/533c8a9fb66e105ae8175bf31bff4eede5d733e1
  • Support Class Components in layouts & extended components (PR #1310 & 1342)
  • Add better support for pug (PR #1361)
  • We can now use ~/assets in style tag in vue files. (2ff8b5aaf6e3ed6f34b2f33f8840dffb9b1a0a17, #1241)
  • Prevent error with opencollective postinstall script (https://github.com/nuxt/nuxt.js/commit/a0d888d9766f0e953a3a30c07791da24a0f490e2)
  • Improve extracted CSS long term caching by using [contenthash] (#1390, c9def711fa5e6e72b886d8932ac24dbb2f7fbb7f)
  • Webpack chunk namings and hash improved (No longer meaningless 0.nuxt.bundle) (e510136a5ab0b1ec39c578bf0d75827e42b1e7f1)
  • Fix problem with nuxt-start package.json (#1378)
  • perf: Scope Hoisting now enabled for client bundles
  • perf: improved js minification using ES6 aware babel-minify and exporting banners to an external LICENSES file. (673dfcd3c997d59b74adfa6aacc844a7b0753408)

Features

  • Add process.static (equals true with nuxt generate) to know if your app is running as a static website (you can use process.server && process.static to know when the page are server rendered before being saved).
  • Add isStatic inside context
  • Store with modules now has strict: true by default in development mode to force Vuex best practices (see https://vuex.vuejs.org/en/strict.html)

Better SPA Experience

  • You can run nuxt commands in spa mode using --spa (nuxt --spa)
  • Introduce to options.mode in nuxt.config.js with 2 possible values:
    • universal (default): (server-side + client-side rendering)
    • spa: (only client-side rendering)
  • Resource Hints for SPA (7a9539e74f76fe80c7a40506fdc0337134ff4b84)
  • options.headsupport for SPA (866e31d1a6d0b921d2d4bddffac094427e529f13)
  • options.loadingIndicator for SPA loading splash with 10+ ready to use spinners out of the box.
  • Build & Deploy Apps using nuxt build --spa, the dist directory is automatically generated and ready to be deployed on pure static hostings like surge, github pages or now.
  • css sourcemaps can be disabled using options.build.cssSourceMap (Enabled on dev only by default)

See SPA example: https://spa.nuxtjs.org [source]

PostCSS

  • Working PostCSS Everywhere (5d2429459a5920a0a02ace97127bbe7b47199eea)
  • Automatically detect and support postcss.js in projects. (f0ef41962d5b2305054ddbfdaa6fe43fc147dc85)
  • cssnext, postcss-import, postcss-url is the default preset, so you can enjoy latest css features and have import support.
  • While old array style is supported, the new recommended usage is object style, so you can lazy require postcss plugins (adding in devDependencies only) and also customize default preset easier:
module.exports = {
 build: {
    postcss: {
        plugins: {
        'postcss-import': false, // Disable default postcss-import
        'cssnext' : { /* provide some options */ },
        'postcss-rtl': { } // Add your own postcss plugins
       }
    }
 } 
}

v1.0.0-rc4

Improvements

  • New error page by nuxt.js made by @pi0 :)
  • Add file-loader for videos, see PR #1224
  • Upgrade to vue-meta 1.0.5 (fix router transitions with undefined title and kept-alive components)

v1.0.0-rc3

:warning: This is still in heavy development, the API will not change to 1.0 but you may except some bugs.

We are working hard on the documentation, please wait for the new documentation before creating new issues.

We are also working on updating the templates and examples.

Installation

npm install --save nuxt@next

Breaking Changes

  • Aliases are now ~, ~~, @, @@, assets and static (~plugins should be renamed to ~/plugins for example)
  • Programmatic Usage is different now, see custom-server example and updated express template
  • build.loaders has been removed in nuxt.config.js, use build.extend instead
  • injectAs has been removed in plugins, you can inject your plugins by accessing app (see example)
  • process.BROWSER_BUILD has been removed in flavour of process.browser
  • process.SERVER_BUILD has been removed in flavour of process.server
  • Remove ~store and ~router aliases, use plugins to access router and store (see example)

Features / Improvements

nuxt.config.js

  • Add generate.concurrency (default: 500)
  • Add build.devMiddleware to customise webpack-dev-middleware options
  • Add build.hotMiddleware to customise webpack-hot-middleware options
  • Add build.extractCSS option (default to false)

Context

  • nuxtServerInit has now access to context.redirect & context.error
  • context is now given to plugins when they are exporting a function
  • Add context.from (only available on client-side when navigating)
  • Add context.beforeNuxtRender(fn) with async fn({ nuxtState, Components }) (only available on server-side)

v1.0.0-alpha.4

  • Returns empty app when redirected (avoid templates error) (fix #763)
  • Add redirect in plugins context
  • Fix redirect with full URL
  • Modules: this.addPlugin() now unshift the plugins to be executed first

v1.0.0-alpha.3

  • nuxt.build() is now ran automatically on development mode
  • Option build.buildNamespace has been renamed to buildDir
  • JSDOM has been updated to use the latest API (nuxt.renderAndGetWindow)
  • For nuxt generate, you can now give a payload to avoid multiple API call, see this example to see how to use it.
  • context.hotReload (boolean) has been added to know when middleware or page hooks are being called from the hot reload or not (only in development) (fix #812)
  • window.onNuxtReady has been fixed (fix #829)
  • Option dev is now equal to false when process.env.NODE_ENV === 'production'
  • Fix module to be called before listening the server

v1.0.0-alpha2

  • Add index.d.ts for TypeScript compatibility
  • Use webpack-node-externals (PR #780 by @egoist)
  • Optimize generate by giving a payload (PR #768 by @jroxendal)
  • Fix class component TypeEror (PR #765 by @clarkdo)
  • Add build.buildNamespace to manage multiple apps into the same folder (PR #776 by @motia)

v0.10.7

Features

  • Add generate.interval to wait X ms between every render on nuxt generate (@jroxendal via #617)

Improvements

  • Add --config-file option in nuxt dev mode (@alexmoreno via #592)
  • Add chunkNames on Webpack for code-splitted pages and layouts:

screen shot 2017-04-17 at 16 13 57

Bug fixes

  • The bundles are now directly in the dist folder when using nuxt generate with publicPath being an URL (fix #612)
  • Lock version for Vue ~2.2, we are working on implementing Vue 2.3 as soon as possible! (@qm3ster via #637)

v0.10.6

Features

Improvements

  • You now have access to this in the data hook :fire:
  • Give nuxt instance as context (this) to build.extend method (@any35 via #488)
  • Add store parameter in validate method (@agoalofalife via #507)
  • Add babel-preset-es2015 in dependencies to avoid error with some external libraries

v0.10.5

Features

  • Nested Vuex modules are now possible via the file API (@rhwilr via #447), see the vuex-store-modules example
  • Nuxt.js extracts manifest.[hash].jsto bundle the webpack runtime code, improving the vendor bundle cache possibilities (see Webpack doc). The filename is customisable, see build.filenames.manifest.

v0.10.4

Bug fixes

v0.10.3

Features

  • We can now specify the watchers options for chokidar and webpack via nuxt.config.js:
    module.exports = {
    watchers: {
      chokidar: {
        usePolling: true
      },
      webpack: {
        aggregateTimeout: 1000,
        poll: 1000
      }
    }
    }

Improvements

  • Show url after each build #443

v0.10.2

Improvements

  • Watch middleware and store with chokidar to avoid restarting the app when these folders are created during development.

Bug fixes

  • Add store in context before hydrating the client (@evseevn via #442, fix #445)

v0.10.1

Improvements

v0.10.0

✋ Thanks a lot to all the contributors and people helping us to make Nuxt.js better! ✋

This should be the last release with a breaking change before the 1.0! You can see our roadmap here.

Breaking changes

  • data is now asyncData for pages components, it's not asyncData which receives the context and can be asynchronous, this is to respect the vue.js methods. It also fix the mixins with data. If you used the context in your data methods, please rename them to asyncData starting from this release. See updated documentation.
  • Static Generated: generate.routeParams is replaced by generate.routes which has to be an array of dynamics routes called by Nuxt, see updated documentation.

Features

  • Nuxt.js use Vue 2.2.5 and its rendering feature for CSS, no more CSS extracted, only the strict minimum CSS is now included in every page server-rendered!
  • Cache for bundle with hash name are now available, combined with the build.publicPath option, it's a perfect combo for hosting your .nuxt/dist/ files on any CDN!
  • Use the official babel-preset-vue-app for babel default configuration (suggestion by @cj in #271). You can now write JSX directly into your Vue components, see hello-world-jsx example.
  • New option build.publicPath, useful to set CDN url for production deployment or changing the /_nuxt/ path if you don't like it.
  • New option router.mode, let's you define the vue-router mode (default to 'history') (@cj via #272)
  • Add ~middleware alias
  • We can now specify a custom layout for the layouts/error.vue component, see #172
  • The app template is now customisable! Read more on the app.html documentation.
  • nuxt build accept now a -c or --config-file option now (@PierreRambaud via #392)
  • New option: generate.minify to customize html-minifier options.
  • We can now import CSS files directly in <script>, making Nuxt.js compatible with more external libraries.

Improvements

  • nuxt.render now always returns a Promise, even in dev mode when the build is not ready yet
  • Cleaner build/error outputs for terminal (@cj via #274)
  • Nuxt.js prefetch every code-splitted to improve the loading performance when navigating, you have nothing to do, simply upgrade and your app will be faster! (you can disable it via the nuxt.config.js with performance.prefetch: false)
  • We also added gzip support in production (you can disable it via the nuxt.config.js with performance.gzip)
  • store.replaceState(window.__NUXT__.state) is now made before importing the plugin. import store from '~store' in plugins (client-side) will have the store filled.
  • Add duration property in transition

Bug fixes

  • When switching layout, the page component are created only once (fix #214)
  • extendRoutes works with generate + windows paths (fix #275)
  • Middleware are called from error page and the layout is respected when redirected (fix #389)

Examples

v0.9.9

Bug fixes

  • Fix regression from v0.9.8 of routes order (#235)

v0.9.8

Features

  • The middleware feature is out 🔥 ! Read more on the documentation.

You can check the example-auth0 repository to see a real-life example. Otherwise, you can check the i18n example or the middleware example.

  • Wildcard route: _.vue will now create a route { path: '/*', name: 'all' }

Improvements

  • ~store links now to the store file which exports the vuex store instance, useful to require it in plugins to extend it, same for ~router. See documentation.
  • A progress bar is now displayed when building the application (thanks to progress-bar-webpack-plugin)

nuxt-build-progress-bar

  • No need to use a root div for the <nuxt> component (@sirlancelot via #229)

Bug fixes

  • Fix regression from v0.9.7: data was not called anymore when query changed, it's now fixed.
  • Fix bug: routes generated by file names were in the wrong order.

v0.9.7

Features

  • Add the --analyze (or -a) option to nuxt build, this will launch the bundle analyzer to let you see how to improve the size of your bundle. You can also use the build.analyze option, see documentation.
  • It is possible to extend the routes with the extendRoutes property in the nuxt.config.js file, see documentation.
  • You can customise the scrollBehavior of vue-router via nuxt.config.js, see documentation.

Improvements

  • nuxt <command> does not spawn a process anymore, this facilitates the communication between the processes (@yuchonghua via #147)
  • nuxt build and nuxt generate now exit with the status code 1 when the webpack build fail (fix #125)
  • Improve error handling in data and fetch to avoid recursive JSON error (fix #134)
  • nuxt.render sends back a promise to know when the page has been rendered (via #157)

Dependencies

  • Remove cross-spawn dependency
  • Use webpack v2.2.0
  • Upgrade Vue to v2.1.10 and vue-router to v2.1.3

Fixes

  • Fix dynamic page when calling error() and going back to another page (fix #96)
  • The data and fetch methods are not called anymore on hashchange
  • The progress bar works now when switching layout (fix #113)

v0.9.6

Features

  • Add the ability to generate store module with the file API (PR #92), see documentation

Shoutout to @Granipouss for this great feature!

Improvements

  • Use the { isJSON: true } option for serialize-javascript, which improves the performance of server-side rendering and force the component data to be plain object (better security)
  • enterToClass and leaveToClass has been added in the transition options
  • We can now define transition hooks in the nuxt.config.js- #34 (comment)

Patches

  • CSS Modules when building for production (disable extractTextPlugin on the server bundle) (fix #109)
  • Route names for parent routes (fix #119)
  • IE 10 compatibility (fix #93)

Dependencies

  • Upgrade Vue to v2.1.8
  • Upgrade webpack to v2.2.0-rc5, fix #98
  • All dependencies are up to date

v0.9.5

New Features

Using aync/await 🔥

You can use async/await in your components, the best use case is the asynchronous data method.

Example: pages/posts/_id.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async data ({ params }) {
    // We can now use ES7 async/await
    let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
    return { post: data }
  }
}
</script>

async/await example

See the updated documentation.

Extend webpack configuration

Add extend(webpackConfig, { dev, isClient, isServer }) option in the build configuration. This option let you extend the webpack configuration for your application, this is for advanced users.

Example: nuxt.config.js

module.exports = {
  build: {
    extend (config, { dev, isClient }) {
      // config is the webpack config
      // dev is a boolean, equals false when `nuxt build`
      // isClient is a boolean, let you know when you extend
      // the config for the client bundle or the server bundle
      config.devtool = (dev ? 'eval-source-map' : false)
  }
}

Scroll to the top in page components

Add scrollToTop: true/false option in page component (default: false), this option, when set to true will force the router to scroll to the top of the page (used for children routes).

Core updates

  • The build of Nuxt.js does not use babel-polyfill but directly the required polyfills

Bug fixes

  • Fix the component data on hot-reloading (bug fix) when navigating trough the app

v0.9.4

Bug fixes

  • Fix custom layouts with dash in their names (issue #78), fixed by @pi0 in #79

v0.9.3

🎄 Merry Christmas! 🎄

Custom Layouts

This release should be the last one with breaking a change

Nuxt.js let you now define custom layout for specific page now, to see it in action, please take a look at the our demonstration video.

⚠️ The main breaking changes are:

  • The <nuxt-container> component does not exist anymore (you can simply use a <div> to wrap your layout template)
  • The default application layout is layouts/default.vue instead of layouts/app.vue

🔥 Features:

  • The layout is loaded only when used (webpack code-splitting)
  • You can overwrite the custom layout in layouts/default.vue
  • You can set the which layout to use in the page component with the layout property
  • Define custom head elements depending of the layout

The default layout of Nuxt.js is:

<template>
  <nuxt/>
</template>

Please take a look at the updated documentation.

Bug fixes

Tests

More tests has been added to cover the bug fixes and also the layout feature.

Dependencies

  • Upgrade autoprefixer to v6.6.0
  • Upgrade debug to v2.5.1
  • Upgrade lodash to v4.17.3
  • Upgrade vue to v2.1.7
  • Upgrade webpack to v2.2.0-rc.2
  • Upgrade webpack-hot-middleware to v2.14.0

v0.9.2

Features

  • When a dynamic route is created in a folder without index.vue, the parameter will be optional:
pages/
--| users/
-----| _id.vue

Will create the route /users/:id?.

Improvements

  • nuxt.renderAndGetWindow(url) does not need jsdom as the first argument anymore, it will try to require it automatically (renderAndGetWindow is made to faciliate the tests with Nuxt.js)
  • Nuxt.js has now 100% of coverage

Bug fixes

  • Fix nuxt generate minified HTML which was not working because of the removeComments: true option
  • Fix nuxt generate on validate({ query, params }) method -> not server-render it when not valid
  • Fix crash when children has no data method
  • Fix validate() call on children routes

v0.9.1

Improvements

  • Upgrade dependencies (Vuex 2.1.1 & Vue 2.1.6)
  • Set preserveWhitespace: false in vue-loader configuration to avoid SSR mismatch error
  • Improve the call to data() when staying in the same view but the query changed