--- title: "Learn More About Target Static Mode in Nuxt" description: "Nuxt has created a new static configuration option, which works extremely well for Jamstack sites, in particular creating automatic dynamic routes. Learn more about the feature in this post." source: "https://www.netlify.com/blog/2020/09/10/the-new-target-static-mode-in-nuxt/" last_updated: "2026-07-10T20:31:48.000Z" --- As of v2.14.0 of [Nuxt.js](https://nuxtjs.org/), you may notice a new configuration while setting up a new Nuxt project. When following the prompts, you’ll see a prompt for “Deployment Target”, and one of the options is “Static/Jamstack hosting”: ![terminal view of static mode option](/v3/img/blog/target.png) If you’re on an older project, you can set this manually by upgrading your version of Nuxt to ^2.14.0 in `package.json` and in `nuxt.config.js`, adding ``` target: 'static', ``` You also must use universal rendering mode: ``` mode: 'universal', ``` What does this do? The most amazing feature is that you no longer have to declare dynamic routes and create functions for their creation, it will automatically create them for you! When creating dynamic pages in Nuxt, you’ll create a directory with an underscore of the unique identifier you’ll be using to associate the page, I typically use an `id`. So my pages directory would look like this: ![directory view for a dynamic page in a nuxt site](/v3/img/blog/pagesdirectory.png) And then I use `this.$route.params.id` to gather the unique id of the item and then create a computed property to filter my dataset for the rest of the object values. Previously, I would have to then tell my `nuxt.config.js` file to gather all of the ids from the dataset and create pages from them using the [`generate.routes` option](https://nuxtjs.org/guides/configuration-glossary/configuration-generate#routes). Here’s an example: ``` import data from './static/storedata.json'let dynamicRoutes = () => { return new Promise(resolve => { resolve(data.map(el => `product/${el.id}`)) })} export default { ... generate: { routes: dynamicRoutes },} ``` Now none of this configuration in nuxt.config.js necessary! Declare that your target is static and Nuxt takes care of the rest! 🎉 You no longer need HTTP calls to your API on client-side navigation. This process preloads the content and reduces the HTML size served for optimal performance. If you want to exclude routes, you can use the [`generate.exclude`](https://nuxtjs.org/guides/configuration-glossary/configuration-generate#exclude) option. You can also keep using `generate.routes` to add extra routes if you have a special configuration. You can deploy straightaway [from this repo](https://github.com/netlify-labs/nuxt-static-example) or the button below: [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-labs/nuxt-static-example?utm_source=github&utm_medium=nuxtstatic-sd&utm_campaign=devex) Now you can prebuild all of your dynamic routes with excellent performance for your end user. ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=The New Target Static Mode in Nuxt&url=https://www.netlify.com/blog/2020/09/10/the-new-target-static-mode-in-nuxt//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F09%2F10%2Fthe-new-target-static-mode-in-nuxt%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/09/10/the-new-target-static-mode-in-nuxt//) - [Bluesky](https://bsky.app/intent/compose?text=The New Target Static Mode in Nuxt+https://www.netlify.com/blog/2020/09/10/the-new-target-static-mode-in-nuxt//) * * * ### Tags - [Nuxt](/blog/tags/nuxt/) - [Static](/blog/tags/static/) - [Nuxt Configuration](/blog/tags/nuxt-configuration/) - [Jamstack](/blog/tags/jamstack/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials April 20, 2020 [ ### Create a Blog with Contentful and Nuxt ](/blog/2020/04/20/create-a-blog-with-contentful-and-nuxt/) - ![Profile picture of Sarah Drasner](/_astro/a6e1bf6c9b86793c25e65b9505eea9535debb1ae-200x200_QunWA.webp) Sarah Drasner ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials November 30, 2019 [ ### How to Deploy a Vue Site ](/blog/2019/11/30/how-to-deploy-a-vue-site/) - ![Profile picture of Sarah Drasner](/_astro/a6e1bf6c9b86793c25e65b9505eea9535debb1ae-200x200_QunWA.webp) Sarah Drasner ## 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/)