v3.17.0

#nuxt

👀 Highlights

This release brings a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!

A major reorganization of Nuxt's data fetching layer brings significant improvements to useAsyncData and useFetch.

Although we have aimed to maintain backward compatibility and put breaking changes behind the experimental.granularCachedData flag (disabled by default), we recommend testing your application thoroughly after upgrading. You can also disable experimental.purgeCachedData to revert to the previous behavior if you are relying on cached data being available indefinitely after components using useAsyncData are unmounted.

👉 Read the the original PR for full details (#31373), but here are a few highlights.

All calls to useAsyncData or useFetch with the same key now share the underlying refs, ensuring consistency across your application:

&LT!-- ComponentA.vue -->

This solves various issues where components could have inconsistent data states.

You can now use computed refs, plain refs, or getter functions as keys:

const userId = ref('123')
const { data: user } = useAsyncData(
  computed(() => `user-${userId.value}`),
  () => fetchUser(userId.value)
)

// Changing the userId will automatically trigger a new data fetch
// and clean up the old data if no other components are using it
userId.value = '456'

Multiple components watching the same data source will now trigger only a single data fetch when dependencies change:

// In multiple components:
const { data } = useAsyncData(
  'users', 
  () => $fetch(`/api/users?page=${route.query.page}`),
  { watch: [() => route.query.page] }
)

// When route.query.page changes, only one fetch operation will occur
// All components using this key will update simultaneously

We've added a new component for SSR-safe time display, which resolves hydration mismatches when working with dates (#31876):

<NuxtTime :time="new Date()" format="YYYY-MM-DD" />

The component accepts multiple time formats and gracefully handles both client and server rendering.

The component has been converted to a Single File Component and now exposes error and clearError from the component - as well as in the error slot types, giving you greater ability to handle errors in your templates and via useTemplateRef (#31847):

{{ error.message }}

<NuxtErrorBoundary @error="handleError">
  
    
      
{{ error.message }}
      Try again
    

  
  
  
  
>NuxtErrorBoundary>

now accepts a trailingSlash prop, giving you more control over URL formatting (#31820):

<NuxtLink to="/about" trailing-slash>About>NuxtLink>
&LT!-- Will render  -->

You can now customize the loading indicator with new props directly on the component (#31532):

• hideDelay: Controls how long to wait before hiding the loading bar
• resetDelay: Controls how long to wait before resetting loading indicator state

<template>
  <NuxtLoadingIndicator :hide-delay="500" :reset-delay="300" />
>template>

The Nuxt documentation is now available as an npm package! You can install @nuxt/docs to access the raw markdown and YAML content used to build the documentation website (#31353).

We've added several warnings to help catch common mistakes:

• Warning when server components don't have a root element #31365
• Warning when using the reserved runtimeConfig.app namespace #31774
• Warning when core auto-import presets are overridden #29971
• Error when definePageMeta is used more than once in a file #31634

Module authors will be happy to know:

• A new experimental.enforceModuleCompatibility allows Nuxt to throw an error when a module is loaded that isn't compatible with it (#31657). It will be enabled by default in Nuxt v4.
• You can now automatically register every component exported via named exports from a file with addComponentExports #27155

Several performance improvements have been made:

• Switched to tinyglobby for faster file globbing #31668
• Excluded .data directory from type-checking for faster builds #31738
• Improved tree-shaking by hoisting the purgeCachedData check #31785

✅ Upgrading

Our recommendation for upgrading is to run:

npx nuxi@latest upgrade --dedupe

This refreshes your lockfile and pulls in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.

👉 Changelog

compare changes

• nuxt: Accept hideDelay and resetDelay props for loading indicator (#31532)
• nuxt: Warn server components need root element (#31365)
• docs: Publish raw markdown/yaml docs as @nuxt/docs (#31353)
• kit,nuxt: Pass dotenv values from loadNuxtConfig to nitro (#31680)
• nuxt,vite: Support disabling scripts in dev mode (#31724)
• nuxt: Warn if user uses reserved runtimeConfig.app namespace (#31774)
• kit,schema: Allow throwing error if modules aren't compatible (#31657)
• nuxt: Extract middleware when scanning page metadata (#30708)
• nuxt: Warn if core auto-import presets are overridden (#29971)
• nuxt: Scan named exports with addComponentExports (#27155)
• nuxt: Convert to SFC + expose error/clearError (#31847)
• nuxt: Add component for ssr-safe time display (#31876)
• nuxt: Add trailingSlash prop to (#31820)

• kit,rspack,webpack: Switch to tinyglobby (#31668)
• kit: Exclude .data directory from type-checking (#31738)
• nuxt: Hoist purgeCachedData check to improve tree-shaking (#31785)
• nuxt: Remove oxc-parser manual wasm fallback logic (#31484)
• nuxt: Remove unecessary type check for useFetch (#31910)

• kit,vite: Ensure all modulesDir paths are added to fs.allow (#31540)
• nuxt: Pass slots through to lazy hydrated components (#31649)
• vite: Do not return 404 for dev server handlers which shadow /_nuxt/ (#31646)
• nuxt: Sync error types for useLazyAsyncData (#31676)
• nuxt: Strip base url from error.url (#31679)
• nuxt: Render inline styles before app:rendered is called (#31686)
• nuxt: Update nitro imports (0bec0bd26)
• nuxt: Check for fallback attribute when stripping (c1d735c27)
• vite: Invalidate files not present in module graph (ecae2cd54)
• nuxt: Do not add manifest preload when noScripts (c9572e953)
• nuxt: Do not prompt to update compatibilityDate (#31725)
• nuxt: Show brotli size by default when analyzing bundle (#31784)
• nuxt: Always pass statusMessage when rendering html error (#31761)
• nuxt: Error when definePageMeta is used more than on...

Generated by RSStT. The copyright belongs to the original author.

Source