Using Netlify’s platform primitives is easier than ever with Nuxt 4

Nuxt 4 hasn’t yet been released, but we’re already excited to announce that Netlify will have full support for all upcoming new Nuxt features, improvements, and breaking changes on Day 1. Keep reading to find out what’s changed, how the Nuxt on Netlify experience has gotten a serious upgrade, and how you can opt in early.

How to try Nuxt 4 before it’s released

Like many frameworks these days, Nuxt incrementally makes breaking changes available to users via opt-in options, long before a major version is released.

You can opt your Nuxt 3 site into “Nuxt 4” by setting future.compatibilityVersion: 4 in your Nuxt config file or even opt into individual breaking changes as you see fit.

To opt into all the Netlify improvements described below, you’ll also need to set your Nuxt compatibility date to 2024-05-07 or later (we recommend setting this to the current day):

export default defineNuxtConfig({
  compatibilityDate: "2024-11-13",
  future: { compatibilityVersion: 4 },
});

What’s new in Nuxt 4

One of the most notable changes is the new default directory structure that moves most top-level directories into an app/ directory, allowing for a clearer delineation of browser vs. server concerns, improved dev server performance, and even improved type safety. As with Next.js pages/ and app/ directory structures, Nuxt 4 will support both the new and old structures, so this isn’t a breaking change.

There are also minor changes to fetching and caching behaviors that you should read before upgrading. Check out this guide or the official upgrade guide for thorough reviews.

What’s new on Netlify in Nuxt 4

Netlify is a zero-config deployment target for Nuxt apps. In Nuxt 4, we’ve rewritten Netlify support from the ground up to make better use of our platform primitives.

As a result, Nuxt sites on Netlify have gotten a big upgrade.

Use the platform

Under the hood, Nuxt sites on Netlify will now use the latest Netlify Functions API. This doesn’t change much on its own, but it unlocks the following improvements:

• Nuxt server streaming works out of the box, and once Nuxt streaming SSR lands it will be automatically supported on Netlify.
• Netlify Blobs and on-demand cache invalidation now work out of the box without any special configuration.
• Nuxt hybrid rendering (AKA route rules) now fully works out of the box: for example, set "/blog/**": {prerender: true} in your Nuxt config’s routeRules and those pages will be prerendered at build time and excluded from function invocations.
• When used via Nuxt’s isr route rule, Incremental Static Regeneration (ISR) is now implemented with standard Targeted HTTP Cache Control headers like Stale-While-Revalidate instead of our previous proprietary solution
  • Fine-grained ISR config per route: Full support for Nuxt hybrid rendering means you can use routeRules to opt in to, opt out of, and customize TTLs on each route. For example, set "/products/**": {isr: 300} and those pages will use Stale-While-Revalidate and be considered fresh for 5 minutes (300 seconds).
  • ISR can now be composed with all of Netlify’s standards-based, fine-grained caching headers, notably fine-grained cache key variations and tag-based on-demand cache invalidation. Nothing but HTTP headers across the board.
  • ISR now uses the durable directive for global cache distribution: cached ISR server responses can now be returned by all nodes in Netlify’s global edge network, improving performance and avoiding unnecessary function invocations.
  • No more 60-second minimum on the TTL value: for example, if you set isr: 15, cached responses will be considered fresh for only 15 seconds.
• Multiple bug fixes and developer experience improvements

To find out more about how to leverage Netlify’s powerful caching primitives with Nuxt 4, check out this new in-depth guide, published today jointly with this post.

Note: All the above applies to the netlify deployment preset, which is the default on Netlify. If you’ve opted in to the netlify-edge preset, none of the above has changed.

Fewer function invocations

Known static paths will now return a 404 immediately without invoking a function, even for specific files that aren’t present in the published deploy. This can be a big deal on high-traffic sites because users’ browsers may be frequently requesting fingerprinted assets from previous deploys (e.g. requesting /_nuxt/AbCdefgh.js when the latest deploy contains /_nuxt/ijkLMno.js).

A high-traffic enterprise customer we opted into this feature saw an 11% reduction in their serverless function invocations.

Upgrade existing applications

The Nuxt team has partnered with Codemod to make migrating your existing sites as seamless as possible. In most cases, you just run a command.

Then, follow the steps above to opt into the Netlify improvements early.

Deploy a Nuxt 4 application on Netlify

If you don’t have an application and want to get started today, click the button above and follow the prompts.

You can also follow Nuxt’s getting started docs to create a new project, push it to GitHub or your preferred git provider, then deploy it automatically or manually with the Netlify CLI.

In all cases, Nuxt’s Nitro engine automatically detects the Netlify environment and configures and builds your site accordingly.