Nuxt.js 3.9 Release Highlights: Vite 5, Vue 3.4, Interactive Server Components, New Loading API and More

On December 25, Nuxt.js 3.9 was released as a holiday gift, bringing major upgrades such as Vite 5, Rollup 4 support, Vue 3.4 readiness, interactive server components, a new loading API, a callOnce utility, improved error handling, performance enhancements, and a simple upgrade path.

Vite 5

Nuxt 3.9 adds official support for Vite 5 and Rollup 4, requiring plugin authors to ensure compatibility with these latest bundlers.

Vue 3.4 Ready

The release has been tested against the latest Vue 3.4 candidate, enabling new Vue features and allowing developers to debug hydration errors by setting debug: true in the Nuxt config. Updating to the final Vue 3.4 version will automatically unlock these improvements.

{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

Interactive Server Components

This experimental feature lets developers use interactive components inside server‑side rendered pages. It requires enabling the componentIslands.selectiveClient flag in nuxt.config.ts and using the nuxt-client directive on the component markup.

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

<NuxtLink :to="/" nuxt-client />

Automatic Server Optimizations

Nuxt now leverages Vite’s AST‑aware define to perform more accurate replacements in server code, preventing accidental substitution of common identifiers like document . The feature can be disabled via the Vite config hook if desired.

export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig'(config) {
      delete config.define!.document
    }
  }
})

Loading API

A new hook‑based system powers the <NuxtLoadingIndicator> component. The composable useLoadingIndicator and hooks page:loading:start / page:loading:end let developers control, start, and stop the loading state programmatically.

callOnce Utility

The callOnce helper ensures a piece of code runs only a single time, even across multiple page loads, and must be invoked inside a component’s setup function or a Nuxt plugin.

<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
  console.log('This will only be logged once')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

Error Types

Both useAsyncData and useFetch now return a proper Error type instead of a generic object, using h3’s createError for server‑to‑client serialization. Existing generic type annotations may need updating.

Performance Improvements

Small optimizations make several operations faster, and the Nuxt team is exploring ways to reduce the initial load time of the development server.

Upgrade

To upgrade to the latest version, run the following command:

nuxi upgrade