v3.11.0
版本发布时间: 2024-03-17 17:15:39
nuxt/nuxt最新发布版本:v3.13.2(2024-09-16 05:27:05)
👀 Highlights
This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨
🪵 Better logging
When developing a Nuxt application and using console.log
in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past!
Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. Asynchronous context is used to track and associate these logs with the request that triggered them. (#25936).
For example, this code:
<script setup>
console.log('Log from index page')
const { data } = await useAsyncData(() => {
console.log('Log inside useAsyncData')
return $fetch('/api/test')
})
</script>
will now log to your browser console when you refresh the page:
Log from index page
[ssr] Log inside useAsyncData
at pages/index.vue
👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future.
We've also added a dev:ssr-logs
hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to.
If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console.
export default defineNuxtConfig({
features: {
devLogs: false
// or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
},
})
🎨 Preview mode
A new usePreviewMode
composable aims to make it simple to use preview mode in your Nuxt app.
const { enabled, state } = usePreviewMode()
When preview mode is enabled, all your data fetching composables, like useAsyncData
and useFetch
will rerun, meaning any cached data in the payload will be bypassed.
💰 Cache-busting payloads
We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment.
👮♂️ Middleware routeRules
It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) (#25841).
export default defineNuxtConfig({
routeRules: {
'/admin/**': {
// or appMiddleware: 'auth'
appMiddleware: ['auth']
},
'/admin/login': {
// You can 'turn off' middleware that would otherwise run for a page
appMiddleware: {
auth: false
}
},
},
})
⌫ New clear
data fetching utility
Now, useAsyncData
and useFetch
expose a clear
utility. This is a function that can be used to set data
to undefined, set error
to null
, set pending
to false
, set status
to idle
, and mark any currently pending requests as cancelled. (#26259)
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
🕳️ New #teleports
target
Nuxt now includes a new <div id="teleports"></div>
element in your app within your <body>
tag. It supports server-side teleports, meaning you can do this safely on the server:
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
🚦 Loading indicator and transition controls
It's now possible to set custom timings for hiding the loading indicator, and forcing the finish()
method if needed (#25932).
There's also a new page:view-transition:start
hook for hooking into the View Transitions API (#26045) if you have that feature enabled.
🛍️ Server- and client-only pages
This release sees server- and client-only pages land in Nuxt! You can now add a .server.vue
or .client.vue
suffix to a page to get automatic handling of it.
Client-only pages will render entirely on the client-side, and skip server-rendering entirely, just as if the entire page was wrapped in <ClientOnly>
. Use this responsibly. The flash of load on the client-side can be a bad user experience so make sure you really need to avoid server-side loading. Also consider using <ClientOnly>
with a fallback
slot to render a skeleton loader (#25037).
⚗️ Server-only pages are even more useful because they enable you to integrate fully-server rendered HTML within client-side navigation. They will even be prefetched when links to them are in the viewport - so you will get instantaneous loading (#24954).
🤠 Server component bonanza
When you are using server components, you can now use the nuxt-client
attribute anywhere within your tree (#25479).
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
You can listen to an @error
event from server components that will be triggered if there is any issue loading the component (#25798).
Finally, server-only components are now smartly enabled when you have a server-only component or a server-only page within your project or any of its layers (#26223).
[!WARNING]
Server components remain experimental and their API may change, so be careful before depending on implementation details.
🔥 Performance improvements
We've shipped a number of performance improvements, including only updating changed virtual templates (#26250), using a 'layered' prerender cache (#26104) that falls back to filesystem instead of keeping everything in memory when prerendering - and lots of other examples.
📂 Public assets handling
We have shipped a reimplementation of Vite's public asset handling, meaning that public assets in your public/
directory or your layer directories are now resolved entirely by Nuxt (#26163), so if you have added nitro.publicAssets
directories with a custom prefix, these will now work.
📦 Chunk naming
We have changed the default _nuxt/[name].[hash].js
file name pattern for your JS chunks. Now, we default to _nuxt/[hash].js
. This is to avoid false positives by ad blockers triggering off your component or chunk names, which can be a very difficult issue to debug. (#26203)
You can easily configure this to revert to previous behaviour if you wish:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
💪 Type fixes
Previously users with shamefully-hoist=false
may have encountered issues with types not being resolved or working correctly. You may also have encountered problems with excessive type instantiation.
We now try to tell TypeScript about certain key types so they can be resolved even if deeply nested (#26158).
There are a whole raft of other type fixes, including some regarding import types (#26218 and #25965) and module typings (#25548).
✅ Upgrading
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.
👉 Changelog
🚀 Enhancements
- nuxt: Server-only pages (#24954)
- nuxt: Client-only pages (#25037)
-
nuxt: Allow using
nuxt-client
in all components (#25479) -
nuxt: Add
page:view-transition:start
hook (#26045) -
nuxt: Custom loading reset/hide delay + force
finish()
(#25932) -
nuxt: Emit error if
<NuxtIsland>
can't fetch island (#25798) -
nuxt:
usePreviewMode
composable (#21705) - nuxt: Support async transforms for data composables (#26154)
-
nuxt: Add dedicated
#teleports
element for ssr teleports (#25043) - nuxt: Enable islands if server pages/components present (#26223)
- nuxt: Allow generating metadata for nuxt components (#26204)
- vite: Handle multiple/custom public dirs (#26163)
-
schema: Allow configuring type hoists with
typescript.hoist
(85166cced) -
nuxt: Pass nuxt instance to
getCachedData
(#26287) - nuxt: Pass server logs to client (#25936)
-
nuxt: Add
nuxtMiddleware
route rule (#25841) -
nuxt: Add
clear
utility touseAsyncData
/useFetch
(#26259)
🔥 Performance
- Early return chained functions with falsy values (#25647)
-
nuxt: Don't check
isPrerendered
in dev for server page (#26061) - nuxt: Use fallthrough cache for prerender (#26104)
- nuxt: Tree shake island renderer (8323220f7)
- nuxt: Skip adding selective-client code if not enabled (#26176)
- nuxt: Use faster approach to check cache exists (#26172)
- nuxt: Only update changed templates (#26250)
🩹 Fixes
-
kit: Apply nuxt types to
.config/nuxt.config
(5440ecece) -
kit: Widen pattern to
.config/nuxt.*
(7815aa534) -
nuxt: Align
error
inshowError
/createError
with h3 (#25945) - kit: Don't warn if middleware is added twice (08b656a04)
- nuxt: Don't try to strip directory file extensions (#25965)
-
nuxt: Produce valid css selector from
useId
(#25969) -
schema: Add
vueCompilerOptions
property totsConfig
(#25924) - nuxt: Skip vue style blocks in unctx transform (#26059)
-
nuxt: Pass event to
useRuntimeConfig
in Nuxt renderer (#26058) -
schema: Disable
typescript.shim
in favour of volar (#26052) - nuxt: Only check if server page is prerendered on client (#26081)
- nuxt: Don't refetch server components in initial html (#26089)
-
nuxt: Resolve
defu
/h3
paths in type templates (#26085) -
nuxt: Use exported
toExports
fromunimport
(#26086) - nuxt: Cache-bust payloads with build id (#26068)
-
nuxt: Export
AsyncDataRequestStatus
type (#26023) -
nuxt: Add space before
<html>
and<body>
attrs (#26027) -
kit: Resolve module
node_modules
formodulesDir
(#25548) -
nuxt: Handle external redirects from
routeRules
(#26120) - nuxt: Use flat cache directory for prerender data (47cdd7dd0)
-
nuxt: Watch custom
cookieRef
values deeply (#26151) - nuxt: Access prerender cache synchronously (#26146)
- nuxt: Provide typescript aliases for core packages (#26158)
- nuxt: Handle errors resolving package paths (63bfaac12)
- kit: Handle errors resolving module path (3782ac0a2)
- nuxt: Clone paths to prevent shared object (264bf9833)
-
nuxt: Detect component usage within
ssrRender
(#26162) - nuxt: Improved plugin annotating warnings (#26193)
- nuxt: Generate typed routes after pages are scanned (#26206)
- nuxt: Only strip supported extensions when generating import types (#26218)
-
nuxt: Init payload when using islands with
ssr: false
(f080c426a) - nuxt: Register/scan plugins with jsx/tsx extensions (#26230)
- nuxt: Update auto imports after other templates (#26249)
-
nuxt: Respect
baseUrl
within server components (#25727) -
nuxt: Access shared asyncData state with
useNuxtData
(#22277) -
vite: Explicitly import
publicAssetsURL
(9d08cdfd1) -
nuxt: Don't ignore any files from
buildAssetsDir
(81933dfc3) - vite: Drop name prefix for client chunk file names (#26203)
- kit: Clone middleware when adding to app (5be9253cf)
- nuxt: Don't generate separate chunk for stubs (#26291)
-
nuxt: Use
joinRelativeURL
for build assets (#26282) -
schema: Allow passing
deep
toselectiveClient
(357f8db41) -
schema: Don't hoist types for
consola
for now (adbd53a25) -
nuxt: Guard
window
access more carefully (977377777) - nuxt: Provide appMiddleware types with universal router (87c0678f9)
- nuxt: Handle nightly releases for hoisted types (3c7e68c84)
💅 Refactors
-
nuxt: Simplify
request
computation (#26191) -
nuxt: Rename
nuxtMiddleware
toappMiddleware
(cac745470) - nuxt: Use addTypeTemplate for page augmentations (4925670dc)
- nuxt: Use addTypeTemplate in more places (33ce71dd1)
📖 Documentation
- Mention when
useId
composable was introduced (#25953) - Add
domEnvironment
option to testing example (#25972) - Update VS Code settings (#25985)
- Mention island features are SFC only (#26013)
- Improve pick and transform doc (#26043)
- Fix 404 link (8e6d2306c)
- Add Nuxt Fonts to changelog (#26077)
- Update roadmap (#26072)
- Document
fallback
prop for<NuxtLayout>
(#26091) - Add documentation for using layers with private repos (#26094)
- Remove twoslash from code sample (0bf70bd7a)
- Update cssnano website url (d6edb30c5)
- Add warning about latest
vue-tsc
(#26083) - Improve readme readability (#26118)
- Added bridge
macros.pageMeta
andtypescript.esbuild
option (#26136) - Fix bracket escape on
definePageMeta
page (#26139) - Add
app:manifest:update
hook (#26192) - Add cache.varies docs for multi-tenant use case (#26197)
- Add mentions on Vue School tutorials (#25997)
- Update link to
zhead
(e889a7df5) - Added modular architecture use case for Layers (#26240)
- Escape 'elements' in jsdoc comments (5c6dc4c14)
- Use a more common word (#26276)
- Split a sentence in two to improve readability (#26279)
- Removed unused composable example (#26283)
- Add more keywords for reducer/reviver docs (6b1f3438b)
- Link to pinceau repo rather than website (#26286)
- Add link to ofetch repo (#26284)
- Improve section titles in error-handling docs (#26288)
- Add example for
clear
(24217a992) - Add docs about playwright runner support (115298a44)
- Add some
appMiddleware
docs (da8e8eba8)
🏡 Chore
- Use consistent quotes/semi (5e5e96992)
- Add tea.yml (experimental) (36e77c885)
- Remove second twoslash prop too 🤔 (1b2c55765)
- Update .npmrc (#26135)
- Add back stylistic rules and lint project (7252b56d5)
- Remove trailing slash in issue template (#26268)
- Bump ip and follow-redirects (1dc51668a)
- Remove old code (79ea75e72)
- Temporarily remove codspeed plugin (beeda8acf)
- Tidy dependencies (0fc363a4f)
- Update knip schema (d6ce3453c)
- Do not export unused type (c6aa61783)
- nuxt: Ensure type template has const filename (1cae15a3a)
✅ Tests
- Use retryable assertion for
scrollY
(#26298) - Also run composables test with appManifest off (205d0e2fa)
- Remove wait for
networkidle
(9b5bffbbb) - Use locator assertion for body text (3d77e267d)
- Use function assertion for second scrollY test (d981c056d)
- Add type test for appMiddleware route rules (70669012f)
🤖 CI
- Clean up pr cache when it is merged (#25873)
- Skip checking stackoverflow link (0a8c3444a)
- Fix lychee configuration (375bd64c5)
- Run lint step after bundle test (c3c9c4b2a)
- Release in ci when a v3 tag is pushed (c78c1161a)
- Do not cache Playwright browsers (#26296)
❤️ Contributors
- Daniel Roe (@danielroe)
- Damian Głowala (@DamianGlowala)
- Horu (@HigherOrderLogic)
- Max Schmitt (@mxschmitt)
- Tanvir Rahman (@Tanvir-rahman)
- Julien Huang (@huang-julien)
- Maik Kowol (@94726)
- Marc Cremer (@marccremer)
- OrbisK (@OrbisK)
- Anthony Fu (@antfu)
- Martins (@martinszeltins)
- Anthony Aslangul (@toyi)
- Mehmet (@productdevbook)
- Mostafa Said (@MooseSaeed)
- Alex Liu (@Mini-ghost)
- Adam DeHaven (@adamdehaven)
- Harlan Wilton (@harlan-zw)
- Alexander Lichter (@manniL)
- k-karen (@k-karen)
- Ryota Watanabe (@wattanx)
- Antoine Zanardi (@antoinezanardi)
- Sultanov Mirjamol (@cljamal)
- Bogdan Kostyuk (@logotip4ik)
- Divine (@divine)
- Horváth Bálint (@horvbalint)
- i-udas (@i-udas)
- təəna.vuə (@franklin-tina)
- Andre van Tonder (@drevantonder)
- Maxime Pauvert (@maximepvrt)
- Oumar Barry (@oumarbarry)
- Sébastien Chopin (@Atinux)
- Francesco Scutellaro (@noppytinto)
- gangan (@shinGangan)
- Andrea Basile (@Evobaso-J)
- Till Sanders (@tillsanders)
- Michael Brevard (@GalacticHypernova)
- Victor Ribeiro (@ojvribeiro)