Learn Nuxt with a Collection of 100+ Tips!
Release·  

Nuxt 3.15

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance

We're continuing to work on the release of Nitro v3, Nuxt v4 and more. But we're delighted to ship Nuxt v3.15 (just) in time for Christmas.

❄️ Snowfall!

Happy holidays! You'll notice when you start Nuxt that (if you're in the Northern Hemisphere) there's some snow on the loading screen (#29871).

⚡️ Vite 6 included

Nuxt v3.15 includes Vite 6 for the first time. Although this is a major version, we expect that this won't be a breaking change for Nuxt users (see full migration guide). However, please take care if you have dependencies that rely on a particular Vite version.

One of the most significant changes with Vite 6 is the new Environment API, which we hope to use in conjunction with Nitro to improve the server dev environment. Watch this space!

You can read the full list of changes in the Vite 6 changelog.

🪵 Chromium devtools improvements

We talk a lot about the Nuxt DevTools, but v3.15 ships with better integration in dev mode for Chromium-based browser devtools.

We now use the Chrome DevTools extensibility API to add support for printing nuxt hook timings in the browser devtools performance panel.

CleanShot 2024-11-14 at 15 05 22@2x

🗺️ Navigation mode for callOnce

callOnce is a built-in Nuxt composable for running code only once. For example, if the code runs on the server it won't run again on the client. But sometimes you do want code to run on every navigation - just avoid the initial server/client double load. For this, there's a new mode: 'navigation' option that will run the code only once per navigation. (See #30260 for more info.)

await callOnce(() => counter.value++, { mode: 'navigation' })

🥵 HMR for templates, pages + page metadata

We now implement hot module reloading for Nuxt's virtual files (like routes, plugins, generated files) as well as for the content of page metadata (within a definePageMeta macro) (#30113).

This should mean you have a faster experience in development, as well as not needing to reload the page when making changes to your routes.

📋 Page meta enhancements

We now support extracting extra page meta keys (likely used by module authors) via experimental.extraPageMetaExtractionKeys (#30015). This enables module authors to use this information at build time, in the pages:resolved hook.

We also now support local functions in definePageMeta (#30241). This means you can do something like this:

function validateIdParam(route) {
  return !!(route.params.id && !isNaN(Number(route.params.id)))
}

definePageMeta({
  validate: validateIdParam,
})

🔥 Performance improvements

We now preload the app manifest in the browser if it will be used when hydrating the app (#30017).

We'll also tree shake vue-router's hash mode history out of your bundle if we can - specifically, if you haven't customised your app/router.options.ts (#30297).

🐣 v4 updates

If A few more changes shipped for the new defaults for v4, including only inlining styles by default for Vue components (#30305).

✅ Upgrading

As usual, our recommendation for upgrading is to run:

npx nuxi@latest 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.

Full release notes

Read the full release notes of Nuxt v3.15.0.

A huge thank you to everyone who's been a part of this release. ❤️

Don't hesitate to let us know if you have any feedback or issues! 🙏