The Intuitive Vue Framework.
We've refactored nuxi
using unjs/citty and this marks the first Nuxt release that depends on the new version, safely in its own repository. We have grand plans for this - check out some of the features + roadmap discussions in nuxt/cli and please feel free to contribute!
Nuxi is now decoupled from the main nuxt
version - we plan to iterate and release nuxi more quickly in future so you can expect new things coming soon!
Response
With improvements in unjs/h3 and unjs/nitro, it's now possible to directly return a Response
object from server routes, meaning it's also possible to return and handle streams natively in Nuxt.
👉 Check out the full detail in the unjs/h3 and unjs/nitro release notes.
This release comes with a couple of improvements in rendering HTML responses from the server. We now determine whether to preload/prefetch resources at build time (so you can customise this in the build:manifest
hook). We also now manage rendering the HTML for them directly in unhead
(#22179), which means you can configure the order for <link>
, <meta>
, <script>
, <style>
, and more. And - in our preliminary testing - it's even faster!
It's possible to opt-in to upcoming head improvements with the experimental.headNext
flag. This currently includes a new ordering algorithm based on capo.js (#22431) and allows enabling future optimisations as they are released in unhead
:
export default defineNuxtConfig({
experimental: {
headNext: true
}
})
We'd love your thoughts - you can respond with any issues/feedback in this discussion.
In your Nuxt config you can now use $client
and $server
shortcuts to easily define configuration that is specific to just the Vite client/server (#22302) or webpack client/server (#22304) builds. This previously was only possible with the vite:extendConfig
and webpack:config
hooks.
For example:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[hash].js',
assetFileNames: '_nuxt/[hash][extname]',
entryFileNames: '_nuxt/[hash].js'
}
}
}
}
}
})
We've chosen to unpin Vite from minor versions, meaning whenever Vite releases a new feature version you can opt-in straight away. Vite 4.4 brings a lot of exciting things, including experimental Lightning CSS support - and much more!
👉 Check out the Vite release notes for more.
We now use purely relative paths in the generated tsconfig.json
instead of setting a baseUrl
. This means better support for dev environments like docker images where the absolute path may not match your IDE (#22410).
We also set a couple of additional compiler flag defaults to match Vite/TS recommendations (#22468).
Plus, you should now get type hinted access to layouts in setPageLayout
and also in <NuxtLayout name>
(#22363).
If you've ever got an issue with 'Nuxt context unavailable' this might be one for you. We now support native async context for Bun and Node under an experimental flag, in both Nuxt and Nitro (#20918).
This enables using Nuxt composables on the server without needing to ensure they are being called directly in a setup function. It also allows the same in Nitro, with a new useEvent()
utility that is usable in server routes.
To try it out, you can enable experimental.asyncContext
:
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
We've fixed a couple of issues with watchers, meaning that you should need to restart your server less often - and you should see a significant performance increase if you are using layers.
There lots more exciting features coming directly from Nitro 2.6, including smaller, lighter servers and new persistent data storage in a .data
directory.
👉 Read more in the full release article.
As usual, our recommendation for upgrading is to run:
npx nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
$client
and $server
vite env overrides (#22302)$client
and $server
overrides (#22304)scrollToTop
page meta (#21741)app:templatesGenerated
hook (#21935)unhead
(#22179)@nuxt/webpack-builder
when needed (#21747)writeTypes
utility (#22385)setPageLayout
/<NuxtLayout>
(#22362)import.meta.*
build flags (#22428)node_modules
(#22478)webpack
/nitro
/postcss
config (#22521)global: 'sync'
components (#22558)app.rootId
optional (#22528)experimental.headNext
unhead integration (#22620)bun
package manager (#22673)routeRules
defined within pages (#20391)hidden
sourcemaps (#22787)nuxt/cli
(#22799)./schema/config.schema.json
subpath (#22813)nuxt/config
(#22391)capo.js
head tag order (#22431).toLowerCase()
(#22743)prerender:routes
hook (#22247)scrollBehaviorType
(#22264)asyncData
generic + default (#22258)createClientOnly
render function to ctx (#22289)build.extend
(#22305)validate
return typing to be either error or boolean (#22323)hasNuxtModule
(#22316)builder:watch
(#22333)useFetch
hash (#22378)watch
paths against all layer srcDir
s (#22307)name
is an optional prop for <NuxtLayout>
(0d9a0b753)useFetch
(#22418)baseUrl
and use relative paths in tsconfig (#22410)injectHead
usage (#22447)useCookie
(#22474)internal:nuxt
namespace (9b0d371b0)normalize
call (14bf2b02f)webpack
options should be optional (#22524)app.config.ts
files (#22494)hookable
to externals list (4552d39c4)app.{rootId ([rootTag}
(#22543)](https://github.com/nuxt/nuxt/commit/rootTag}` (#22543)))import.meta
build vars in define
as well (#22576)page:finish
(#22566)distDir
after first build (#22614)''
key for root scope in variable collector (#22679)exclude
paths to nitro tsconfig.server.json
(#22768)asyncData
when immediate
is disabled (#20980)spaLoadingTemplate
to false
(#22798)unctx
where possible (#22811)nuxi-ng
for edge releases (#22413)useNitroApp
from subpath (#22785)#components
import for dynamic component (#22231).env
section (#22369)NuxtIsland
(#22434)]
in code-block filenames (#22389)scrollToTop
(#22503)status
type for useAsyncData
(#22511)useSeoMeta
parameters (#22513)pick
(#22531)ReadMore
components (#22541)addServerHandler
example to modules author guide (#22603)server: false
doesn't await on initial load (#22619)import.meta.*
update until v3.7 release (98c17e5d4)NuxtIsland
in server only components docs (#22685)useFetch
docs (#22755)useAsyncData
(#22760)nuxi
(df2bc8a72).eslintignore
file with 'ignorePatterns' (#22547)h3-nightly
on edge releases (#22593)networkidle
dependency (#22596)3.6.5 is a hotfix patch release addressing the regression with nuxt/content introduced in v3.6.4.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
dist
from the default ignore list (#22227)3.6.4 is a patch release, brought forward to allow releasing some important bug fixes before work begins on 3.7.
Warning We're currently investigating a regression with nuxt/content and will be releasing 3.6.5 later today.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
buildDir
and node_modules
(#22214)toLowerCase
for possible moduleResolution
(#22160)baseURL
to island fetch requests (#22009)--inspect
in dev mode (#22205)3.6.3 is the next patch release, including a number of fixes. It's anticipated this will be the last patch release before 3.7.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
unctx
options (4e32e70bb)isExternal
(#21966)experimental
option (0643d4315)bundler
module resolution flag (#22142)/
(#22118)3.6.2 is the next patch release, with a raft of fixes including preparations for use without
--shamefully-hoist
and some fixes for data fetching within nested layouts/pages.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
@nuxt/ui-templates
from modulesDir
(#21836)nuxi generate
(#21860)tsconfig.json
scope (#21917)typedPages
(#21659)node_modules
to tsconfig include (#21929)$fetch.raw
in dev client mode for islands (#21904)vite.publicDir
(#21847)spaLoadingTemplate
link (#21845)<NuxtLoadingIndicator>
(#21952)nuxt-vitest
and composable unit tests (#21884)3.6.1 is a bugfix/patch release with some significant patches merged since 3.6.0
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
typescript
dep (#21729)false
to disable spa loading template (#21739)path
from SPA payload (#21732)ssr: false
route rule (#21763)#imports
(#21796)defineNuxtRouteMiddleware
migration (#21718)3.6.0 is the next minor release, packed with improvements and bug fixes.
In the coming week you can expect two announcements:
nuxt/cli
by @pi0 - a new, drop-in replacement for nuxi
featuring more extensibility and better DX. We are aiming to release this alongside Nuxt 3.7, but you would be very welcome to test and contribute to nuxi-ng
before then!This minor release contains quite a lot, and we have big plans
If your site is served with ssr: false
or you have disabled server-rendering on some of your pages, you might be particularly interested in the new built-in SPA loading indicator.
You can now place an HTML file in ~/app/spa-loading-template.html
with some HTML you would like to use to render a loading screen that will be rendered until your app is hydrated on these pages.
👉 By default an animated Nuxt icon is rendered. You can completely disable this indicator by setting spaLoadingTemplate: false
in your nuxt configuration file.
The first thing that happens when your app is hydrated is that your plugins run, and so we now perform build-time optimisations on your plugins, meaning they do not need to be normalised or reordered at runtime.
We also include your error component JS in your main entrypoint, meaning that if an error occurs when a user has no connectivity, you can still handle it with your ~/error.vue
. (This also should decrease your total bundle size.)
👉 Compared to Nuxt 3.5.3, the minimal client bundle has decreased by ~0.7kB. Let's keep this up!
It has been possible to use server components on static pages, but until now they would increase the payload size of your application. That is no longer true. We now store rendered server components as separate files, which are preloaded before navigation.
👉 This does rely on the new, richer JSON payload format, so make sure you have not disabled this by setting experimental.renderJsonPayloads
to false.
If you're monitoring your metrics closely and have not turned off experimental.inlineSSRStyles
, you should see more CSS inlined in your page, and a significantly external CSS file. We're now better at deduplicating global CSS, particularly added by libraries like tailwind or unocss.
To give you more fine-grained control over your page/layout components, for example to create custom transitions with GSAP or other libraries, we now allow you to set pageRef
on <NuxtPage>
and layoutRef
on <NuxtLayout
. These will get passed through to the underlying DOM elements.
Up to now, running nuxt generate
produced the same output on every deployment provider, but with Nuxt 3.6 we now enable static provider presets automatically. That means if you are deploying a static build (produced with nuxt generate
) to a supported provider (currently vercel and netlify with cloudflare and github pages coming soon) we'll prerender your pages with special support for that provider.
This means we can configure any route rules (redirects/headers/etc) that do not require a server function. So you should get the best of both worlds when deploying a site that doesn't require runtime SSR. It also unblocks use of Nuxt Image on Vercel (with more potential for automatic provider integration coming soon).
We now have better support for server-specific #imports
and augmentations if you are using the new ~/server/tsconfig.json
we shipped in Nuxt 3.5. So when importing from #imports
in your server directory, you'll get IDE auto-completion for the right import locations in Nitro, and won't see Vue auto-imports like useFetch
that are unavailable within your server routes.
You should now also have type support for runtime Nitro hooks.
Finally, we have removed more locations where objects had a default any
type. This should improve type safety within Nuxt in a number of locations where unspecified types fell back to any:
RuntimeConfig
PageMeta
NuxtApp['payload']
(accessible now from NuxtPayload
interface)ModuleMeta
You can find out more about how to update your code if this affects you in the original PR.
This release ships with new Nitro 2.5, which has a whole list of exciting improvements that are worth checking out.
Of particular note is experimental support for streaming, which is also enabled by a couple of changes in Nuxt itself.
This release brings a number of utilities for modules authors to easily add type templates and assert compatibility with a given version of another module.
In addition, this release will finally unlock a new nuxt/module-builder
mode that should improve type support for module authors. If you're a module author, you might consider following these migration steps to try it out in the coming days.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
useCookie
state between tabs (#20970)renderResult
to app:rendered
(#18610)esbuild-loader
options (#21436)open
option in navigateTo
helper (#21333)clearNuxtState
composable (#21409)addTypeTemplate
helper with auto-registration (#21331)status
from useAsyncData
(#21045)NuxtPage
ref via pageRef
(#19403)NuxtLayout
ref via layoutRef
(#19465)ssr-error
event (#21547)defineNuxtModule
(#20763)useNuxtApp
to window for convenience (#21636)resolveId
workaround and update vite-node (#21423)nitro.autoImport
option (#21485)dst
not src
(#21501)navigateTo
(#21500)window.location
(#21521)<Title>
(#21613):
in rendered server components (for win) (#21645)baseUrl
in tsconfig.json
(#21632)BroadcastChannel
(#21653)@typescript-eslint/typescript-estree
(#21664)res.end()
calls with check if event is handled (#21665)redirect
type for NuxtPage
type (#21713)render
when defining rendering
(#21490)addTypeTemplate
typos (#21520)nuxt
with bridge if nitro
is false (#21586)parallel
option on plugins (#21622)examples/
from repository (#21538)@latest
to install commands (#21702)vitest
renovate group (7695aca93)octokit/request-action
(dd5955caf)webpack-dev-middleware
updates on 2.x branch (7f7ae96d1)2.17.0 is the next minor release for Nuxt 2.
Nuxt 2.17 comes with a few new features, including better support for new Vue 2.7 types, and supporting passing postcss config as a function.
It also includes support for Node 20+ and a fix for a dependency issue with the Babel preset that affected new installs.
3.5.3 is expected to be the last patch release before our next raft of features lands in v3.6.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
--no-clear
config through to vite (#21262)vue-loader
options type (#21363)typeCheck
(#21064)std-env
in runtime code (#21372)lodash.template
from lodash-es
(#20892)index.vue
to page routing example (#21240)$fetch
and fetch composables (#21228)env
property to match runtimeConfig
(#21265)