v3.14.0

[github-actions]

3.14.0 is the next minor release.

Timetable: 4 November

👀 Highlights

Behind the scenes, a lot has been going on in preparation for the release of Nuxt v4 (particularly on the unjs side with preparations for Nitro v3!)

⚡️ Faster starts powered by jiti

Loading the nuxt config file, as well as modules and other build-time code, is now powered by jiti v2. You can see more about the release in the jiti v2 release notes, but one of the most important pieces is native node esm import (where possible), which should mean a faster start. ✨

📂 Shared folder for code and types shared with client/server

You should never import Vue app code in your nitro code (or the other way around). But this has meant a friction point when it comes to sharing types or utilities that don't rely on the nitro/vue contexts.

For this, we have a new shared/ folder (#28682). You can't import Vue or nitro code into files in this folder, but it produces auto-imports you can consume throughout the rest of your app.

If needed you can use the new #shared alias which points to this folder.

The shared folder is alongside your server/ folder. (If you're using compatibilityVersion: 4, this means it's not inside your app/ folder.)

🦀 rspack builder

We're excited to announce a new first-class Nuxt builder for rspack. It's still experimental but we've refactored the internal Nuxt virtual file system to use unplugin to make this possible.

Let us know if you like it - and feel free to raise any issues you experience with it.

👉 To try it out, you can use this starter - or just install @nuxt/rspack-builder and set builder: 'rspack' in your nuxt config file.

✨ New composables

We have new useResponseHeader and useRuntimeHook composables (#27131 and #29741).

🔧 New module utilities

We now have a new addServerTemplate utility (#29320) for adding virtual files for access inside nitro runtime routes.

🚧 v4 changes

We've merged some changes which only take effect with compatibilityVersion: 4, but which you can opt-into earlier.

1. previously, if you had a component like ~/components/App/Header.vue this would be visible in your devtools as <Header>. From v4 we ensure this is <AppHeader>, but it's opt-in to avoid breaking any manual <KeepAlive> you might have implemented. (#28745).

2. Nuxt scans page metadata from your files, before calling pages:extend. But this has led to some confusing behaviour, as pages added at this point do not end up having their page metadata respected. So we now do not scan metadata before calling pages:extend. Instead, we have a new pages:resolved hook, which is called after pages:extend, after all pages have been augmented with their metadata. I'd recommend opting into this by setting experimental.scanPageMeta to after-resolve, as it solves a number of bugs.

🗺️ Roadmap to v3.15

They didn't quite make it in time for v3.14 but for the next minor release you can expect (among other things):

• auto-imported directives from modules (#29203)
• 'isolated' page renders (#29366)
• delayed hydration (#26468)

👉 Changelog

compare changes

🚀 Enhancements

• deps: Upgrade to latest version of jiti (#27995)
• kit,nuxt,vite,webpack: Reimplement cjs utils using jiti (#29073)
• nuxt: Normalise component names to match nuxt pattern (#28745)
• kit,schema: Add addServerTemplate utility (#29320)
• nuxt: Add useResponseHeader composable (#27131)
• rspack,webpack: Add rspack builder (#29142)
• nuxt,schema: pages:resolved hook + scan meta post extend (#28861)
• nuxt: Allow enabling route props in definePageMeta (#29586)
• schema,nuxt: Add shared/ folder and #shared alias (#28682)
• nuxt: Allow chunk error or manifest update -> reload (#28160)
• nuxt: Add useRuntimeHook composable (#29741)

🔥 Performance

• nuxt: Remove unneeded second call to useNuxtApp (#29514)
• vite: Avoid redundant postcss plugins overwrite (#29619)
• kit,nuxt,vite,webpack: Hoist regex patterns (#29620)

🩹 Fixes

• nuxt: Simplify plugin InjectionType template conditional (#29023)
• nuxt: Access server build from webpack memfs (#29027)
• nuxt: Do not resolve non-absolute component paths (#29036)
• nuxt: Defer unsetting error handler until suspense resolves (#29037)
• nuxt: Pass DOMException as fetch abort exception (#29058)
• vite: Don't force protocol if disabled devServer.https (#29049)
• nuxt: Empty nitro buildDir in dev mode (#29068)
• nuxt: Don't resolve relative import type paths for deps (#29069)
• kit: Handle passing 'bare' relative paths to modules (c7fecd8a1)
• kit: Try resolving module path from each node_modules dir (70a622d43)
• kit,vite,webpack: Resolve postcss paths from each modules dir (#29096)
• kit,vite,webpack: Strip node_modules/ from parent urls (5bd42c893)
• nuxt: Add crossorigin attribute for stylesheets (#29138)
• nuxt: Use routeRules to hint pages to prerender (#29172)
• nuxt: Pass absolute external link urls to link:prefetch (#29321)
• nuxt: Error on build when required module is missing (#29287)
• nuxt: Prevent 404 when hitting component test endpoint (cb725f014)
• nuxt: Avoid throwing 404 error before middleware finishes (#29054)
• schema: Use ConfigLayer type from c12 (#29370)
• nuxt: Fix nested page types in typedPages (#29352)
• nuxt: Allow islands to manipulate head client-side (#29186)
• vite: Dim repeat count in logs (#29392)
• schema: Mark configFile as required in layer type (3bbcd7d21)
• nuxt: Remove vue compiler hints from auto import (#29713)
• vite: Update signature for createIsExternal (686be8168)
• nuxt: Respect existing props value in definePageMeta (#29683)
• schema: Hoist nitropack/types to ensure api routes are typed (54096875e)

💅 Refactors

• nuxt: Use addBuildPlugin internally (#29157)
• nuxt,schema,vite,webpack: Use unplugin for vfs (#29165)

📖 Documentation

• Use defineNuxtComponent instead of defineComponent (#29011)
• Remove duotone icons for clarity (#29040)
• Fix typo (#29045)
• Remove specific Nuxt 4 release date (#29151)
• Remove redundant newlines and indentations (#29190)
• Add links to short videos from daniel (#29185)
• Fix comments typo in auto-imports example (#29195)
• Add missing word (#29230)
• Add a section about useRequestFetch and event.$fetch (#29099)
• Add example of typing custom useFetch errors (#29253)
• Ensure manifest code snippet works with pnpm (#29273)
• Consistent directory structure (#29292)
• Update to new ofetch headers for interceptors (#29118)
• Mention upgrading third-party configs (#27768)
• Improve explanation of ssr + data fetching (#29010)
• Add a description for .env.test (#29398)
• Add section on 'updateAppConfig' in the 'app.config' page (#29397)
• Add example to navigateTo util (#29611)
• Remove mockImplementation() call (#29669)
• Update lifecycle hooks (#29678)
• Type cast api plugin in custom usefetch example (#29756)
• Correct some errors about proxying headers with $fetch (#29755)
• Add information on --envName flag (#28909)
• Add error expectation (09885b87e)

📦 Build

• ui-templates: Switch to beasties (1b5391182)

🏡 Chore

• Add more checks around indexed access (#29060)
• Refresh lockfile (f76f85a82)
• Revert unbuild update (71e0fb06f)
• Use jiti.import (7ece49f9b)
• Update nitropack to 2.10.2 (#29766)

✅ Tests

• Bump bundle snapshot (e57e65c08)
• Add basic assertions for unctx transform (d81196122)
• Fix assertion for style snapshot (7f311e773)
• Move catchall path to subdirectory (#29331)
• Update snapshot for fix(nuxt): preserve route-specific metadata on route.meta #28441 (a248f24f5)
• Add compat code for vite v6 (#29677)

🤖 CI

• Rspack semantic scope (db65d2165)
• Update lychee config (#29162)
• Release dependency updates on nightly channel (271149bd2)

❤️ Contributors

• Daniel Roe (@danielroe)
• xjccc (@xjccc)
• Pooya Parsa (@pi0)
• Damian Głowala (@DamianGlowala)
• Till Sanders (@tillsanders)
• Nils (@BracketJohn)
• Estéban (@Barbapapazes)
• John Tanzer (@moshetanzer)
• Cruz (@SparK-Cruz)
• Anthony Fu (@antfu)
• 翠 / green (@sapphi-red)
• Taras Batenkov (@enkot)
• Michael Brevard (@GalacticHypernova)
• Bobbie Goede (@BobbieGoede)
• Panopoulos Andreas (@b0ul17)
• Julien Huang (@huang-julien)
• Dawit (@oneminch)
• Ryota Watanabe (@wattanx)
• Alexander (@hywax)
• Ryoya (@harunari0928)
• Jelmer (@jelmerdemaat)
• Nishant Aanjaney Jalan (@cybercoder-naj)
• Christoph Heike (@cheike569)
• Sébastien Chopin (@atinux)
• Jeremy Graziani (@AcelisWeaven)
• Domenik Reitzner (@dreitzner)
• Jeel Rupapara (@zeelrupapara)
• Matej Černý (@CernyMatej)
• Leopold Kristjansson (@leopoldkristjansson)
• Horváth Bálint (@horvbalint)
• 一纸忘忧 (@ikxin)
• Bochkarev Ivan (@Ibochkarev)
• Joschua (@selfire1)
• Indrek Ardel (@Ingramz)
• DarkVen0m (@DarkVen0m)
• Ezra Ashenafi (@Eazash)

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[tobychidi]

Issue with Nitropack 2.10.0 causing build failure in Nuxt project

After updating Nitropack to version 2.10.0, my Nuxt project fails to build with the error [worker reload] [worker init] C:/Users/tobychidi/Documents/GitHub/kaycee/Rotabliss/.nuxt/dev/index.mjs failed.

Environment:

• Operating System: Windows_NT
• Node Version: v20.18.0
• Nuxt Version: 3.13.2
• CLI Version: 3.15.0
• Nitro Version: 2.9.7
• Package Manager: pnpm@9.12.3
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/ui@3.0.0-alpha.7, @pinia/nuxt@0.6.1, @nuxt/image@1.8.1, @vueuse/nuxt@11.2.0, nuxt-gtag@3.0.1, @nuxt/eslint@0.6.1, @nuxtjs/leaflet@1.2.3
• Build Modules: -

Additional Information:

• No recent changes were made to the project before updating Nitropack.

[danielroe]

@tobychidi would you raise an issue at https://github.com/unjs/nitro ?

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.