vue-renderer
vue-app
console.log
cli
typescript
pages/
creation when default page displayedvue-renderer
User-Agent
to Vary
header in modern server modeserver
builder
pages/
creation when default page displayedgenerator
types
babel.presets
vue-app
watchQuery
fixPrepatch
in-out transition fix (issue #5797) utils
serializeFunction
edge casevue-renderer
render.injectScripts
optionrender.ssrLog
for controlling SSR logscore
require.resolve
instead of Module
internalsbuilder
nuxtOptions
vue-app
general
auth-jwt
typescript
ci
general
general
core/resolver.js
packages/core/test/resolver
style
property when resolving (jsless/postcss-import-resolver#2)We all know the console.log
debugging method, but when working with universal applications, you have to remember that sometimes, your logs are in your terminal and not in your browser console.
This can be really annoying when developing a Nuxt.js application, starting with this version and running nuxt dev
, the ssr logs are now reported to your browser console:
store/
creation 👀Nuxt.js now detects when you created a store/
directory and will reload himself auto-magically so you don't have to restart it anymore.
PS: We also improved the serverMiddleware
watch to restart Nuxt.js and clean their cache
watch:restart
after watch:fileChanged
hook (#5620)watchQuery
option in routerViewKey
(#5516)spa:templateParams
hook (#5619)HardSourcePlugin
(#5653)serverMiddleware
paths (#5681)transition
to pageTransition
and deprecate it (#5558)babel.presets
and babel envName
(#5637)core-js@3
example in the readme (#5633)Only for typescript users, Nuxt.js v2.7 dropped support for node < 8.6 relate to ts-loader v6
context.app
type (#5701)extendRoutes
method type (#5700)ts-node
to register twice (#5699)nuxt.config
(#5574)req
and res
types (#5560)nuxt.config.js
changes and watch for all imported files (#5500)tsconfig.json
but do not use typescript (#5478)nuxt dev
(#5514)modulepreload
for modern mode when using spa generate (#5489)@nuxtjs/style-resources
package (#5499)router.base
support for banner url and loading screen (#5470) (nuxt/loading-screen#8)vuex-router-sync
(nuxt/devalue#8) (vuejs/vuex-router-sync#89)This version is addressing most of the problems of 2.5 and is without any breaking changes. For most of the users, a normal version upgrade would be enough. However, reading this guide can help to have a smooth upgrade.
yarn.lock
, package-lock.json
and node_modules
yarn outdated
command can be used.Because of how package managers (yarn, npm) work, a wrong version of a dependency from one of the other dependencies may be hoisted into node_modules
. Nuxt is strict about this and provides instructions for dependency resolution so please follow it.
The well-known problem is with firebase
package that requires to manually install node-fetch
dependency in your project.
We accidentially introduced a change that broke the prod build for many people who are using Nuxt programatically. This has been resolved through #5413. Sorry for the inconveniences!
Since core-js@2
and core-js@3
are both supported from babel 7.4.0, Starting from 2.6 Nuxt supports both versions (#5411). It is highly advised to stick with 2 (default) unless having a special dependency that needs 3. (Instructions for core-js@2
are not required but recommended)
core-js@2
yarn add -D core-js@2 @babel/runtime-corejs2
npm i -D core-js@2 @babel/runtime-corejs2
core-js@3
yarn add -D core-js@3 @babel/runtime-corejs3
npm i -D core-js@3 @babel/runtime-corejs3
Edit nuxt.config.js
:
export default {
build: {
babel: {
presets({ isServer }) {
return [
[
require.resolve('@nuxt/babel-preset-app'),
// require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
{
buildTarget: isServer ? 'server' : 'client',
corejs: { version: 3 }
}
]
]
}
}
}
}
Nuxt 2.5 users may only require to add ts-node
to the dependencies
Beta Testers : Replace
nuxt
bynuxt-edge
, and@nuxt/typescript
by@nuxt/typescript-edge
in the following instructions.
nuxt-ts
dependency (2.4 users only)yarn remove nuxt-ts
npm remove nuxt-ts
nuxt
and ts-node
to dependencies
:yarn add nuxt ts-node
npm i nuxt ts-node
@nuxt/typescript
to devDependencies
:yarn add -D @nuxt/typescript
npm i -D @nuxt/typescript
tsconfig.json
file. Nuxt will automatically generate it with defaults at first run, then you can edit it to fit your needs--quiet
option to nuxt generate
command (#5357) (Franck Abgrall) (91f4eb04)tsconfig.json
(#5412) (Pooya Parsa) (6ffc5c57)babel.config.js
by default (#5365) (Xin Du (Clark)) (64fa4244)getlocation
(#5337) (Johan Roxendal) (77dcfe6e)unsafe-inline
hasn't been specified (#5387) (Sam Bowler) (97db6a4b)15,000 line changes with 230 squashed commits by more than 30 contributors made this version possible! :heart:
No longer needed to install nuxt-ts
for typescript support. Nuxt.js officially supports TS by installing @nuxt/typescript
. Please see #5079 for reasons behind such migration.
Babel 7.4, Core-js v3, and Object.assign
polyfill for better browser support.
More than 30 fixes, refactors and performance improvements.
Use nuxt dev -o
to instantly open project in the browser and enjoy a cool loading screen:
Before v2.5, you were able to ignore files through an ignore prefix. As using the prefix over and over, ignoring files (and implementing custom structures) was a bit tedious on the long run. We came up with something more sophisticated: A .nuxtignore
file. Following the same specs as a .eslintignore
or a .gitignore
file, you can now define what files or folders to ignore through a .nuxtignore
file in your project root.
Examples and more info in the .nuxtignore docs
For a clean upgrade, please remove yarn.lock
/ package-lock.json
file from your project before upgrade.
If not already done, please explicitly call nuxt.ready()
after new Nuxt()
. nuxt.ready()
was always async
, but not awaiting the function call has now a severe impact.
const nuxt = new Nuxt(config)
++ await nuxt.ready()
nuxt-ts
dependency and use nuxt
+ @nuxt/typescript
. (Also nuxt-ts-edge
to nuxt-edge
+ @nuxt/typescript-edge
for edge users){
-- "nuxt-ts": "^2.4.2"
++ "@nuxt/typescript": "^2.5.0"
++ "nuxt": "^2.5.0"
}
build.useForkTsChecker
to build.typescript.typeCheck
. Please see #5079 for more details.build: {
-- useForkTsChecker: false // or ForkTsChecker options
++ typescript : {
++ typeCheck: false // or ForkTsChecker options
++ }
}
es6.object.assign
by default (Clark Du) (52fe145a).nuxtignore
(#4647) (Xin Du (Clark)) (59be77a2)devModules
option (#5102) (Jonas Galvez) (e87711c5)isClient
, isServer
, isStatic
(#5211) (Daniel Hritzkiv) (29c3c425)config.entry
(fixes #4849) (#5236) (Julien Dargelos) (82167651)futureEmitAssets
(#5003) (Alexander Lichter) (3997d504)nuxt-ts start
(#4906) (Kevin Marrec) (17cc12f0)v2.4.5 (2019-02-26)
asyncData
memory leak on client-side (#4966 (4086800)getNuxtChildComponents
method (#4969 (dbf7099)terser-webpack-plugin
to ^1.2.2
.webpack
to ^4.29.2
serializeFunction
for external imports (#4916)async
components correctly when using nuxt-ts
(PR #4886)extractCSS
in dev
mode (PR #4892)linkPrefetchedClass
(PR #4893)Due to a known problem (webpack/webpack#8656, #4869, #4839) users of npm should either remove package-lock.json
and reinstall before upgrade or use npm update acorn --depth 20 && npm dedupe
after upgrading to 2.4.0. yarn users should have no problems but removing yarn.lock
still recommended before the upgrade process.
We are really proud to announce Kevin Marrec (@kevinmarrec) as a new core team member of Nuxt.js. He is French 🇫🇷 and responsible for the TypeScript integration 💚
We now offer official support & consulting from the core team. We partnered with Otechie for the process and already did some beta-tests with selected companies.
Are you interested or curious? Learn more on https://otechie.com/nuxt :raised_hands:
We invite you to take a look at our nuxt/rfcs repository where we discuss the future of Nuxt and its vision.
Here are some interesting proposals if you want to learn more about the upcoming changes of Nuxt:
config/
directory and autocompleteStarting with this release, Nuxt will adhere to a formalized release plan (as good as possible). Also, an end of life for older major versions is defined within RELEASE_PLAN.md.
Quick summary:
We strongly invite you to read the RELEASE_PLAN.md for further details.
We want to specially thanks:
TypeScript support has landed!
In order to run Nuxt with TypeScript, we created a new distribution, called nuxt-ts (we also have nuxt-ts-edge). We want to thank @hmsk for his donation of the package name on npm ❤️
You can explore Nuxt TypeScript example or play with it directly in our Nuxt TS CodeSandBox.
For a more advanced example, you can look at the HackerNews-TS repo or play with it on CodeSandBox, made by @husayt & @kevinmarrec.
This work has been made by @kevinmarrec with the help of @pi0 & @Atinux.
:warning: Experimental: We are waiting for your feedback to keep improving it and breaking changes can occur without a semver major release. However, all changes will be documented properly
Nuxt.js will automagically prefetch the code-splitted pages linked with <nuxt-link>
when visible in the viewport by default. This hugely improves the end user performances, inspired by quicklink.
Demos are online and we recommend you to try it out to feel the difference:
Bonus: we added $nuxt.isOnline
and $nuxt.isOffline
which is reactive, so you can use it directly inside your components (see this example).
You can learn more about this feature in the associated PR #4574 and in the documentation.
store/
👀Save more development time with full HMR support for the store (
mutations
,getters
, andactions
).
This feature has been implemented by @manniL & @Atinux on PRs #4589, #4582 and #4791
If you are using VS Code, with this version, you will now have autocomplete for Nuxt.js components:
This feature has been implemented by @octref & @Atinux on PR #4524
If Nuxt wants to listen on a port which is already used, it will warn you in development and listen to a free port instead:
In production it will throw an error instead to avoid unwanted behavior:
This feature has been implemented by @ricardogobbosouza on PR #4428 with the help of @pi0 and @manniL.
Nuxt requires all peer like dependencies as a dependency for easier usage. Sometimes this causes unwanted behaviors when users explicitly add a specific version in their package.json which is incompatible with nuxt. This could also help to resolve popular Vue packages version mismatch error (#198, #669, #1084, #1414, #1851, #2079, #2406, #3454).
Nuxt is now able to automatically self-verify installed dependencies and warn with a proper message in case of detecting problems.
This feature has been implemented by @pi0 in PR #4669
When running nuxt start
, Nuxt will automatically detect if you built your app modern mode enabled. No need to run nuxt start --modern
explicitly anymore 🌟
This detection was created by @clarkdo on PR #4422
Until now, you used ssr: false
in your plugin declarations to disable server-side rendering. We decided to deprecate that option and introduce a mode
instead, which can be 'all'
, 'client'
or 'server'
. No worries, ssr
is still working (until Nuxt 3).
The new feature coming with the mode
is that you can define it by using the file suffix:
plugins/plugin.server.js
plugins/plugin.client.js
plugins/plugin.js
By adding the plugins to your nuxt.config.js
:
plugins: [
'~/plugins/plugin.server.js',
'~/plugins/plugin.client.js',
'~/plugins/plugin.js'
]
The declaration will be internally transformed to:
plugins: [
{ mode: 'server', src: '~/plugins/plugin.server.js' },
{ mode: 'client', src: '~/plugins/plugin.client.js' },
{ mode: 'all', src: '~/plugins/plugin.js' }
]
(If you specify the mode
manually, it will overwrite the suffix detection)
This feature has been implemented by @clarkdo on PR #4592
Nuxt modules can now include bin
scripts that are recognized by Nuxt's CLI.
Here's an example of my-module/bin/command.js
:
#!/usr/bin/env node
const consola = require('consola')
const { NuxtCommand } = require('@nuxt/cli')
NuxtCommand.run({
name: 'command',
description: 'My Module Command',
usage: 'command <foobar>',
options: {
foobar: {
alias: 'fb',
type: 'string',
description: 'Simple test string'
}
},
run(cmd) {
consola.info(cmd.argv)
}
})
The command could be run with:
npx nuxt command arg1 arg2
You can learn more about that in the modules command documentation.
:warning: Experimental: We are waiting for your feedback to keep improving it and breaking changes can occur without a semver major release. However, all changes will be documented properly <3
This feature has been implemented by @galvez on PR #4314 with the help of @pi0.
You can now use lang="postcss"
in your Vue components. Postcss has applied to all your styles anyway (e.g. to resolve aliases like ~
) but the lang
attribute enables autocomplete and syntax highlighting for some IDEs.
This feature has been implemented by @manniL on PR #4417.
We are concerned to improve the Developer Experience ("DX") with each release. This small change allows you to omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css
array inside your nuxt.config.js
. For the plugins
or serverMiddleware
key, this is already possible.
This feature has been implemented by @manniL on PR #4671.
We made a full rewrite of how SSR bundle is packaged.
This means better performance, less memory overhead, fewer OOM crashes and easier SSR bundle debugging.
_ | Before | After | Diff |
---|---|---|---|
Dist | 8.2M | 7.2M | -1M / 12% |
Dev | 281 MB (RSS: 439 MB) | 237 MB (RSS: 354 MB) | -44M / 16% (RSS: -85M / 19%) |
Start | 106 MB (RSS: 169 MB) | 71.7 MB (RSS: 137 MB) | -34M / 32% (RSS: -32M / 19%) |
This feature has been implemented by @pi0 on PR #4439.
process.modern
can be used for distinguishing modern environment.server.timing
to give Server-Timing header, useful for monitoring and performances overview (PR #4800)HardSourceWebpackPlugin
by hardSource: true
in hardSource
of nuxt.config.js
scrollToTop
to false
in pages (PR #4564)nuxt-link
and nuxt-child
(n-link
and n-child
) are available now (PR #4525)PascalCase
as recommended by the Vue styleguide (PR #4396)headAttrs
are now supported for the appTemplate (PR #4536)crossorigin
attribute (PR #4472)compression
middleware (PR #4381)FriendlyErrorsWebpackPlugin
overlay (PR #4381)exclude
option to exclude pages from being generated
(in static mode) but still get rendered via fallback/SPA (PR #4754)build.hotMiddleware.client
(PR #4796)runInNewContext: true
for nuxt dev (#4508) middleware
correctly when using Vue.extend
in layout (fix #4724)undefined
script in modern mode & generated (https://github.com/nuxt/nuxt.js/commit/0a21d4b34ca2f3bde2a54452f3d6831a0b1ee362)publicPath
is falsy (PR #4365) $nuxt.$loading
typedefs (#4778)loading
property to Component options (#4786)(Please skip v2.3.3
release. It was mistaken.)
nuxt-start
command should always start nuxt in production mode (#4384) modern=true
or false
didn't work as expected (#4378) triggerScroll
event after changing the layout (#4399) 0
values for progress bar attributes (#4397)vue-router
from 3.0.1
to 3.0.2
(#4394)@nuxt/friendly-errors-webpack-plugin
from 2.3.0
to 2.3.2
mini-css-extract-plugin
from 0.4.4
to 0.4.5
webpack
from 4.26.0
to 4.26.1
vue-meta
from v1.5.5
to v1.5.6
opencollective
dependency from nuxt-start
(#4415) lodash
dependency from packages to reduce the nuxt-start
size (#4411)publicPath
is falsy (#4365)With v2.3, Nuxt.js is splitted into smaller packages (Aka a mono-repo). This means smaller packages, independent versioning support and ability to replace any part of Nuxt.js without dirty hacks. Before this release, we carefully tested the latest updates using edge release channel against real-world projects and there should be no breaking changes.
Please note that for upgrading Nuxt.js just changing version inside package.json
is not enough. Please use yarn upgrade
or npm upgrade
so that the final directory structure of node_modules
will be correct. In case of problems clean up node_modules
and yarn.lock
/package-lock.json
. Still having problems? open an issue in cmty!
nuxt.config.js
(PR #4208)routes.js
(#4121)build.extractCSS.allChunks
(#4097)require.resolve
to get the path of babel-loader (#4150)postcss.order
to change order of postcss plugins(#4318)nuxt help [cmd]
) (#4248)nuxt --help
(#4245)nuxt.config.js
(#4021)styleResources
because of performance issues. Use our new community module instead (it's a drop-in replacement) (#4302)asyncData
, fetch
and middleware
methods. Use Promises or async/wait instead. (#4256)@nuxt/core
, @nuxt/server
and @nuxt/vue-renderer
(#4202)@nuxt/builder
and @nuxt/webpack
(#4171)@nuxtjs/babel-preset-app
into nuxt mono-repo and republish it as @nuxt/babel-preset-app
(#4205)@nuxt/config
(#4212)eslint-config
into own package (#4108)<nuxt-child/>
accepts keep-alive-props
as props of keep-alive
(PR #4067)loading.throttle
as an option (PR #3953)undefined
values in vuex store (PR #3913)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
😉
.nuxt
, node_modules
, yarn.lock
and package.lock.json
nuxt.config.js
, modules
and serverMiddleware
to use import/export
instead of require
package.json
, if so please upgrade them to match Nuxt used versionsnpm install
or yarn install
npm outdated
or yarn outdated
and manually update any other dependency with care.nuxt/dist/client
instead of .nuxt/dist
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
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.jsbuild.publicPath
need to upload built content to .nuxt/dist/client
directory instead .nuxt/dist
.export/import
syntax in nuxt.config.js
, serverMiddleware
and modules
.postcss-preset-env
instead of postcss-cssnext
(notes) (PR #3291), config build.postcss.preset
is for postcss-preset-env options
css-loader
upgrade, use ~assets
instead of ~/assets
for alias in <url> CSS data type
, e.g., background: url("~assets/banner.svg")
(PR #3741)watchQuery
lets you observe query strings and execute component methods (asyncData, fetch, validate, layout etc) on change (3d49d8d2905796f063b171fdd935da721622fe05)nuxt.config.js
(PR #3766)loading: false
option to pages, see example, (PR #3629)actions.js
, mutations.js
, getters.js
and state.js
) along with index.js
(PR #3636)server
option in nuxt.config.js
to set HOST
and PORT
(PRs #3701)NUXT_HOST
, NUXT_PORT
environment variables (PR #3651)nuxt.config.js
(PR #3655)nuxt.config.js
(PR #3734)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
render:context
hook (PR #3294)background-color
to background
in loadingIndicator
(PR #3656), so you can use an image or some gradient for your background in SPA mode!loadingIndicator
when using IE (PR #3779)watch
option to watch custom files to restart the Nuxt.js server (default: nuxt.config.js
and serverMiddleware
files) (PRs #3633 and #3718)app.html
template in nuxt.config.js
(PR #3678)store.registerModule
to work seamlessly with SSR (#3909)vendor
array isn't used anymore because of Webpack 4 render.gzip
option. Use render.compressor
instead.Thanks to @clarkdo and @ederchrono for this fix ❤️
--no-generate
option to nuxt build
with SPA mode (PR #4127)static.prefix
(PR #2755)render:route
hook (PR #2754)ssrContext
into createRouter
and createStore
(see PR #2831)Big thank you too all the contributors for these amazing pull requests 👏
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.build. maxChunkSize
to limit chunks size for agressive code splitting (PR #2687).jsx
files (PR #2628, fix #131)options.ignore
option (https://github.com/nuxt/nuxt.js/commit/347fa3e9fd878f0aca19cf9e509ff555894f8f86)render.scp
(Support of external script, PR #2608), see also https://github.com/nuxt/nuxt.js/commit/95c85bba62d5fbc4a9128cb19e01b9ad85a76e74path
property) (https://github.com/nuxt/nuxt.js/commit/d444f2a5b1d1ecbbb3804d4e8f0a1bbc5c9d8671)<noscript>
tags to the footer with head
(PR #2674)redirect
to external urls works with nuxt generate
now (fix #2570)~
, ~~
, @
and @@
) to postcss-import #2617 (fix #1453)error
undefined on plugins error for server-side (https://github.com/nuxt/nuxt.js/commit/00f98c150fe03b707bcc5949e66152a5b69dd234)watchQuery
on examples/routes-transitions (PR #2633)(1)
on any unwanted error with modules (Except nuxt dev
)script-src
safe inline (PR #2549) via render.csp
option in nuxt.config.js
nuxt-start
package.json with main package.json (PR #2556) (nuxt-start is still WIP)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 :heart:
Medium article: https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972
:warning: 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.
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 :nail_care:
We also deprecated dev
property inside build.extend()
in flavour of isDev
.
-
in front of its filename (example: pages/-ignored.vue
) (PR #2417)route.meta
(array of matched page .meta
) into context, useful for middleware (see details)this.$router
and this.app
inside your store actions!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.spa
: Respect mounted hook on first render (fix #1629)--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) #1840ENV
variable into app.html
, corresponds to env
from your nuxt.config.js
redirect
), it also improves perfs!nuxt dev
experience with faster and more stable reloadsoptions.modulesDir
as Array.gitignore
#1860/index.html
exists when copying to 200.html #1937head.titleTemplate
with function is now working (fix #1886)inject
: https://github.com/nuxt/nuxt.js/issues/1695#issuecomment-335074850src
in templates (fix #2008 via #2016)no-ssr
to v0.2.1 #2181