v3.0.0-rc.10

[pi0]

Note
This PR includes draft notes for the next release version of Nuxt 3. We plan to release 3-4 more release candidates until the final 3.0.0 version.

Beta Testing

Switch to the edge channel.

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 feature 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'

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)

🚀 Enhancements

• nuxt, vite: Inline global and component styles in server response (#7160)
• nuxt: Custom history and routes for app/router.options.ts (#7129)
• nuxt: Router with hash mode (#6980)
• nuxt: Allow extending routes with custom alias (#7074)
• test-utils: Add mockFn and mockLogger utils (#6235)
• nuxt: Support experimental flag to render no client-side js (#7248)
• kit: Add addImportsSources utility (#7270)
• nuxt: Add immediate option for useAsyncData and useFetch (#5500)
• nuxt: Add clearNuxtData (#5227)
• Allow client-side sourcemaps in production (#7313)
• nuxt: Filter support for clearNuxtData (#7323)
• cli: Switch to unjs/giget for nuxi init (#7361)
• cli: ⚠️ Use giget 0.1x with template registry for nuxi init (#7404)
• nuxt: Payload rendering support (#6455)
• nuxt: Allow exposing type augmentations from extends layers (#7442)
• nuxt: Add workspaceDir option and add it to modulesDir (#7439)
• nuxt: Support prefetching <nuxt-link> (#4329)
• nuxt: Allow passing transition & keepalive props to <NuxtPage> (#7492)
• nuxt, kit: Auto import defineNuxtConfig (#7497)
• nuxt: Generate spa fallback for nuxt generate (#7507)

🔥 Performance

• nuxt: Cache createClientOnly wrapper using weakmap (#7297)
• vite: Remove duplicate css links from rendered page when inlined (#7264)
• nuxt: Only inject preload helper when webpack is used (#7460)
• nuxt: Import defineNuxtConfig from nuxt/config (#7485)
• Enable treeshakeClientOnly flag by default (#7484)

🩹 Fixes

• nuxt: Update default redirect code of navigateTo to 302 Found (#7189)
• head: Case http-equiv correctly (#7190)
• kit, nuxi: Semver regexp to support nuxt-edge current releases (bridge) (#7193)
• vite: Use baseURL + assetsDir as base in dev mode (#7234)
• vite: Pass ssr condition to getModuleByUrl (#7260)
• nuxt: Import and wrap client-only components once (#7245)
• cli: Pass value of https through to vite-node (#7271)
• nuxt: Don't override payload error if it is present (#7290)
• nuxt: Don't try to set cookie after redirect (#7288)
• webpack: Promisify webpack dev/hot handlers using h3.promisifyHandler (#7275)
• schema: Disallow setting vite server properties (#7317)
• schema: Mark vite server as optional (#7327)
• nuxt: Allow abortMiddleware to receive a nuxt error or error options (#7335)
• webpack: Don't parse styles for composable keys (#7333)
• vite: Allow overriding vite sourcemap (#7342)
• schema: Resolve ssr (#7359)
• kit: Add default config layer without nuxt.config file (#7358)
• vite: Update render if it is invalidated (#7347)
• vite: Warmup improvements (#7377)
• cli: Don't include an array of paths within an array (#7378)
• vite: Write dev manifest before spa build (#7380)
• nuxt: De-default layout/component imports (#7389)
• nuxt: Always inline entry styles (#7386)
• nuxt: Do not apply import protection to top-level resolution (#7344)
• nuxt: Use more specific FetchError for useFetch errors (#7435)
• vite: Use same asset filenames between server and client (#7436)
• nuxt: Augment GlobalComponents from @vue/runtime-core (#7448)
• vite: Don't fail builds for virtual modules that don't support inlining (#7440)
• nuxt: Only delete assets when building (#7486)
• vite: Show formatted vite-node errors (#7509)
• vite: Disable server warmup with vite-node (#7512)

💅 Refactors

• vite: Reuse resolved server entry from context (#7268)
• schema: Upgrade to untyped 0.5 (#7452)
• nuxt: Use relative imports into composables (#7487)

📖 Documentation

• Add note about useFetch auto generated key (#7044)
• api: Enhance useHead composable (#7072)
• Add note about fetching data on initial load (#7120)
• Document external option of navigateTo (#7188)
• guide: Add .client and .server components (#7084)
• Fix markdown file name (#7231)
• api: Navigate to first item in list (#7232)
• Extend description of server handlers (#7187)
• api: Add example for fetch interceptors (#7180)
• deploy: Add node cluster mode (#7089)
• api: Fix useAsyncData signature (#7242)
• Add app-config example (#7247)
• Fix typo (#7262)
• Fix typo in url (#7272)
• Rename AppConfig to AppConfigInput (#7293)
• api: Fix typo in use-fetch (#7310)
• api: Add nuxi prepare command (#7349)
• head: Enhance usehead and fix broken links (#7364)
• Remove duplicate word (#7387)
• api: Add useRuntimeConfig page (#7406)
• Fix typo (#7437)
• Update structure (#7047)
• Update name of the generated imports.d.ts file (#7474)
• getting-started: Add routing page (#7495)
• Update codesandbox link (#7499)
• schema: Change srcDir example to src/ (#7503)

🏡 Chore

• Update CodeSandbox links (#7318)

📦 Build

• cli: Add node to export conditions (0cc49e2a)

✅ Tests

• Use semantic runIf and skipIf helpers (#7312)
• nuxt: Add tests for import protection plugin (#7416)

🤖 CI

• Crawl docs site for new deployments to track broken links (#7473)

❤️ Contributors

• Adewale Abati
• Alex Kozack
• Alex Liu
• Alexander Lichter
• AndreyYolkin
• Anthony Fu
• Clément Ollivier
• Corey Richardson
• Damian Głowala
• Daniel Roe
• Harlan Wilton
• HomWang
• Julien Huang
• Krutie Patel
• Kévin Schnekenburger
• Leon Si
• Mahdi Boomeri
• Mastercuber
• Pooya Parsa
• Ricardo Gobbo De Souza
• Sébastien Chopin
• Tobias Diez
• Tobias SN
• Vasily Stepanov
• Victorkwok97
• Vl4dimyr

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	261afef
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/632200bd590a8a0008d41076
😎 Deploy Preview	https://deploy-preview-7374--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.