
Template details
Nuxt Netlify
Dynamically generate `_headers` and `_redirects` files for Netlify in your Nuxt.js projects.
About this template
Nuxt Netlify is a Nuxt.js build module that automatically generates Netlify _headers and _redirects files from a netlify configuration object in your nuxt.config.js. It works at build time, so every deployment gets the headers and redirect rules you've defined without touching Netlify's dashboard or maintaining separate files.
What is Nuxt Netlify?
Nuxt Netlify is a development tool for Nuxt.js projects (version 2 or newer) published on npm as @aceforth/nuxt-netlify. It takes a netlify config object from your Nuxt config as input and produces two output files: _headers and _redirects, placed in your build directory for Netlify to read. The module is maintained by juliomrqz and supports both redirect rules and header rules, including custom security headers, basic auth, rewrites, and country-based redirect conditions.
What makes Nuxt Netlify stand out?
- Automatic file generation — The module writes
_headersand_redirectsduringnuxt build, so you never hand-edit these Netlify files. - Sensible defaults — Out of the box it emits security headers (Referrer-Policy: origin, X-Content-Type-Options: nosniff, X-Frame-Options: DENY, X-XSS-Protection: 1; mode=block), cache headers for
/_nuxt/*, and no-cache for/sw.js. - Custom headers — You can add arbitrary headers by providing an object of path-to-array-of-strings, for example an
Access-Control-Allow-Originheader or a customX-Buildheader. - Full redirect syntax — Redirect entries support
from,to, HTTP status codes (301, 302, 404, 200),forceoverrides, query string forwarding, and requestconditionssuch as Country matching. - Public path awareness — The
/_nuxt/*cache header automatically follows yourbuild.publicPathsetting in Nuxt config. - Easy installation — Install via npm or yarn as a dev dependency and list it in
buildModules(ormodulesfor Nuxt before 2.9.0). - MIT licensed — The source code on GitHub is released under the MIT License.
Who is this module for?
- Developers building and deploying Nuxt sites on Netlify — they can define headers and redirects in one place instead of maintaining separate files.
- Maintainers of multiple Nuxt projects — they can apply consistent security and cache headers across projects.
- Teams relying on Netlify for edge routing — they can set up country-based redirects and rewrites.
Use cases
- SEO redirects: Set permanent 301 redirects from old URLs to new ones, and use
forcewhen Netlify already has a rule that would otherwise win. - Localized routing: Use
conditionswith Country codes likecn,hk,twto send visitors to country-specific pages (e.g. redirect/to/china). - SPA rewrite fallback: Rewrite all unmatched routes to
index.htmlwith a 200 status so client-side routing works without 404s. - Caching strategy: Set long-lived
Cache-Controlon hashed/_nuxt/*assets and disable caching for the service worker.
How does Nuxt Netlify work?
First install it with npm or yarn as a dev dependency, then add it to the buildModules array in nuxt.config.js. The module reads the netlify key from your config, merges the provided headers and redirects with its defaults, and writes _headers and _redirects into the build output. The default config already produces useful caching and security headers without any extra setup.
FAQ
What versions of Node and Nuxt are supported?
Nuxt Netlify requires Node version 10 or newer and Nuxt version 2 or newer. If you're using Nuxt before 2.9.0, you must add the module under modules instead of buildModules.
Does this module cost money?
No. The module is open source and released under the MIT License. You can use it in personal and commercial projects freely, and the repository on GitHub is publicly accessible.
Can I combine custom headers and the default security headers?
Yes. When you pass custom headers, they are appended to the defaults. There's a mergeSecurityHeaders option you can set to control merging behavior; the README's default example sets it to true.
Does this module work with Netlify's dashboard rules?
Netlify processes the generated _headers and _redirects files at deploy time, just like files you'd upload manually. So rules you generate can combine with dashboard settings; any conflicts follow Netlify's precedence rules.
What status codes are supported for redirects?
The README shows examples using 301, 302, 404, and 200. The 404 entry lets you respond with a custom 404 page, and the 200 entry is used as a rewrite.
















