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 @aceforth/nuxt-netlify

or

yarn add --dev @aceforth/nuxt-netlify

Add @aceforth/nuxt-netlify to the buildModules section of nuxt.config.js:

⚠️ If you are using Nuxt < 2.9.0, use modules instead.

{
  buildModules: [
    '@aceforth/nuxt-netlify',
  ],

  netlify: { 
    mergeSecurityHeaders: true 
  }
}

or

{
  buildModules: [
    [
      '@aceforth/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 of build.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://marquez.co/docs/nuxt-netlify/.
• 🐞 For Bug reports or Feature requests, use the Issues section.
• 💬 For questions, you can also use the Issues section.
• 🚀 You may also want to follow me on Twitter.

Professional Support

This project is sponsored by me, a Full Stack Developer. If you require Professional Assistance on your project(s), please contact me at https://marquez.co.

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.