nuxt/framework
v3.0.0
: Nuxt 3.0 stable
Compare Source
β¨ Official Release Announcenment
π¬ Release Discussion
π Changelog
Check out v3.0.0-rc.14 for other recent changes.
π©Ή Fixes
- nuxt: Removed auto imports (#β9045)
- schema: Initialise
runtimeConfig.public
with empty object (#β9050)
- cli: Upgrade with
latest
tag (#β9060)
- nuxt: Allow union type arguments for
useAsyncData
(#β9061)
π Documentation
- New website design (#β9007)
- Update website theme version (819deb89)
- Minor style improvements (9ab069b2)
- Update website-theme (780b17b1)
- Add warning about
definePageMeta
issues with transitions and NuxtLoadingIndicator
(#β9055)
- Add missing agencies (#β9059)
π‘ Chore
β€οΈ Contributors
Compare Source
Note
This is the last release candidate for Nuxt v3! Are you ready? π
π Release Discussion
Changelog
compare changes
β οΈ Breaking Changes
- cli: Setup nuxt globally with
nuxt test
(#β4578)
- nuxt: Only add
$f
fetch prefix to auto-keys (#β8852)
- test-utils: Use
vitest/node
subpath export (#β8815)
- nuxt: Remove
initialCache
option (#β8885)
- nuxt: Enable payload extraction only for
nuxi generate
(#β9018)
- nuxt: Include request url and params in
useFetch
key (#β6632)
- nuxt: Fix typo for
NuxtRenderHTMLContext.bodyPrepend
(#β8712) (#β8704)
- nuxt: Remove support for
404.vue
shorthand (#β8809)
- kit: Remove support for module container (#β9010)
- nuxt: Move
head
option support into defineNuxtComponent
(#β8901)
- Remove deprecated api (#β9029)
- Remove
PrivateRuntimeConfig
interface support
- Remove autoImports
option
- Remove autoImports:extend
hook support
- Remove deprecated addAutoImport
and addAutoImport
utilities (use addImports
and addImportsDir
)
- Remove defer
option for useAsyncData
- Remove support for installModule(nuxt, nuxtModule)
- Remove support for module defenition as function
- Remove support for name
in module definition (use meta.name
)
- Remove deprecated throwError
(use showError
)
- Remove deprecated useActiveRoute
(use useRoute
)
- Remove deprecated NuxtConfig
and defineNuxtConfig
imports from nuxt
(import from nuxt/config
)
- Remove deprecated <Script>
component (use useHead
)
- Remove deprecated RouterConfigOptions
interface (use RouterConfigSerializable
)
- Remove deprecated fileName
for template options (use filename
)
- Remove deprecated <NuxtNestedPage>
and <NuxtChild>
components
- Remove deprecated buildModules
config
- Remove deprecated privateRuntimeConfig
and publicRuntimeConfig
options
- Remove deprecated imports.presets[].name
(use presets.imports
instead)
π Enhancements
- nuxt: Add
isExternal
to <NuxtLink>
slot props (#β8800)
- nuxt: Auto-import
utils/
directory (#β8817)
- cli: Wrap and normalize all console outputs (#β8846)
- nuxt: Allow customizing root id and tag (#β8883)
- nuxt: Add
onBeforeRouteLeave
and onBeforeRouteUpdate
composables (#β8889)
- cli: β οΈ Setup nuxt globally with
nuxt test
(#β4578)
- cli: Auto-generate
.npmrc
and setting for pnpm (#β7407)
- nuxt, schema: Migrate to @βvueuse/head v1 (#β8975)
π©Ή Fixes
- nuxt: Check if global transitions are activated for scroll behavior (#β8700)
- nuxt: Allow cookies to be set to
null
to unset them (#β8769)
- nuxt: Add catchall paths to prerender list (#β8782)
- schema: Add declarations to ignore list (#β8787)
- ssr: Ensure
useRequestHeaders
are case-insensitive (#β8805)
- nuxt: Do not render page if we are throwing error (#β8821)
- nuxt: Swallow issues with query selectors (#β8843)
- nuxt: β οΈ Only add
$f
fetch prefix to auto-keys (#β8852)
- test-utils: Detect project root using
nuxt.config
with .mjs
and .cjs
extensions (#β8855)
- cli: Exclude
dist
from type checking (#β8848)
- test-utils: β οΈ Use
vitest/node
subpath export (#β8815)
- nuxt: Detect non-functional imports within page meta (#β8881)
- nuxt: Preserve render errors (#β8884)
- nuxt: β οΈ Remove
initialCache
option (#β8885)
- nuxt: Use
app.baseURL
when fetching error page on server (#β8888)
- nuxt: Avoid passing attrs to default slot for
<ClientOnly>
component (#β8921)
- vite: Add extend layers to
fs.allow
(#β9006)
- nuxt: Include layers in esbuild transform (#β9014)
- kit: Add external module to transpile (#β8963)
- nuxt: β οΈ Enable payload extraction only for
nuxi generate
(#β9018)
- nuxt: β οΈ Include request url and params in
useFetch
key (#β6632)
- nuxt: Improve hmr for pages macros (#β8940)
π
Refactors
- nuxt: β οΈ Fix typo for
NuxtRenderHTMLContext.bodyPrepend
(#β8712)
- nuxt: β οΈ Fix typo for
NuxtRenderHTMLContext.bodyPrepend
(#β8704)
- nuxt: β οΈ Remove support for
404.vue
shorthand (#β8809)
- nuxt: Explicitly import app in nuxt-root (#β8729)
- kit: β οΈ Remove support for module container (#β9010)
- Update unjs dependencies to stable v1 (#β9011)
- nuxt: β οΈ Move
head
option support into defineNuxtComponent
(#β8901)
- β οΈ Remove deprecated api (#β9029)
π Documentation
- Update 2.nuxt-page.md (#β8761)
- Update roadmap for november (#β8766)
- Use update import for
defineLazyEventHandler
(#β8767)
- Remove stability-edge (507f444c)
- deployment: Remove usage of custom icons (8e4068b7)
- Improve examples content (1582f8ec)
- api: Add
useRequestHeaders
composable example (#β8833)
- Add entry for
extendPages
(#β8860)
- api: Add
refreshNuxtData
util examples (#β8845)
- Get event before running async function (#β8861)
- api: Add
useHydration
composable (#β8768)
- Add
query
option with example for useFetch
(#β8719)
- Add initial documentation for router composables (#β8895)
- Add tls option to redis example (#β8900)
- Fix syntax errors in server storage example (#β8906)
- Fix typo (#β8970)
- api: Add spaces to avoid breaking mobile layout (#β8967)
- Typo in
available
(#β8966)
- Add a bit more detail in the
definePageMeta
warning to specify it needs to be in a page (#β8923)
- Match the open graph protocol markup (#β8959)
- Fix typos (#β8976)
β€οΈ Contributors
Compare Source
π Release discussion
β What is New?
π° Security Fixes
This release contains multiple security related fixes #β8675, #β8674 and #β8673 reported via huntr.dev platform by OhB00.
We recommend you upgrade to the latest version as soon as possible.
If you encounter "The request URL ... is outside of Vite service allow list" issue, try adding path to vite.server.fs.allow
in nuxt.config
. read more.
π Performance Improvements
Using a new method to extract definePageMeta
improves vite performance and makes lazy compilation of pages possible (#β8536).
π― Strict Config Schema and Types
We have cleaned up the configuration schema (#β8487) so that you no longer would be confused with Nuxt 2 options and also can quickly notice any typos in nuxt.config
file.
Typescript strict mode is also enabled by default with this release as best practice. (#β8667)
π Nitro Development Server Proxy
Using nitro.devProxy
option you can now configure proxies for the development server. (learn more)
Changelog
compare changes
β οΈ Breaking Changes
- nuxt: β οΈ Use parser to generate page metadata (#β8536)
- schema: β οΈ Use strict typescript mode by default (#β8667)
- test-utils: β οΈ Update vitest args (#β8325)
- schema: β οΈ Disable
app.pageTransition
and app.layoutTransition
by default (#β8436)
- nuxt: β οΈ Cleanup schema and split nuxt 2 types (#β8487)
π Enhancements
- nuxt: Default router scroll behavior (#β3851)
- nuxt: Make
useFetch
options reactive (#β8374)
- kit: Add
updateTemplates
utility (#β8413)
- nuxt: Add dev warnings when
setPageLayout
is used incorrectly (#β8464)
- Add
<devOnly>
component (#β7950)
- nuxt: Allow setting
name
and path
for a route in definePageMeta
(#β8633)
- kit: Add
addServerPlugin
utility (#β8635)
- kit, nuxt: Support
prerender:routes
and addPrerenderRoutes
(#β8670)
π©Ή Fixes
- nuxt: Don't use or assignment (#β8299)
- nuxt: Pass original request headers to the error page (#β7340)
- nuxt: Scroll to top on dynamic routes with different params (#β8327)
- nuxt: Router defaults overwrite custom options always (#β8334)
- cli: Update analzye main handler (#β8339)
- nuxt: RouterBehavior comparison for hash block (#β8383)
- nuxt: Don't load payloads for external urls (#β8370)
- vite: Invalidate virtual modules with
vite-node
(#β8389)
- nuxt: Avoid directly importing
vue-router
inside <NuxtLayout>
(#β8421)
- webpack: Print build errors (#β8388)
- kit: Use
pathe
to resolve aliases (#β8453)
- test-utils: Override
NITRO_PORT
as well (#β8458)
- nuxt: Call data refresh hook in parallel (#β8470)
- nuxt: Allow responding with custom headers from
error.vue
(#β8469)
- schema: Disable early hints by default (#β8486)
- kit: Don't require nuxt context when resolving path (#β8504)
- nuxt, nuxi: Improve
pages
creation and removal DX (#β8502)
- nuxt: Add
vue-router
to optimized deps (#β8544)
- vite: Handle all vite middleware routes (#β8601)
- nuxt: Pass async-data errors through to client (#β8521)
- nuxt: Check before appending comma in composable keys (#β8529)
- nuxt: β οΈ Use parser to generate page metadata (#β8536)
- kit: Normalize handler paths (#β8626)
- nuxt: Don't force prerender
/
if user doesn't have that route (#β8639)
- nuxt: Do not inline global styles in html response (#β8666)
- schema: β οΈ Use strict typescript mode by default (#β8667)
- nuxt: Disallow directly rendering error page (#β8673)
- Resolve ids to support pnpm (#β8671)
- vite: Enable fs strict mode (#β8674)
- nuxt: Ensure payload url has no protocol (#β8675)
π
Refactors
- test-utils: β οΈ Update vitest args (#β8325)
- schema: β οΈ Disable
app.pageTransition
and app.layoutTransition
by default (#β8436)
- nuxt: β οΈ Cleanup schema and split Nuxt 2 types (#β8487)
π Documentation
- Add route rules to concepts > rendering (#β8292)
- Fix broken link (#β8319)
- Fix link to documentation guide (#β8322)
- Update website-theme to 0.1.7 (dbc2c8ce)
- Add missing opening
<NuxtLayout>
tag in a code sample (#β8349)
- Update links for external tools (#β8382)
- Update for clarity and fix typos (#β8375)
- Add missing
app
key for transitions (#β8385)
- api: Add
<ClientOnly>
to API docs (#β8400)
- Fix typo (#β8427)
- Disable transitions by default as hotfix (#β8434)
- Add note about runtime config serialization (#β8432)
- Change required node version to be above 16.11 (#β8408)
- Use
LinkExample
as block component (#β8459)
- Add note about early hints and nginx (#β8485)
- Updated bridge migration guide (#β8471)
- Mention use case for
<KeepAlive>
in definePageMeta
(#β8491)
- Update stability edge banners (#β8498)
- Generate docs for unversioned schema (#β8535)
- Fix transition wording to include layouts (#β8600)
- Add information about type checking to
typescript.typeCheck
config. (#β8632)
π¦ Build
π‘ Chore
- renovate: Ignore monorepo dependency upgrades (f934343b)
- Upgrade vitest to 0.24 (#β6764)
- nuxt: Add type for headers (#β8326)
- examples: Add missing dependency and script for testing example (#β8457)
- Reenable auto-upgrades for vueuse/head (#β8506)
- Update nitropack to 0.6.1 (5a43e68e)
β
Tests
β€οΈ Contributors
- Adewale Adeyemi
- Anthony Fu
- Christian Burkhart
- ClΓ©ment Ollivier
- Damian GΕowala
- Daniel Roe
- David Stack
- Dawid Stefanko
- Dmitriy
- Farnabaz
- Joel
- Joel Wenzel
- Johann Schopplich
- Johnson Chu
- Josh Deltener
- Julien Huang
- Nils
- OndΕej MisΓ‘k
- Pascal Sthamer
- Pooya Parsa
- Rajendra
- Sacha STAFYNIAK
- SΓ©bastien Chopin
- Zecka
Compare Source
π¬ Release Discussion
π How to Upgrade
Note
Make sure to recreate the lock file in the project in case of any issues after the upgrade.
- Automated:
npx nuxi@latest upgrade --force
- Manual: Bump
nuxt
dependency to 3.0.0-rc.12
and then use npx nuxi@latest cleanup
to cleanup any local caches
β What is New?
π Route Rules
RC.12 comes with the first public beta for route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route! Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using Nitro caching layer. Whenever possible, route rules will be automatically applied to the deployment platform's native rules (currently Netlify and Vercel are supported).
π See docs for examples and more info.
βοΈ Nitropack 0.6
Nitropack upgraded to 0.6 (Release Notes) and h3 upgraded to 0.8 (Release Notes)
β οΈ Breaking changes: Using defineEventHandler()
or eventHandler()
is now required. If you were previously using a Node.js middleware with (req, res, next?)
syntax you need to wrap them with fromNodeMiddleware()
to convert it into an h3 handler.
π¦ useHead
updates
This release brings a brand-new version of @vueuse/head
with some significant performance improvements and bug fixes. Check out https://github.com/nuxt/framework/pull/8000 for more details, but in particular:
- Fully-typed usage of
useHead
- No more flickering when transitioning between routes
- Support ordering of head metadata
- Faster head hydration and deduping
β οΈ Breaking changes: The shortcuts viewport
and charset
can only be used within nuxt.config
and not within useHead
directly. For more information on how to update, see https://github.com/nuxt/framework/pull/8000.
β‘ Page Meta
New router options validate
and redirect
are now supported directly in definePageMeta
- so you can perform additional validation for dynamic routes, or implement route redirects directly within pages.
definePageMeta({
// redirect: '/admin',
validate: async (route) => {
const nuxtApp = useNuxtApp()
// Check if the id is made up of digits
return /^\d+$/.test(params.id)
}
})
π
Early Hints
Nuxt's node server renderer will now respond with 103 Early Hints before the server renders the app, meaning that you should see a decreased TTFB and earlier resource loading in a supported environment - which at the moment is Chrome with your Nuxt app served over HTTPS with newer than HTTP/1.1.
π Nuxt 3 Docs
Nuxt's documentation is now written with Nuxt 3's new theming system and the latest Docus and Content module versions. Check it out at https://v3.nuxtjs.org! Expect more coming soon!
Changelog
compare changes
π Enhancements
- nuxt: Support
redirect
within page metadata (#β7746)
- cli: Support
--dotenv
for dev
, build
and preview
commands (#β7660)
- nuxt: Allow configuring plugins directory (#β7981)
- nuxt: Add default slot to
<NuxtLoadingIndicator>
(#β7128)
- pages: Add
validate
hook for definePageMeta
(#β7870)
- nuxt: Refresh override for data fetching composables (#β7864)
- schema, nuxt: Allow user-configurable
serverDir
(#β7868)
- nuxt: Parse html to treeshake client-only components (#β7527)
- nuxt: Wrap
#components
client exports with createClientOnly (#β7412)
- nuxt: Add
ssr: false
route rule to enable SPA mode (#β7938)
- nuxt: Migrate to latest
@vueuse/head
(#β8000)
- nuxt: β οΈ Add
<NuxtPage>
to #components
(#β8145)
- nuxt: Add hook debug mode (#β7690)
- cli: Add
nuxi build-module
command (#β7610)
- schema: Add experimental
routesRules
shortcut (#β7954)
- kit: Support plugin array for
addVitePlugin
and addWebpackPlugin
(#β8270)
π₯ Performance
- nitro: Respond with early hints in node-based environments (#β7893)
- nuxt: β οΈ Use component loader to add meta components (#β8167)
- nuxt: Remove
vue-router
dependency from minimal app (#β8188)
- nuxt: Improve link prefetching (#β8225)
π©Ή Fixes
- nuxt: Export and auto-import
clearNuxtData
(#β7710)
- test-utils: Support vitest v0.20.x (#β7712)
- cli: Include
workspaceDir
in tsconfig include (#β7726)
- cli: Stub
defineNuxtConfig
for nuxi info
(#β7728)
- nuxt: Do not warn for non-existent default layout (#β7748)
- nuxt: Respect immediate option in
useFetch
(#β7720)
- nuxt: Respect
baseURL
when rendering payload path (#β7809)
- nuxt: Don't disable scripts in dev mode with experimental
noScripts
(#β7745)
- Downgrade Node.js
^16.11.0
requirement to ^16.10.0
(#β7865)
- nuxt: Handle schema types for relative module paths (#β7946)
- vite: Add type-checker to client build for
ssr: false
(#β7930)
- nuxt: Allow auto-import component with same filename (#β7713)
- test-utils: Respect
setupTimeout
(#β7866)
- nuxt: Fix lazy import of
.client
components (#β7422)
- nuxt: Remove fragment from
createClientOnly
(#β7774)
- head: Allow using the default slot for script content like noscript (#β7858)
- nuxt: Don't prerender
index.html
with a server (#β7831)
- docs: Link to api config reference (#β8038)
- docs: Link to installation section (#β8040)
- nuxt: Page hydration and double load (#β7940)
- schema: Declare
untyped
dependency (#β8064)
- nuxt: Use correct cache and add baseURL to payload (#β7984)
- cli: Replace
lazyHandle
with defineLazyHandler
(#β8049)
- schema: Evaluate environment variables when resolving values (#β8079)
- vite: Prevent overlap between vite assets and app routes (#β7989)
- nuxt: Don't inline styles for per-request
ssr: false
(#β8106)
- nuxt: β οΈ
refresh
to override previous requests by default (#β8190)
- nuxt: Enable router when
app/router.options.ts
file is present (#β8193)
- kit: Log module id to the console when import fails (#β8198)
- nuxt: Avoid head dom update on same route click (#β8206)
- webpack: Add global to new line (#β8226)
- schema: RouteRules config (#β8252)
- cli: Don't include
workspaceDir
in tsconfig by default (#β8256)
- nuxt: Avoid preloading external routes (#β8255)
- nuxt: Allow disabling early hints (#β8264)
- nuxt: Lazy-load entry CSS (#β8278)
- nuxt: Ignore cache rules for middleware and errors (#β8291)
π
Refactors
- nuxt: Use
unref
in layout.ts
(#β7818)
- nuxt: Use
unref
in fetch.ts
(#β7813)
- nuxt: Deprecate
<Script>
component tag in template (#β8197)
- nuxt: Use
writeEarlyHints
from h3
(#β8245)
- nuxt: Use
getRouteRules
from nitropack (#β8251)
π Documentation
- getting-started: Fix typo in views (#β7687)
- getting-started: Configuration page (#β7689)
- Recommend to not overwrite some keys in tsconfig (#β7717)
- directory-structure: Fix typo in server (#β7752)
- navigate-to: Use await instead of return (#β7734)
- error-handling: Fix
useError()
type definition (#β7749)
- migration: Restructure upgrade guide (#β7730)
- Document nitro hooks (#β7782)
- roadmap: Update the release times for v2 and v3 (#β7808)
- guide: Add nitro plugins to server directory (#β7780)
- roadmap: Remove not working link from
nuxt/auth
(#β7781)
- Updated nuxt bridge migration guide (#β7775)
- Merge deployment pages in getting started (#β7765)
- Add newline at end of sass import (#β7810)
- examples: Optimize writing of
: ?
(#β7928)
- Update
definePageMeta
docs (#β7888)
- Use nuxt 3 and website theme (#β5479)
- getting-started: Add
transitions
page (#β7987)
- Fix path of nuxt config (#β8021)
- introduction: Add nuxt key features to the introduction (#β8013)
- transitions: Add poster for videos (99907dbf)
- Fix netlify redirects (#β8028)
- Use
webp
for 3D gem asset (93c3f30b)
- Upgrade docus (aef32577)
- Upgrade docus to fix docsearch input focus (fc2d74a2)
- Update to
[email protected]
(3218356d)
- Fix indentation in "Views" code blocks (#β8039)
- Fix more redirect issues (#β8045)
- example: Replace useQuery to getQuery (#β8047)
- Fix code highlighting (#β8057)
- Add recommendation for controlling plugin registration order. (#β8096)
- Add back deleted sections in
definePageMeta
(c804daa0)
- Update line number for
NuxtHooks
source (#β8128)
- Fix typo (#β8129)
- Update badges color (bc3016f8)
- Add app.config route to pre-render (#β8131)
- Clarify access of RuntimeConfig with Options API (#β8147)
- Close alert (#β8157)
- Fix 404 page (#β8136)
- Use
RouterConfig
interface in examples (#β8151)
- Add support for WEBSITE_THEMe env variable (6ad0f3f1)
- Update route middleware link (#β8196)
- Adds missing quote in example code (#β8209)
- Fix
validate
example (#β8231)
- Change deprecated
useBody
with readBody
(#β8266)
- Add spacing between multiple
button-link
(#β8275)
- Add cleavr to supported hosting providers (#β8285)
π Types
- Include
nuxt-link
target types (#β8172)
π‘ Chore
- Use pnpm for framework monorepo (#β7895)
- Add start command for stackblitz codeflow (#β8279)
β οΈ Breaking Changes
- nuxt: β οΈ Add
<NuxtPage>
to #components
(#β8145)
- nuxt: β οΈ Use component loader to add meta components (#β8167)
- nuxt: β οΈ
refresh
to override previous requests by default (#β8190)
β€οΈ Contributors
- Alex
- Alex C
- Alexander Lichter
- Andrew Mudrov
- Anish Ghimire
- Anthony Fu
- AuroraTea
- Barbapapazes
- Benicio Cardozo
- Chenying
- Christian Preston
- Cinob
- ClΓ©ment Ollivier
- Cupid Valentine
- Damian GΕowala
- Daniel Kelly
- Daniel Roe
- Daniil Chudo
- Fumihiro-Yano
- Harlan Wilton
- Israel OrtuΓ±o
- James Ray
- Josh Deltener
- Julien Huang
- Krutie Patel
- Lov
u
e
- Martin Benndorf
- Miketromba
- MiniDigger
- Mmis1000
- Niklas
- Pooya Parsa
- Rajendra
- Randy
- Reinier Kaper
- SΓ©bastien Chopin
- Tech Genius
- Tobias Diez
- Toni
- TuΔberk KΔ±lΔ±Γ§
- Won-hyeok Jung
- Xezard
- YaΓ«l Guilloux
- Yu Yamazaki
- θη
Compare Source
π¬ Join the release discussion
π How to Upgrade
Note
Make sure to recreate the lock file in the project in case of any issues after the upgrade.
- Automated:
npx nuxi@latest upgrade --force
- Manual: Bump
nuxt
dependency to 3.0.0-rc.11
and then use npx nuxi@latest cleanup
to cleanup any local caches
β What is New?
Full Static Enhancements
We have introduced Full-Static mode payload extraction in RC.10. Many of the issues from the initial implementation are resolved with this release thanks to your amazing feedback! Notably for SPA routes and state that is now in the initial state.
π§ͺ We understand that there might be still issues with the new implementation. Please report if spotted any. You can use new experimental.payloadExtraction: false
flag in nuxt.config
to opt-out as well.
IPv6 and HTTPS support for nuxi dev
and vite
Nuxi CLI and unjs/listhen are improved and now support --https
flag and ipv6 hosts out of the box with an auto-generated certificate. You can use --ssl-cert
and --ssl-key
to provide own generated SSL certificates with mkcert for example as well.
Issues with vite HMR and vite-node should be resolved as well. If you were previously using NODE_TLS_REJECT_UNAUTHORIZED
or custom vite.server.hmr
options for a workaround, you can try to remove them.
Note: If you see something like http://[::]:3000/
when running nuxi preview
, it is all normal! The New IPv6 URL works in all modern browsers and is also backward compatible with IPv4 interfaces. If for some reason encountered any issues, try setting HOST
to 0.0.0.0
to disable IPv6 listener.
Nitro Improvements
Nitro is the server engine for Nuxt 3. We had landed several fixes in 0.5.2 and 0.5.3 versions improving stability and bug fixes.
Full Changelog
compare changes
π Enhancements
- kit:
useNitro()
utility (#β7557)
- Allow disabling payload extraction (#β7588)
π©Ή Fixes
- nuxt: Disable payload extraction for spa generated pages (#β7535)
- nuxt: Do not pass prefetched class to custom link (#β7522)
- cli: Improved self-signed certificate for
nuxi dev --https
(#β7545)
- vite:
nuxi dev --https
working out of the box (#β7547)
- schema: Update resolver for
cssSourceMap
with new sourcemap
format [bridge] (#β7541)
- nuxt: Pass fully resolved path to nitro dist files (#β7494)
- nuxt: Remove modulepreload for spa fallback routes with
ssr:true
(#β7553)
- schema: Only disallow vite server port and host (#β7554)
- nuxi, vite: Ipv6 support for
nuxi dev
(#β7560)
- cli: Print resolved public directory after generate (#β7577)
- nuxt: Load payload after middleware and once final route is resolved (#β7574)
- nuxt: Keep
state
in the initial state instead of extracting it (#β7567)
- vite: Normalize vite-node error data from server (#β7589)
- vite: Include id and stack in
vite-node
fallback error handler (#β7575)
- vite: Respect
ctx.nuxt.options.modulesDir
for resolving externals with vite-node
(#β7612)
- nuxt: Add missing
process.client
for early redirect in navigateTo
(#β7625)
- vite-node: Include importer in error stack (#β7607)
- vite, webpack: Avoid generating keys where a key is already provided (#β7622)
- vite, webpack: Handle auto keys for composables without args (#β7651)
- nuxt: Don't tree shake client-only fallback templates (#β7659)
- nuxt: Strip non-
.vue
extensions from component types (#β7673)
- nuxt: Only observe tag elements for
<NuxtLink>
prefetching (#β7679)
- nuxi, vite: Support HTTPS with custom domain and HMR (#β7680)
π Documentation
- Update auto-imports link (#β7530)
- Add note about link prefetching (#β7540)
- Improve NuxtLink prefetch explanation (#β7540)
- Add testing and
addComponent
to modules and update addImports
(#β7543)
- Fix typo on directory-structure/pages (#β7601)
- Fix typo in custom router example (8621c860)
- Fix typo in nitro options in wasm example (#β7639)
- Add
addImportsSources
to list of kit utils (#β7636)
- api: Add
defineNuxtComponent
page (#β7618)
- testing: Move modules testing section to module authors guide (#β7643)
- getting-started: Add views page (#β7556)
β€οΈ Contributors
- Alexander Lichter
- Alper DoΔan
- Chenying
- ClΓ©ment Ollivier
- Damian GΕowala
- Daniel Roe
- Julien Huang
- Krutie Patel
- Lexpeartha
- Pooya Parsa
- YIngChenIt
Compare Source
π¬ Join the release discussion
π How to Upgrade
Note
Make sure to recreate the lock file in the project in case of any issues after the upgrade.
- Automated:
npx nuxi@latest upgrade --force
- Manual: Bump
nuxt
dependency to 3.0.0-rc.10
and then use npx nuxi@latest cleanup
to cleanup any local caches
β What is new?
Critical Styles are Inlined
#β6755, #β7160
Global styles and used component styles are now automatically inlined when server-side rendering a page. This feature helps to improve the First Contentful Paint (FCP) metric.
π§ͺ You can disable the feature from nuxt.config
using experimental: { inlineSSRStyles: false }
in case of any issues.
Full Static Generation with Payload Rendering
#β6411, #β6455
In Nuxt 2, we introduced an amazing feature called Full Static Generation. When using nuxt generate
, the payload of each page containing asyncData and state is extracted to a .js
chunk and we can deploy output to any static hosting without requiring a hosted API server. This feature also introduced performance benefits to reduce page size and allow smartly prefetching payload of next pages ahead of time when using nuxt generate
but kept limited to it.
This feature is now back in Nuxt 3 but much better! Payload is not only extracted during prerendering phase (nuxt generate
) but also can be rendered on demand by simply appending /_payload.js
to the end of any URL. This made implementation much simpler and also unlocks future development to enable payload rendering for hybrid static server and incremental generated pages. Followup #β6411 for the roadmap.
Link Prefetching
#β4329
Another goodie ported from Nuxt 2, is automatically prefetching the next pages when a <NuxtLink>
is in the viewport.
This feature is integrated with vue-router to prefetch components of the next route and also payload extraction to prefetch the payload of the next pages ahead of time! You can also hook into link:prefetch
to do more prefetches.
Better Workspace Support
unjs/pkg-types#β34, #β7439
Nuxt has several configurations for directories including rootDir
where nuxt.config
, package.json
, etc is, and srcDir
which is the same as rootDir
by default but can be customized to move project code such as pages/
to the src/
directory. With Monorepo becoming more popular, it became clear we need another new option to act smarter in a monorepo.
We have introduced a new workspaceDir
configuration. It is automatically detected from rootDir using different heuristics (how?). This option is used to extend the search path for node_modules
via #β7439 but we will keep spreading its use in other places.
π§ͺ You can manually set workspaceDir
from nuxt.config
in case of any issues.
defineNuxtConfig
is Auto Imported
#β7267, #β7485, #β7497
Nuxt uses unjs/jiti in order to support typescript and ESM syntax for nuxt.config
.
When importing { defineNuxtConfig } from 'nuxt'
in Nuxt 3, it causes the whole nuxt package to be loaded. It was making startup time slower.
We have introduced a new nuxt/config
subpath export that only exports defineNuxtConfig
for type support but you don't even need this anymore! Just remove import and enjoy shorter syntax!
-- import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
})
More Powerful nuxt init
We have switched to unjs/giget for a much more powerful template init engine.
Normally nuxi init
command should work as it was before. If you were using nuxt init org/repo
to clone the 3rd party GitHub repository, you should use nuxi init gh:org/repo
now.
Experimental Zero-Client-JS Mode
#β7156, #β7248
This new experimental flag allows turning off all Nuxt client js code when server-side rendering a page.
Using this feature is advisable for the very small minority of sites that would not benefit from client-side JS.
You can try this feature by setting experimental: { noScripts: true }
and let us know what you think!
Changelog
([see all commits](https://togithub.com/nuxt/f