v3.5.0
版本发布时间: 2023-05-16 21:32:27
nuxt/nuxt最新发布版本:v3.13.2(2024-09-16 05:27:05)
3.5.0 is a minor (feature) release with lots of new features to play with.
👀 Highlights
⚡️ Vue 3.3 released!
Vue 3.3 has been released, with lots of exciting features, particularly around type support. This also brings a significant improvement to data fetching when navigating between nested pages (https://github.com/nuxt/nuxt/pull/20777), thanks to @antfu and @baiwusanyu-c.
- new
defineOptions
macro - 'generic' components
- typed slots and using external types in defineProps
- ... and more
Read the full release announcement for more details.
🙌 Nitropack v2.4
We've been working on lots of improvements to Nitro and these have landed already in Nitro v2.4 - you may already have this upgrade, which contains a lot of bug fixes, updates to the module worker format for Cloudflare, Vercel KV support and more.
One note: if you're deploying to Vercel or Netlify and want to benefit from incremental static regeneration, you should now update your route rules:
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
Read the full release notes.
💖 New defaults
Rich JSON payload serialisation is now enabled by default (https://github.com/nuxt/nuxt/pull/19205, https://github.com/nuxt/nuxt/pull/20770). This is both faster and allows serialising complex objects in the payload passed from the Nuxt server to client (and also when extracting payload data for prerendered sites).
This now means that various rich JS types are supported out-of-the-box: regular expressions, dates, Map and Set and BigInt as well as NuxtError - and Vue-specific objects like ref
, reactive
, shallowRef
and shallowReactive
.
You can find an example in our test suite.
This is all possible due to Rich-Harris/devalue#58. For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original.
You can even register your own custom types with a new object-syntax Nuxt plugin:
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
You can read more about how this works here.
🛝 Interactive server components
This feature should be considered highly experimental, but thanks to some great work from @huang-julien we now support interactive content within server components via slots (https://github.com/nuxt/nuxt/pull/20284).
You can follow the server component roadmap at https://github.com/nuxt/nuxt/issues/19772.
⏰ Environment config
You can now configure fully typed, per-environment overrides in your nuxt.config
:
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
If you're authoring layers, you can also use the $meta
key to provide metadata that you or the consumers of your layer might use.
Read more: https://github.com/nuxt/nuxt/pull/20329.
💪 Fully typed pages
You can benefit from fully typed routing within your Nuxt app via this experimental integration with https://github.com/posva/unplugin-vue-router - thanks to some great work from @posva! Out of the box, this will enable typed usage of navigateTo
, <NuxtLink>
, router.push()
and more. You can even get typed params within a page by using const route = useRoute('route-name')
.
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
🔎 'Bundler' module resolution
We now have full support within Nuxt for the bundler
strategy of module resolution. We would recommend adopting this if possible. It has type support for subpath exports, for example, but more exactly matches the behaviour of build tools like Vite and Nuxt than Node16
resolution.
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
This turns on TypeScript's ability to 'follow' Node subpath exports. For example, if a library has a subpath export like mylib/path
that is mapped to mylib/dist/path.mjs
then the types for this can be pulled in from mylib/dist/path.d.ts
rather than requiring the library author to create mylib/path.d.ts
.
⚗️ Separate server types
We plan to improve clarity within your IDE between the 'nitro' and 'vue' part of your app, and we've shipped the first part of this via a separate generated tsconfig.json
for your ~/server
directory (https://github.com/nuxt/nuxt/pull/20559). You can use by adding an additional ~/server/tsconfig.json
with the following content:
{
"extends": "../.nuxt/tsconfig.server.json"
}
Although right now these values won't be respected when type checking, you should get better type hints in your IDE.
💀 Deprecations
Although we have not typed or documented the build.extend
hook from Nuxt 2, we have been calling it within the webpack builder. We are now explicitly deprecating this and will remove it in a future minor version.
✅ 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
-
kit: Add
prepend
option toaddImportsDir
(#20307) - nuxt: Add scoped helper for clearing error within boundary (#20508)
- nuxt: Auto import 'watchPostEffect' and 'watchSyncEffect' from vue (#20279)
-
vite: Introduce
vite:configResolved
hook (#20411) -
webpack: Introduce
webpack:configResolved
hook (#20412) - kit: Allow vite and webpack plugins to be prepended (#20403)
- nuxt: Add layer meta and env overrides to config types (#20329)
- test-utils: Add option to configure test server port (#20443)
- nuxt: Allow access to components within app (#20604)
-
kit: Support passing getter to
addVitePlugin
andaddWebpackPlugin
(#20525) -
cli: Allow greater control of
nuxi analyze
from cli (#20387) -
nuxt: Add
nuxtApp.runWithContext
(#20608) - deps: Upgrade to nitropack v2.4 (#20688)
-
nuxt: Add experimental
typedPages
option (#20367) - nuxt: Add apps to nuxt build-time instance (#20637)
- cli: Allow passing overrides to other nuxi commands (#20760)
- schema: Enable rich json payloads by default (#20770)
- deps: Update vue to v3.3 (#20478)
-
nuxt: Use
runWithContext
withincallWithNuxt
(#20775) -
nuxt: Add
useRequestURL
helper (#20765) -
nuxt: Allow fallback production content in
<DevOnly>
(#20817) -
kit:
addBuildPlugin
for builder-agnostic implementation (#20587) -
nuxt: Allow keeping fallback for
NuxtClientFallback
(#20336) - nuxt: Support separate server tsconfig (#20559)
- nuxt: Full scoped slots support for server components (#20284)
- nuxt: Support parallel plugins (#20460)
🩹 Fixes
- nuxt: Remove backwards-compatible runtimeConfig proxy (#20340)
-
nuxt: Add
@nuxt/devtools
module before core modules (#20595) - nuxt: Properly handle query for component wrapper (#20591)
- nuxt: Skip payload extraction for island context (#20590)
-
nuxt: Remove internal
<FragmentWrapper>
(#20607) -
nuxt: Ensure
useError
is called with nuxt app context (#20585) - nuxt: Run page meta plugin on all pages (and only pages) (#20628)
-
nuxt, vite: Ignore
nuxt_component
ssr style andisVue
(#20679) -
webpack: Warn when using deprecated
build.extend
hook (#20605) - nuxt: Allow resolving client nuxt app to singleton (#20639)
- nuxt: Generate empty sourcemaps for wrappers (#20744)
- nuxt: Prevent treeshaking hooks with composable names (#20745)
- kit: Prefer esm resolution for modules to install (#20757)
-
vite: Expand
fs.allow
dirs to include app files (#20755) - nuxt: Deduplicate global components before registration (#20743)
- nuxt: Remove webstorm compatibility augmentation (0258acdc8)
- nuxt: Enable suspensible behaviour for nested pages (#20777)
-
cli: Hard-reload nuxt when
.env
changes (#20501) - nuxt: Avoid destructuring error prop (works around upstream bug) (#20795)
- nuxt: Always inline styles for server/island components (#20599)
- nuxt: Allow serialising undefined refs (#20828)
- nuxt: Transform client fallbacks directly on SFCs (#20835)
- vite: Dedupe/optimize more vue core deps (#20829)
-
nuxt: Get fallback for
<DevOnly>
from parsed html (#20840) - nuxt: Ensure all dir parts are present in component name (#20779)
-
nuxt: Allow
pages:extend
to enable pages module (#20806) - nuxt: Stop loading indicator on vue errors (#20738)
- nuxt: Add types for webpack/vite environments (#20749)
-
nuxt: Pass from + savedPosition to first
scrollBehavior
(#20859)
💅 Refactors
-
schema: Move
runtimeCompiler
option out of experimental (#20606) -
kit: Use esm utils for
resolvePath
(#20756)
📖 Documentation
- Fix typo (#20577)
- Update tailwind configuration guide (#20598)
- Fix fetch composable examples (#20603)
- Note that
useCookie
does not share state (#20665) - Selective pre-rendering options (#20670)
- Ensure we guard all
navigateTo
examples (#20678) - Add
useSeoMeta
anduseServerSeoMeta
pages (#20656) - Recommend
<NuxtLayout>
when migratingerror.vue
(#20690) - Add lagon to presets list (#20706)
- Add
await
before lazy composable examples (7e7e006e9) - Add missing step migrating to
pinia
(#20778) - Server directory improvements (d53cc604d)
🏡 Chore
- Revert markdownlint upgrade (da29dea5c)
- Run docs lint workflow on dep upgrades (c536e5a63)
- Revert
markdownlint-cli
update and prevent auto-update (675445f98) - Ban
@ts-ignore
(4f0d3d4ae) - Do not install example dependencies (#20689)
- Disallow
.only
in tests (ad97cb45a) - Type-check
.mjs
files (#20711) - Fix typo in
pnpm-workspace.yaml
(#20751) - Update target for
externalVue
removal (a33d2e7ae) - Lint (742f61766)
✅ Tests
- Test with bundler module resolution (#20629)
🤖 CI
- Run autofix on renovate branches (af75f18cf)
- Run 2.x nightly release on node 16 (a81f9e4c8)
- Add conditional for node 16 test (aee1218e6)
- Set max memory for nuxt2 release script globally (d1a5719cb)
- Add workflow to release branches (bc28d536c)
- Update pr condition (f8c7b34bd)
- Update repo 🤣 (f88c1e645)
- Allow specifying tag for edge releases (5fdb6a6d6)
- Comment with link to tag of released version (f945cb197)
- Pass tag as argument (1aec0e503)
- Release edge versions of labelled prs (cdc42d044)
❤️ Contributors
- Daniel Roe (@danielroe)
- Sébastien Chopin (@Atinux)
- Anthony Fu (@antfu)
- Julien Huang (@huang-julien)
- Alexander (@xanderbarkhatov)
- Dario Ferderber (@darioferderber)
- 白雾三语 (@baiwusanyu-c)
- Inesh Bose (@ineshbose)
- Lehoczky Zoltán (@Lehoczky)
- Emile Caron (@emilecaron)
- Eckhardt (Kaizen) Dreyer (@Eckhardt-D)
- Eduardo San Martin Morote
- Tom Lienard (@QuiiBz)
- Scscgit (@scscgit)
- Clément Ollivier (@clemcode)
- Jamie Warburton (@Jamiewarb)
- Enkot (@enkot)
- Phojie Rengel (@phojie)
- Harlan Wilton (@harlan-zw)
- Gergő Jedlicska (@gjedlicska)
- Stefan Milosevic (@smilosevic)
- Pavel Mokin (@Lyrialtus)