Releases: nuxt/nuxt
v0.9.7
Features
- Add the
--analyze
(or-a
) option tonuxt build
, this will launch the bundle analyzer to let you see how to improve the size of your bundle. You can also use thebuild.analyze
option, see documentation. - It is possible to extend the routes with the
extendRoutes
property in thenuxt.config.js
file, see documentation. - You can customise the
scrollBehavior
of vue-router vianuxt.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
andnuxt generate
now exit with the status code 1 when the webpack build fail (fix #125)- Improve error handling in
data
andfetch
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 tov2.1.3
Fixes
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
andleaveToClass
has been added in thetransition
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>
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
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 oflayouts/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
- Routes generations with complex pages files tree (see the test/fixtures/dynamic-routes/)
Tests
More tests has been added to cover the bug fixes and also the layout feature.
Dependencies
- Upgrade
autoprefixer
tov6.6.0
- Upgrade
debug
tov2.5.1
- Upgrade
lodash
tov4.17.3
- Upgrade
vue
tov2.1.7
- Upgrade
webpack
tov2.2.0-rc.2
- Upgrade
webpack-hot-middleware
tov2.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 needjsdom
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 theremoveComments: true
option - Fix
nuxt generate
onvalidate({ 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
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 afunction (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 thevue-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 onnuxt
(#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 #25nuxt.renderStream
andnuxt.renderRouteStream
, see #26- Generate filenames with chunkName for avoid CDN caching
- A complete documentation on nuxtjs.org
- Real-life examples
- Improvements and bug fixes