@bazzite/nuxt-netlify v0.2.0

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

:warning: 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:

: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 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://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.