Vue Updates

NuxtJS v3.10.0 #nuxt3.10.0 is the next minor/feature release. 👀 Highlights v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights. ✨ Experimental shared asyncData when prerendering When prerendering…

It is particularly important to make sure that any unique key of your data is always resolvable to the same data. For example, if you are using useAsyncData to fetch data related to a particular page, you should provide a key that uniquely matches that data. (useFetch should do this automatically.)

👉 See full documentation.

🆔 SSR-safe accessible unique ID creation

We now ship a useId composable for generating SSR-safe unique IDs (#23368). This allows creating more accessible interfaces in your app. For example:
">

<script setup>
const emailId = useId()
const passwordId = useId()
>script>

<template>
  <form>
    <label :for="emailId">Email>label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">Password>label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  >form>
>template>

✍️ Extending app/router.options

It's now possible for module authors to inject their own router.options files (#24922). The new pages:routerOptions hook allows module authors to do things like add custom scrollBehavior or add runtime augmenting of routes.

👉 See full documentation.

Client-side Node.js support

We now support (experimentally) polyfilling key Node.js built-ins (#25028), just as we already do via Nitro on the server when deploying to non-Node environments.

That means that, within your client-side code, you can import directly from Node built-ins (node: and node imports are supported). However, nothing is globally injected for you, to avoid increasing your bundle size unnecessarily. You can either import them where needed.

import { Buffer } from 'node:buffer'
import process from 'node:process'

Or provide your own polyfill, for example, inside a Nuxt plugin.

// ~/plugins/node.client.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

This should make life easier for users who are working with libraries without proper browser support. However, because of the risk in increasing your bundle unnecessarily, we would strongly urge users to choose other alternatives if at all possible.

🍪 Better cookie reactivity

We now allow you to opt-in to using the CookieStore. If browser support is present, this will then be used instead of a BroadcastChannel to update useCookie values reactively when the cookies are updated (#25198).

This also comes paired with a new composable, refreshCookie which allows manually refreshing cookie values, such as after performing a request. See full documentation.

🏥 Detecting anti-patterns

In this release, we've also shipped a range of features to detect potential bugs and performance problems.

● We now will throw an error if setInterval is used on server (#25259).
● We warn (in development only) if data fetch composables are used wrongly (#25071), such as outside of a plugin or setup context.
● We warn (in development only) if you are not using but have the vue-router integration enabled (#25490). ( should not be used on its own.)

🧂 Granular view transitions support

It's now possible to control view transitions support on a per-page basis, using definePageMeta (#25264).

You need to have experimental view transitions support enabled first:

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // you can disable them globally if necessary (they are enabled by default)
    viewTransition: false
  }
})

And you can opt in/out granularly:
definePageMeta({ viewTransition: false }) ">

// ~/pages/index.vue
<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
script>

Finally, Nuxt will not apply View Transitions if the user's browser matches prefers-reduced-motion: reduce (#22292). You can set viewTransition: 'always'; it will then be up to you to respect the user's preference.

🏗️ Build-time route metadata

40 views15:39