--- title: "Netlify’s Platform Primitives is Easier Than Ever with Nuxt 4" description: "We’re excited to announce that Netlify will support all new Nuxt 4 features, improvements, and breaking changes on day 1 with new Netlify functionality." source: "https://www.netlify.com/blog/platform-primitives-with-nuxt-4/" last_updated: "2026-07-10T22:01:51.000Z" --- 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](https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4) [`future.compatibilityVersion: 4`](https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4) [in your Nuxt config file or even opt into individual breaking changes as you see fit](https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4). To opt into all the Netlify improvements described below, you’ll also need to set your [Nuxt compatibility date](https://nuxt.com/docs/api/nuxt-config#compatibilitydate) 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](https://nuxt.com/docs/getting-started/upgrade#new-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](https://masteringnuxt.com/blog/complete-guide-how-to-upgrade-to-nuxt-4#nuxt-4-data-fetching-changes-and-upgrade-guide) or [the official upgrade guide](https://nuxt.com/docs/getting-started/upgrade#migrating-to-nuxt-4) for thorough reviews. ## What’s new on Netlify in Nuxt 4 Netlify is a [zero-config deployment target](https://nuxt.com/deploy/netlify) for Nuxt apps. In Nuxt 4, we’ve rewritten Netlify support from the ground up to make better use of [our platform primitives](https://www.netlify.com/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](https://www.netlify.com/blog/introducing-netlify-functions-2-0/). This doesn’t change much on its own, but it unlocks the following improvements: - [**Nuxt server streaming**](https://nuxt.com/docs/guide/directory-structure/server#sending-streams) **works out of the box**, and [once Nuxt streaming SSR lands](https://github.com/nuxt/nuxt/issues/4753) it will be automatically supported on Netlify. - [**Netlify Blobs**](https://docs.netlify.com/blobs/overview/) **and** [**on-demand cache invalidation**](https://docs.netlify.com/platform/caching/#on-demand-invalidation) **now work out of the box** without any special configuration. - [**Nuxt hybrid rendering**](https://nuxt.com/docs/guide/concepts/rendering#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**](https://httpwg.org/specs/rfc9213.html) like `Stale-While-Revalidate` instead of [our previous proprietary solution](https://docs.netlify.com/configure-builds/on-demand-builders) - **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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate) [`Stale-While-Revalidate`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#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**](https://docs.netlify.com/platform/caching/), notably fine-grained [cache key variations](https://docs.netlify.com/platform/caching/#cache-key-variation) and [tag-based on-demand cache invalidation](https://docs.netlify.com/platform/caching/#on-demand-invalidation). Nothing but HTTP headers across the board. - **ISR now uses** [**the durable directive**](https://docs.netlify.com/platform/caching/#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](https://developers.netlify.com/guides/isr-and-advanced-caching-with-nuxt-v4-on-netlify/), 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](https://nuxt.com/deploy/netlify#netlify-edge-functions) [`netlify-edge`](https://nuxt.com/deploy/netlify#netlify-edge-functions) [preset](https://nuxt.com/deploy/netlify#netlify-edge-functions), 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](https://codemod.com/) to make migrating your existing sites as seamless as possible. In most cases, [you just run a command](https://nuxt.com/docs/getting-started/upgrade#migrating-using-codemods). Then, [follow the steps above](#how-to-try-nuxt-4-before-its-released) to opt into the Netlify improvements early. ## Deploy a Nuxt 4 application on Netlify [![](https://www.netlify.com/img/deploy/button.svg "Deploy to Netlify")](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/frameworks/nuxt-4-caching) 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](https://nuxt.com/docs/getting-started/installation) to create a new project, push it to GitHub or your preferred git provider, then [deploy it automatically](https://docs.netlify.com/welcome/add-new-site/) or [manually with the Netlify CLI](https://docs.netlify.com/frameworks/nuxt/#deploy-your-nuxt-project-with-netlify-cli). In all cases, Nuxt’s Nitro engine automatically detects the Netlify environment and configures and builds your site accordingly. ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Using Netlify’s platform primitives is easier than ever with Nuxt 4&url=https://www.netlify.com/blog/platform-primitives-with-nuxt-4/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fplatform-primitives-with-nuxt-4%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/platform-primitives-with-nuxt-4/) - [Bluesky](https://bsky.app/intent/compose?text=Using Netlify’s platform primitives is easier than ever with Nuxt 4+https://www.netlify.com/blog/platform-primitives-with-nuxt-4/) * * * ### Tags - [Product](/blog/tags/product/) - [Features](/blog/tags/features/) - [News](/blog/tags/news/) - [Vue](/blog/tags/vue/) - [Nuxt](/blog/tags/nuxt/) - [Frameworks](/blog/tags/frameworks/) ## Keep reading ![](/_astro/9e2fd67496411cd76ae1ec47f62411541c810db3-2400x1260_x7tC0.webp) News & Announcements September 28, 2023 [ ### SWR & Fine Grained Cache Control on Netlify ](/blog/swr-and-fine-grained-cache-control) - ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp) Mathias Biilmann ![](/_astro/8825011c4a7db4cdf0b624c7d3701efb5ac92a42-1200x675_ZksGQb.webp) Opinions & Insights July 30, 2024 [ ### Durable Cache and the quest for fast, fresh content ](/blog/durable-cache-quest-for-fast-fresh-content) - ![Profile picture of Elad Rosenheim](/_astro/be563e8998105c7e95b4db9110fa16b47cb68acd-230x230_Z2hYOHp.webp) Elad Rosenheim ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)