Release Notes

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

v0.9.0

Breaking Changes

The 0.9.0 is an important release, we can now define dynamic routes without the nuxt.config.js file, please read more in examples/custom-routes/

The router.routes object does not exist anymore, this gives a better readability for any Nuxt.js project without removing any features.

We also introduce a validate({ params, query }) method to validate the routes params/query before entering the the data method, if you return false, the error page will be displayed with a 404.

Also, we can now define children routes by creating a directory with the same name as the file, example:

-| pages/
---| parent/
-----| child.vue
---| parent.vue

And then, in your parent.vue component, you can add <nuxt-child></nuxt-child> to display the child component (when navigating to /parent/child)

Features

  • JavaScripts hooks can be defined in the transition property. To see the list of props and events: https://vuejs.org/v2/api/#transition transition can also be a function (to, from) { return 'fade' } so you can set a different transition depending of the route destination
  • Introduction <nuxt-link> which is exactly the same as <router-link> but in the future, will add lazy-loading and more 🔥

If you were using the class .router-link-active, please replace it to .nuxt-link-active, or if you want to keep the router-link-active class, update your nuxt.config.js like this:

module.exports = {
  router: {
    linkActiveClass: 'router-link-active'
  }
}

Improvements

  • You can import components without giving the .vue extension now (fixed #59)
  • In development mode, when the nuxt.config.js file changed with a syntax error, the server will not crash (fixed #60)
  • Upgrade to webpack 2.2.0-rc.0
  • build.babel options are given to the vue-loader as well. Now you can write JSX in your vue components, see https://gomix.com/#!/project/nuxt-hello-world-jsx

Bug fixes

  • Fix importing .js file with ES6 syntax in .vue files (Fix #63)
  • Use cross-env for setting NODE_ENV=production on Windows (#65)
  • Avoid the renderer error when nuxt.config.js change on nuxt (#66)

What's next?

Before launching the 1.0.0, we are working on:

  • 100% coverage with a lot of tests because it's really important for us to deliver a reliable framework
  • The ability to add middleware to your routes, useful for having routes that need the user to be authenticated first
  • config.build.publicPath, see #25
  • nuxt.renderStream and nuxt.renderRouteStream, see #26
  • Generate filenames with chunkName for avoid CDN caching
  • A complete documentation on nuxtjs.org
  • Real-life examples
  • Improvements and bug fixes

v0.8.8

Improvements

  • Nuxt.js is now compatible with node 4 and higher (Using babel and webpack)
  • Add test and coverage (ava, jsdom and nyc)

v0.8.6

Bug fixes

  • Fix error.vue layout path with srcDir (#54)

v0.8.5

Fix

  • Push the srcDir feature to npm (fix #53)

v0.8.4

Features

  • Add srcDir option allowing you to have your pages directory and other source folder for Nuxt.js in a sub directory, see #44 for more details (credits to @cj)

Improvements

  • Optimise generate() when generating +100,000 paths, calling them 500 by 500 to avoid out of memory

v0.8.3

Bug fixes

  • Fix layouts/error.vue which was not assigned to the right variable when existing

v0.8.2

Bug fix

  • Set window.onNuxtReady before importing the plugins so we can use this hook inside them

v0.8.1

Feature

  • Add routeChanged event for $nuxt, you can use it like this in your plugins:
if (process.BROWSER_BUILD) {
  // set google-analytics script here...
  // and then:
  window.onNuxtReady((app) => {
    app.$nuxt.$on('routeChanged', (to, from) => {
      ga('set', 'page', to.fullPath)
      ga('send', 'pageview')
    })
  })
}

v0.8.0

Breaking Changes

  • The layouts has been moved to the layouts/ directory for better architecting. Which have to move your pages/_app.vue to layouts/app.vueand pages/_error.vue to layouts/error.vue
  • When used programmatically, you now have to call nuxt.build() because new Nuxt(options) is not launching anymore the build automatically.
const Nuxt = require('Nuxt')
const nuxt = new Nuxt(options)
nuxt.build()
.then(() => {
  app.use(nuxt.render)
})

Features

  • Add nuxt.renderAndGetWindow(jsdom, url) method to render the url and sent back the window object, useful for test purposes (see examples/with-ava/)

Examples

v0.7.9

Features

  • Add env in the data context argument
  • Add $nuxt.error({ statusCode, message }) method in the client side for calling the error page

Improvements

  • Add generated name in the routes generates by the pages directory (ex pages/index.vue will me the index name, pages/foo/bar.vue will be foo-bar)

Fix

  • Fix router.base when set to '/' or undefined, avoid generating 2 //

Misc

v0.7.8

Improvements

v0.7.7

Improvements

  • We don't need to bind nuxt.render.bind(nuxt) anymore to use nuxt.render as a middleware (Issue #18)

v0.7.6

Bug fixes

  • Make sure to generate the .nojekyll file empty

v0.7.5

Features

  • nuxt generate now adds a .nojekyll file in the generated folder to tell Github Pages to not ignore the _nuxt directory (see github pages docs about it)

Updates

v0.7.4

Breaking Changes

  • pages/_error-debug.vue has been removed, now only pages/_error.vue should be defined

Improvements

  • Add Content-Length header in the server when rendering the html

v0.7.3

Features

  • You can now access the application path with ˜, useful if you have others folders, see #16
  • Add env property in nuxt.config.js, you can now define environment variables that will be shared across the components (client and server side), see #16
  • window.onNuxtReady(callback) is now a function, useful for attaching multiple functions to it, when is the app will be mounted, the callback will be called with the root application in the first argument
window.onNuxtReady(function (app) {
  // app is the $root vm
})

It is useful for test purposes or when defining plugins to launch when the app is mounted.

v0.7.2

Bug fixes

  • Use babel preset 2015 by default in .vue files to have the best compatibility possible in the browsers

v0.7.1

Improvements

  • Remove vue-loaders js and css settings (let vue-loader handle it)
  • Call the store.replaceState once the app is instantiated

v0.7.0

Breaking Changes

  • If you were using process.BROWSER to add special code for the client bundle, please use process.BROWSER_BUILD now. Also, process.SERVER_BUILD has been added too.

Features

  • Add alias ~router to import the vue-router router created by nuxt.js (can be useful to use vuex-router-sync for example.

Improvements

  • Custom routes path with regexp are now working

Dependencies

  • Upgrade vue to 2.1.2
  • Upgrade vue-meta to 0.5.2
  • Remove glob-promise and only use glob instead

PS: working also on nuxt generate, to generate modern static websites with html files generated => Nuxt.js apps could be hosted on Github Pages 🔥

v0.6.9

Update outdated dependencies

  • glob-promise to v2.0.0
  • css-loader to v0.26.0

Check Nuxt.js dependencies on https://david-dm.org/nuxt/nuxt.js

v0.6.8

Upgrade to Vue 2.1.0 and Vue-loader 10.0.0

  • Remove process.env.VUE_ENV=server since added automatically by vue-server-renderer now
  • Upgrade vue-server-renderer to v2.1.0
  • Add vue-template-compiler dependencies to ^2.1.0

v0.6.7

Feature

  • Add option build.postcss, defaults to:
[
  require('autoprefixer')({
    browsers: ['last 3 versions']
  })
]

You can update this option in nuxt.config.js, example:

module.exports = {
  postcss: [
    require('postcss-cssnext')()
  ]
}

This resolve the issue #14

v0.6.6

Fix

  • Force to apply new data when using the same component in different routes (Vue.js patch system was not setting the $data)
  • Hot reloading when updating the template but data and fetch not updated

v0.6.5

Routes transitions 🔥

Demonstration in video: https://www.youtube.com/watch?v=RIXOzJWFfc8

You can now add transition between routes thanks to the transition key, see more details on examples/routes-transitions/

Improvements

  • You can configure the port of the nuxt.js server via the package.json too #11