Nuxt Netlify
Dynamically generate _headers and _redirects files for Netlify in your Nuxt.js projects.This module supports the creation of redirectsnetlify-redirects and headernetlify-headers-and-basic-auth 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: Englishdocs, Españoldocs-es
Installation
:warning:node >= 10 and nuxt >= 2 are required.```bash npm install --save-dev @bazzite/nuxt-netlify
or
```bash
yarn add --dev @bazzite/nuxt-netlifyAdd
@bazzite/nuxt-netlify to the buildModules section of nuxt.config.js::warning: If you are using Nuxt
< 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:warning: the/_nuxt/*reference automatically changes with the value ofbuild.publicPathnuxt-docs-build-publicPath.
Headers
The headers object represents a JS version of the Netlify_headers file formatnetlify-headers-and-basic-auth. 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=86400Redirects
You can also add redirectsnetlify-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,twSee the configurationdocs-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/docs.
- 🐞 For Bug reports or Feature requests, use the Issues sectionissues.
- 💬 For questions, go to https://spectrum.chat/bazzite/open-sourcespectrum-chat.
- 🚀 You may also want to follow the company supporting this project on Twittertwitter.
