v3.0.0-rc.12

[danielroe]

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

Beta Testing

Switch to the edge channel.

⭐ What is New?

⚗️ Nitropack@0.6 and h3@0.8

Nitropack upgraded to 0.6. [Release Notes]

⚠️ Breaking changes

Using defineEventHandler is now required. If you were previously using Node.js middleware (req, res, next?) you need to wrap them with fromNodeMiddleware() to convert into h3 handler.

📍 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 vertical are supported).

• redirect - Define server-side redirects.
• ssr - Disables server-side rendering for sections of your app and make them SPA-only with ssr: false
• cors - Automatically adds cors headers with cors: true - you can customize the output by overriding with headers
• headers - Add specific headers to sections of your site - for example, your assets
• static and swr - static enables a single (on-demand) build; swr enables a static build, that lasts for a configurable TTL. (currently enables full incremental static generation on netlify, with Vercel coming soon)

🧪 Route rules are still under active development, and subject to change.

Some examples:

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand, revalidates in background
    '/blog/**': { swr: true },
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Set custom headers matching paths
    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
    // Render these routes with SPA
    '/admin/**': { ssr: false },
    // Add cors headers
    '/api/v1/**': { cors: true },
    // Add redirect headers
    '/old-page': { redirect: '/new-page' },
    '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }
  }
})

👦 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

⚠️ 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 #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(route.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 includeworkspaceDir 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 website-theme@0.1.6 (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
• Lovue
• 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
• 菜狗

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	be08225
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/634eecb920073f0009a6eb1a
😎 Deploy Preview	https://deploy-preview-8067--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.

[codeyash]

@pi0 Please review :)

[FileSoft-us]

@danielroe [nuxt] [request error] [unhandled] [500] The "hints" argument must be of type object. Received type string

[pi0]

@sigliblog Would you please create an issue ? 🙏🏼 /cc @danielroe