Nuxt Netlify
Dynamically generate _headers
and _redirects
files for Netlify in your Nuxt.js projects.
This module supports the creation of redirects and header rules for your Netlify site: you can easily configure custom headers, basic auth, redirect instructions and rewrite rules from your nuxt config file.
Read this in other languages: English, Español
Installation
node >= 10
and nuxt >= 2
are required.
npm install --save-dev @bazzite/nuxt-netlify
or
yarn add --dev @bazzite/nuxt-netlify
Add @bazzite/nuxt-netlify
to the buildModules
section of nuxt.config.js
:
< 2.9.0
, use modules
instead.
{
buildModules: [
'@bazzite/nuxt-netlify',
],
netlify: {
mergeSecurityHeaders: true
}
}
or
{
buildModules: [
[
'@bazzite/nuxt-netlify',
{
mergeSecurityHeaders: true
}
]
]
}
Usage
The default configuration will generate an empty _redirects
file and a _headers
file with some caching and security headers:
# _headers
/*
Referrer-Policy: origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
/_nuxt/*
Cache-Control: public, max-age=31536000, immutable
/sw.js
Cache-Control: no-cache
⚠️ the/_nuxt/*
reference automatically changes with the value ofbuild.publicPath
.
Headers
The headers object represents a JS version of the Netlify _headers
file format. You should pass in a object with string keys (representing the paths) and an array of strings for each header. For example:
You can add extra headers as follows:
const pkg = require('./package.json')
{
netlify: {
headers: {
'/*': [
'Access-Control-Allow-Origin: *',
`X-Build: ${pkg.version}`
],
'/favicon.ico': [
'Cache-Control: public, max-age=86400'
]
}
}
}
that will generate:
# _headers
/*
Referrer-Policy: origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Access-Control-Allow-Origin: *
X-Build: 1.0.1
/_nuxt/*
Cache-Control: public, max-age=31536000, immutable
/sw.js
Cache-Control: no-cache
/favicon.ico
Cache-Control: public, max-age=86400
Redirects
You can also add redirects, as many as you like. You should pass in an array of objects with the redirection attributes. For example:
{
netlify: {
redirects: [
{
from: '/home',
to: '/'
},
{
from: '/my-redirect',
to: '/',
status: 302,
force: true
},
{
from: '/en/*',
to: '/en/404.html',
status: 404
},
{
from: '/*',
to: '/index.html',
status: 200
},
{
from: '/store',
to: '/blog/:id',
query: {
id: ':id'
}
},
{
from: '/',
to: '/china',
status: 302,
conditions: {
Country: 'cn,hk,tw'
}
}
]
}
}
will generate:
# _redirects
/home / 301
/my-redirect / 302!
/en/* /en/404.html 404
/* /index.html 200
/store id=:id /blog/:id 301
/ /china 302 Country=cn,hk,tw
See the configuration section for all available options.
Documentation & Support
-
📄 If you want extra details of how to configure and use this project, the full documentation is available at https://www.bazzite.com/docs/nuxt-netlify/. -
🐞 For Bug reports or Feature requests, use the Issues section. -
💬 For questions, go to https://spectrum.chat/bazzite/open-source. -
🚀 You may also want to follow the company supporting this project on Twitter.
Professional Support
This project is sponsored by Bazzite. If you require Professional Assistance on your project(s), please contact us at https://www.bazzite.com/contact.
Code of Conduct
Everyone participating in this project is expected to agree to abide by the Code of Conduct.
License
Code released under the MIT License.