Migration guide for 2.0.0

Your migration is mostly straightforward as Nuxt 2 does not makes breaking changes. So you can try your chance and simply upgrade to Nuxt 2 using yarn add nuxt@^2.0.0 or npm install nuxt@^2.0.0 😉

The long but peaceful approach

• Carefully read release notes
• If you are using a VCS for your project commit and push latest changes and then checkout into a new branch
• Stop any Nuxt process
• [optional] Delete all directories .nuxt, node_modules, yarn.lock and package.lock.json
• Ensure you are using the latest node version (Node 10.x and NPM >= 5 are recommended)
• Upgrade nuxt.config.js, modules and serverMiddleware to use import/export instead of require
• Ensure webpack and vue dependencies are not explicitly set inside your package.json, if so please upgrade them to match Nuxt used versions
• Do npm install or yarn install
• [optional] Use npm outdated or yarn outdated and manually update any other dependency with care
• If you have a CDN deployment system, please make sure you have updated CI/CD configurations to publish .nuxt/dist/clientinstead of .nuxt/dist
• If you are using build.extend, make sure your changes are compatible with Webpack 4.

Still Having problems? Make a bug report at CMTY or reach us using Discord

Major changes

• We now use Webpack 4. We announced 2.x and started publishing latest changes as nuxt-edge package at March. But we wanted to make sure that most of the plugins were updated and stable before releasing a stable version of Nuxt.js
• Due to server/client artifact isolation (PR #3758), external build.publicPath need to upload built content to .nuxt/dist/client directory instead .nuxt/dist.
• ESM is supported everywhere you can now use export/import syntax in nuxt.config.js, serverMiddleware and modules.
• Upgraded to use Babel 7 (PR #3667)
• Use postcss-preset-env instead of postcss-cssnext (notes) (PR #3291), config build.postcss.preset is for postcss-preset-env options
• Introducing nuxt-start for runtime only and nuxt-legacy to support Node < 8
• Due to css-loader upgrade, use ~assets instead of ~/assets for alias in <url> CSS data type, e.g., background: url("~assets/banner.svg") (PR #3741)

Features

• watchQuery lets you observe query strings and execute component methods (asyncData, fetch, validate, layout etc) on change (3d49d8d2905796f063b171fdd935da721622fe05)
• You can now Ignore pages with a prefix (PR #2594)
• Internal hooks can be set hierarchically in nuxt.config.js (PR #3766)
• Added loading: false option to pages, see example, (PR #3629)
• New stores modules can now be built by a combination of files (actions.js, mutations.js, getters.js and state.js) along with index.js (PR #3636)
• Support functional filenames for webpack assets (PR #3787)
• Server middleware watchers support (PR #3718)
• HTTPS and Unix sockets support out of the box (PR #3831)
• Support server option in nuxt.config.js to set HOST and PORT (PRs #3701)
• Support using NUXT_HOST, NUXT_PORT environment variables (PR #3651)
• Configure Vue directly in nuxt.config.js (PR #3655)
• Add preset option for postcss in nuxt.config.js(PR #3734)
• Make compression middleware customizable (#3863)
• Environment variables starting with NUXT_ENV_ will be automatically included in process.env (#3862)
• no-ssr has been upgraded to vue-no-ssr 1.0.0, it supports placeholderTag

Enhancements

• Fix HTML script tag in core/renderer to remove W3C warning (PR #2971)
• Add render:context hook (PR #3294)
• Replace background-color to background in loadingIndicator (PR #3656), so you can use an image or some gradient for your background in SPA mode!
• Correctly center loadingIndicator when using IE (PR #3779)
• Add watch option to watch custom files to restart the Nuxt.js server (default: nuxt.config.js and serverMiddleware files) (PRs #3633 and #3718)
• Isolate client and server artifacts (PR #3758) for better security of SSR bundles.
• Using webpackbar and consola for a sexier CLI experience and better CI compatibility.
• Change webpack asset names to names for development and to filehashes for production. (PR #3789). Also, prevent assets name collision in dev mode (Issue #3786)
• Call global Vue errorHandler in fetch and asyncData (PR #3652, #3781)
• Error page rendering before redirect (PR #3782)
• Disable template literals in lodash templates (PR #3753)
• Display proper error when the specified plugin isn't found (PR #3672)
• Customize the path to your app.html template in nuxt.config.js (PR #3678)
• Quiet option when building your Nuxt app (PR #3705)
• Minify extracted CSS assets (#3857)
• Add tests to check for changed files (#3893)
• Overwrite store.registerModule to work seamlessly with SSR (#3909)
• Add throttle option to skip progress for fast loads (#3886)

Deprecated

• The vendor array isn't used anymore because of Webpack 4
• We removed DLL support as it was not stable enough and Webpack 4 is much faster now.
• Obsolete AggressiveSplittingPlugin (PR #3545)
• The render.gzip option. Use render.compressor instead.

Internals

• ESLint: Consistent parens in arrow functions (PR #3630)
• ESLint: Require await in async function (PR #3676)
• ESLint: Force dot-notation where applicable (PR #3677)
• ESLint: Force if braces (no lonely ifs) (PR #3685)
• ESLint: Prohibit var (PR #3681)
• ESLint: Prefer const over let (PR #3650)

Fix

• Upgrade vue for fixing XSS vulnerability on SSR

Patch

• Upgrade vue-loader from 13.7.0 to ^13.7.2 for prettier issue (#3385)

Minor

• Feature: You can now customize the directories names (see PR #2748)
• Feature: add static.prefix (PR #2755)
• Feature: you can now add a layout with a module (see PR #2790)
• Hooks: add context as third parameter of render:route hook (PR #2754)
• Multiple policy support for Content-Security-Policy #2736
• Inject ssrContext into createRouter and createStore (see PR #2831)

Fixes

• fix: add the possibility to set staging environment via NODE_ENV (PR #2742)
• Fix: Changing only the query on a non-dynamic component was not updating page data (fix #2737)

Misc

• Refactor cli (PR #2783)

Thanks

Big thank you too all the contributors for these amazing pull requests 👏

Minor

• Add SPA fallback template, this is a killer feature for static generated websites, please read #2690
• Check expected node version #2718
• Support scrollBehaviour with transitions (fix #1376), big thank you to @homerjam for his help on this!

Fixes

• Support auto import of .jsx files (PR #2696)

Fixes

• fix: Add postcss-import-resolver in dependencies

Minor changes

• Add keep-alive prop to <nuxt/> and <nuxt-child/>, see with-keep-alive example, be aware that it's still a WIP and it can have some side effects to your application.
• Add: optional build option build. maxChunkSize to limit chunks size for agressive code splitting (PR #2687)
• You can now use .jsx files (PR #2628, fix #131)
• Add options.ignore option (https://github.com/nuxt/nuxt.js/commit/347fa3e9fd878f0aca19cf9e509ff555894f8f86)
• Improve render.scp (Support of external script, PR #2608), see also https://github.com/nuxt/nuxt.js/commit/95c85bba62d5fbc4a9128cb19e01b9ad85a76e74
• Improve 404 error message in development on server-side rendering (add path property) (https://github.com/nuxt/nuxt.js/commit/d444f2a5b1d1ecbbb3804d4e8f0a1bbc5c9d8671)
• Feature: It's now possible to add <noscript> tags to the footer with head (PR #2674)

Patches

• Fix: redirect to external urls works with nuxt generate now (fix #2570)
• Fix: ssrContext.error is not a function (PR #2610)
• Fix: Add aliases (~, ~~, @ and @@) to postcss-import #2617 (fix #1453)
• Fix: error undefined on plugins error for server-side (https://github.com/nuxt/nuxt.js/commit/00f98c150fe03b707bcc5949e66152a5b69dd234)
• Fix: multiple components in one route (PR #2679)
• Fix: resolve exact route prior to index (PR #2673)
• Fix: Handle redirect in middleware to avoid calling asyncData & fetch, fix #542 and #2665

Examples

• Add examples/with-keep-alive/
• Add examples/custom-scroll-behavior/
• Use watchQuery on examples/routes-transitions (PR #2633)

Patches

• fix(module): default module options to empty object
• misc: use console.warn for warnings
• style: format with prettier
• fix: logError is not a function #2577.
• fix: exit with code (0) on successful nuxt-build #2569.
• fix: regression with module.addVendor with array #2574.
• test: add failing test for #2574

Improvements

• Many improvements for better CLI error handling
• CLI commands exit with code (1) on any unwanted error with modules (Except nuxt dev)

Minor

• Add support for CSP script-src safe inline (PR #2549) via render.csp option in nuxt.config.js
• Align nuxt-start package.json with main package.json (PR #2556) (nuxt-start is still WIP)

Patches

• fix: Prioritize nested node_modules, fix #2558
• fix: Nested redirect in spa mode
• fix: Cannot read property 'call' of undefined when extractCSS is true, fix #2551
• fix: Improve loading bar to handle page redirects (even to origin page), fix #2563

1.0.0 is out! 🎉

It's been a long run and we are really proud to announce the official 1.0 release. Thank you so much for your support and we are looking forward to hear your feedback ❤️

Medium article: https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972

Breaking changes

⚠️ Minimum Node.js version required for Nuxt.js is also increased to 8.0.0 (Current LTS). This allows notable security and performance improvements for both Nuxt and SSR rendering by using native async/awaits and making development easier. So don't forget to upgrade Node to the latest version in both server and your local environment ;)

We have a new internal hook system now, some modules can be broken with 1.0 if they were relying on this.nuxt.plugin(), instead, they will have to use this.hook(), see module hooks documentation.

We removed the internal extensions for .ts, if you want to use TypeScript into Nuxt.js, we recommend you to check out our typescript example.

Deprecation

For the below depreciation, it will still work but you will get a warning to tell you to change your code to the new value.

For better bundling experience for server-side and client-side, we deprecated context.isClient and context.isServer in flavor of process.client and process.server. Since these variables comes from our webpack configuration, it will optimize your client-side and server-side bundles magically 💅

We also deprecated dev property inside build.extend() in flavour of isDev.

Features

• We are now ignoring files starting with a - in front of its filename (example: pages/-ignored.vue) (PR #2417)
• Layout transitions #1620
• Add route.meta (array of matched page .meta) into context, useful for middleware (see details)
• Middleware: you can now define middleware as a function, see example
• Store: you now have access to this.$router and this.app inside your store actions!
• You can set body: true, in your head.script[] to move your scripts at the end of <body> (see example)
• nuxt generate --no-build: Useful for conditions when just dynamic routes are being changed. This makes incremental builds much faster.
• Hooks: you can extend even further Nuxt by using hooks now, the documentation is coming soon.
• New configuration: build.styleResources, check out our style-resources example.

Improvements

• Upgrade Vue to 2.5.x #1723 #1868
• Upgrade to Vue-Router & Vuex to 3.0
• No more babel warning #1698
• Adds support for folders in /layouts #1865
• Mode spa: Respect mounted hook on first render (fix #1629)
• Add --version & -v flag to nuxt binary (you can do npx nuxt -v to know which version of nuxt.js you are using in your project) #1840
• Improve error message when a plugin is not found #1846
• Add ENV variable into app.html, corresponds to env from your nuxt.config.js
• Context is shared across plugins and pages (useful for axios interceptor with redirect), it also improves perfs!
• Improved plugins system
• Better nuxt dev experience with faster and more stable reloads
• SSR performance improvements thanks to node async/awaits
• Allow redirects to external URL (#2265)
• Support options.modulesDir as Array
• Upgraded uglifyjs with parrallel options as default for faster builds

Fixes

• Fix error handler if error message is readonly #1673
• Fix code typos #1613
• Update .gitignore #1860
• Generate: don't assume /index.html exists when copying to 200.html #1937
• head.titleTemplate with function is now working (fix #1886)
• Fix nuxt-start dependencies
• Fix Memory leak with inject: https://github.com/nuxt/nuxt.js/issues/1695#issuecomment-335074850
• Fix unexpected state resetting on nested views (fix #1408 via #1914)
• Fix layouts in SPA mode (#1929)
• Fix video src in templates (fix #2008 via #2016)
• Improve Webpack rebuilding without reason (https://github.com/nuxt/nuxt.js/commit/6dfe6604129b1eff7a6991d6b4259a723181de19)
• Update no-ssr to v0.2.1 #2181

Fix

• Handle 404 in SPA mode (https://github.com/nuxt/nuxt.js/commit/9b8d3f11e7af1968e5e6151c055d2b3fe60d1303)
• Hot fix for asyncData in SPA mode

Improvements

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

Features

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

Fix

• Move back store hydration before plugins execution
• Fix process.env to have nested keys (https://github.com/nuxt/nuxt.js/commit/20eb5a5eb08334355c745ad8c7f8eef4dc0ac695)
• Fix spa mode with head property (https://github.com/nuxt/nuxt.js/commit/1fcf3e685ec0bee7079c984cdd0cfa6a80e8be2d)

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:

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 [email protected], you can now use ~/assets/... into your <style>

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)

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
       }
    }
 } 
}

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/)

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)

⚠️ 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

• Generate 100% valid HTML code
• IE9+ compatible
• Perfs: ETAG and HTTP2 headers
• Modules system
• mode: "spa" to create SPA (WIP)
• Add -p (port) and -H (host) option for nuxt dev and nuxt start
• Dynamic Component Injection with Webpack (see example)
• Add nuxtChildKey , see https://github.com/nuxt/nuxt.js/pull/1022#issuecomment-313870004

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)

• 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