v3.0.0-rc.12
🚀 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 to3.0.0-rc.12
and then usenpx 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)
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 #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
viewport
and charset
can only be used within nuxt.config
and not within useHead
directly. For more information on how to update, see #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
🚀 Enhancements
- nuxt: Support
redirect
within page metadata (#7746) - cli: Support
--dotenv
fordev
,build
andpreview
commands (#7660) - nuxt: Allow configuring plugins directory (#7981)
- nuxt: Add default slot to
<NuxtLoadingIndicator>
(#7128) - pages: Add
validate
hook fordefinePageMeta
(#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
andaddWebpackPlugin
(#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
fornuxi 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
withdefineLazyHandler
(#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
inlayout.ts
(#7818) - nuxt: Use
unref
infetch.ts
(#7813) - nuxt: Deprecate
<Script>
component tag in template (#8197) - nuxt: Use
writeEarlyHints
fromh3
(#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
withreadBody
(#8266) - Add spacing between multiple
button-link
(#8275) - Add cleavr to supported hosting providers (#8285)
🌊 Types
- Include
nuxt-link
target types (#8172)
🏡 Chore
⚠️ 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
- 菜狗