nuxt

👀 Highlights

This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨

🪵 Better logging

When developing a Nuxt application and using console.log in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past!

Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. Asynchronous context is used to track and associate these logs with the request that triggered them. (#25936).

For example, this code:

<script setup>
console.log('Log from index page')

const { data } = await useAsyncData(() => {
  console.log('Log inside useAsyncData')
  return $fetch('/api/test')
})
</script>

will now log to your browser console when you refresh the page:

Log from index page
[ssr] Log inside useAsyncData 
    at pages/index.vue

👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future.

We've also added a dev:ssr-logs hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to.

If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console.

export default defineNuxtConfig({
  features: {
    devLogs: false
    // or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
  },
})

🎨 Preview mode

A new usePreviewMode composable aims to make it simple to use preview mode in your Nuxt app.

const { enabled, state } = usePreviewMode()

When preview mode is enabled, all your data fetching composables, like useAsyncData and useFetch will rerun, meaning any cached data in the payload will be bypassed.

Read more in the docs.

💰 Cache-busting payloads

We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment.

👮‍♂️ Middleware routeRules

It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) (#25841).

export default defineNuxtConfig({
  routeRules: {
    '/admin/**': {
      // or appMiddleware: 'auth'
      appMiddleware: ['auth']
    },
    '/admin/login': {
      // You can 'turn off' middleware that would otherwise run for a page
      appMiddleware: {
        auth: false
      }
    },
  },
})

⌫ New clear data fetching utility

Now, useAsyncData and useFetch expose a clear utility. This is a function that can be used to set data to undefined, set error to null, set pending to false, set status to idle, and mark any currently pending requests as cancelled. (#26259)

<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')

const route = useRoute()
watch(() => route.path, (path) => {
  if (path === '/') clear()
})
</script>

🕳️ New #teleports target

Nuxt now includes a new <div id="teleports"></div> element in your app within your <body> tag. It supports server-side teleports, meaning you can do this safely on the server:

<template>
  <Teleport to="#teleports">
    <span>
      Something
    </span>
  </Teleport>
</template>

🚦 Loading indicator and transition controls

It's now possible to set custom timings for hiding the loading indicator, and forcing the finish() method if needed (#25932).

There's also a new page:view-transition:start hook for hooking into the View Transitions API (#26045) if you have that feature enabled.

🛍️ Server- and client-only pages

This release sees server- and client-only pages land in Nuxt! You can now add a .server.vue or .client.vue suffix to a page to get automatic handling of it.

Client-only pages will render entirely on the client-side, and skip server-rendering entirely, just as if the entire page was wrapped in <ClientOnly>. Use this responsibly. The flash of load on the client-side can be a bad user experience so make sure you really need to avoid server-side loading. Also consider using <ClientOnly> with a fallback slot to render a skeleton loader (#25037).

⚗️ Server-only pages are even more useful because they enable you to integrate fully-server rendered HTML within client-side navigation. They will even be prefetched when links to them are in the viewport - so you will get instantaneous loading (#24954).

🤠 Server component bonanza

When you are using server components, you can now use the nuxt-client attribute anywhere within your tree (#25479).

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  },
})

You can listen to an @error event from server components that will be triggered if there is any issue loading the component (#25798).

Finally, server-only components are now smartly enabled when you have a server-only component or a server-only page within your project or any of its layers (#26223).

🔥 Performance improvements

We've shipped a number of performance improvements, including only updating changed virtual templates (#26250), using a 'layered' prerender cache (#26104) that falls back to filesystem instead of keeping everything in memory when prerendering - and lots of other examples.

📂 Public assets handling

We have shipped a reimplementation of Vite's public asset handling, meaning that public assets in your public/ directory or your layer directories are now resolved entirely by Nuxt (#26163), so if you have added nitro.publicAssets directories with a custom prefix, these will now work.

📦 Chunk naming

We have changed the default _nuxt/[name].[hash].js file name pattern for your JS chunks. Now, we default to _nuxt/[hash].js. This is to avoid false positives by ad blockers triggering off your component or chunk names, which can be a very difficult issue to debug. (#26203)

You can easily configure this to revert to previous behaviour if you wish:

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[name].[hash].js',
            entryFileNames: '_nuxt/[name].[hash].js'
          }
        }
      }
    }
  },
})

💪 Type fixes

Previously users with shamefully-hoist=false may have encountered issues with types not being resolved or working correctly. You may also have encountered problems with excessive type instantiation.

We now try to tell TypeScript about certain key types so they can be resolved even if deeply nested (#26158).

There are a whole raft of other type fixes, including some regarding import types (#26218 and #25965) and module typings (#25548).

✅ 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

compare changes

🚀 Enhancements

• nuxt: Server-only pages (#24954)
• nuxt: Client-only pages (#25037)
• nuxt: Allow using nuxt-client in all components (#25479)
• nuxt: Add page:view-transition:start hook (#26045)
• nuxt: Custom loading reset/hide delay + force finish() (#25932)
• nuxt: Emit error if <NuxtIsland> can't fetch island (#25798)
• nuxt: usePreviewMode composable (#21705)
• nuxt: Support async transforms for data composables (#26154)
• nuxt: Add dedicated #teleports element for ssr teleports (#25043)
• nuxt: Enable islands if server pages/components present (#26223)
• nuxt: Allow generating metadata for nuxt components (#26204)
• vite: Handle multiple/custom public dirs (#26163)
• schema: Allow configuring type hoists with typescript.hoist (85166cced)
• nuxt: Pass nuxt instance to getCachedData (#26287)
• nuxt: Pass server logs to client (#25936)
• Add route rule ()

🔥 Performance

• Early return chained functions with falsy values (#25647)
• nuxt: Don't check isPrerendered in dev for server page (#26061)
• nuxt: Use fallthrough cache for prerender (#26104)
• nuxt: Tree shake island renderer (8323220f7)
• nuxt: Skip adding selective-client code if not enabled (#26176)
• nuxt: Use faster approach to check cache exists (#26172)
• nuxt: Only update changed templates (#26250)

🩹 Fixes

• kit: Apply nuxt types to .config/nuxt.config (5440ecece)
• kit: Widen pattern to .config/nuxt.* (7815aa534)
• nuxt: Align error in showError/createError with h3 (#25945)
• kit: Don't warn if middleware is added twice (08b656a04)
• nuxt: Don't try to strip directory file extensions (#25965)
• nuxt: Produce valid css selector from useId (#25969)
• schema: Add vueCompilerOptions property to tsConfig (#25924)
• nuxt: Skip vue style blocks in unctx transform (#26059)
• nuxt: Pass event to useRuntimeConfig in Nuxt renderer (#26058)
• schema: Disable typescript.shim in favour of volar (#26052)
• nuxt: Only check if server page is prerendered on client (#26081)
• nuxt: Don't refetch server components in initial html (#26089)
• nuxt: Resolve defu/h3 paths in type templates (#26085)
• nuxt: Use exported toExports from unimport (#26086)

💅 Refactors

• nuxt: Simplify request computation (#26191)
• nuxt: Rename nuxtMiddleware to appMiddleware (cac745470)
• nuxt: Use addTypeTemplate for page augmentations (4925670dc)
• nuxt: Use addTypeTemplate in more places (33ce71dd1)

📖 Documentation

• Mention when useId composable was introduced (#25953)
• Add domEnvironment option to testing example (#25972)
• Update VS Code settings (#25985)
• Mention island features are SFC only (#26013)
• Improve pick and transform doc (#26043)
• Fix 404 link (8e6d2306c)
• Add Nuxt Fonts to changelog (#26077)
• Update roadmap (#26072)
• Document fallback prop for <NuxtLayout> (#26091)
• Add documentation for using layers with private repos (#26094)
• Remove twoslash from code sample (0bf70bd7a)
• Update cssnano website url (d6edb30c5)
• Add warning about latest vue-tsc (#26083)
• Improve readme readability (#26118)
• Added bridge macros.pageMeta and typescript.esbuild option (#26136)
• Fix bracket escape on definePageMeta page (#26139)
• Add app:manifest:update hook (#26192)
• Add cache.varies docs for multi-tenant use case (#26197)
• Add mentions on Vue School tutorials ()

🏡 Chore

• Use consistent quotes/semi (5e5e96992)
• Add tea.yml (experimental) (36e77c885)
• Remove second twoslash prop too 🤔 (1b2c55765)
• Update .npmrc (#26135)
• Add back stylistic rules and lint project (7252b56d5)
• Remove trailing slash in issue template (#26268)
• Bump ip and follow-redirects (1dc51668a)
• Remove old code (79ea75e72)
• Temporarily remove codspeed plugin (beeda8acf)
• Tidy dependencies (0fc363a4f)
• Update knip schema (d6ce3453c)
• Do not export unused type (c6aa61783)
• nuxt: Ensure type template has const filename (1cae15a3a)

✅ Tests

• Use retryable assertion for scrollY (#26298)
• Also run composables test with appManifest off (205d0e2fa)
• Remove wait for networkidle (9b5bffbbb)
• Use locator assertion for body text (3d77e267d)
• Use function assertion for second scrollY test (d981c056d)
• Add type test for appMiddleware route rules (70669012f)

🤖 CI

• Clean up pr cache when it is merged (#25873)
• Skip checking stackoverflow link (0a8c3444a)
• Fix lychee configuration (375bd64c5)
• Run lint step after bundle test (c3c9c4b2a)
• Release in ci when a v3 tag is pushed (c78c1161a)
• Do not cache Playwright browsers (#26296)

❤️ Contributors

• Daniel Roe (@danielroe)
• Damian Głowala (@DamianGlowala)
• Horu (@HigherOrderLogic)
• Max Schmitt (@mxschmitt)
• Tanvir Rahman (@Tanvir-rahman)
• Julien Huang (@huang-julien)
• Maik Kowol (@94726)
• Marc Cremer (@marccremer)
• OrbisK (@OrbisK)
• Anthony Fu (@antfu)
• Martins (@martinszeltins)
• Anthony Aslangul (@toyi)
• Mehmet (@productdevbook)
• Mostafa Said (@MooseSaeed)
• Alex Liu (@Mini-ghost)
• Adam DeHaven (@adamdehaven)
• Harlan Wilton (@harlan-zw)
• Alexander Lichter (@manniL)
• k-karen (@k-karen)
• Ryota Watanabe (@wattanx)
• Antoine Zanardi (@antoinezanardi)
• Sultanov Mirjamol (@cljamal)
• Bogdan Kostyuk (@logotip4ik)
• Divine (@divine)
• Horváth Bálint (@horvbalint)
• i-udas (@i-udas)
• təəna.vuə (@franklin-tina)
• Andre van Tonder (@drevantonder)
• Maxime Pauvert (@maximepvrt)
• Oumar Barry (@oumarbarry)
• Sébastien Chopin (@Atinux)
• Francesco Scutellaro (@noppytinto)
• gangan (@shinGangan)
• Andrea Basile (@Evobaso-J)
• Till Sanders (@tillsanders)
• Michael Brevard (@GalacticHypernova)
• Victor Ribeiro (@ojvribeiro)