Skip to content
Dynamically generate _headers and _redirects files for Netlify in your Nuxt.js projects
Branch: develop
Clone or download

README.md

Bazzite Project Codacy Badge Travis David David Greenkeeper badge version License

Nuxt Netlify

Dynamically generate _headers and _redirects files for Netlify in your Nuxt.js projects.

Read this in other languages: English, Español

Installation

⚠️ nuxt >= 2 is required.

npm install @bazzite/nuxt-netlify

or

yarn add @bazzite/nuxt-netlify

Add @bazzite/nuxt-netlify to the modules section of nuxt.config.js:

{
  modules: [
    '@bazzite/nuxt-netlify',
  ],

  netlify: { mergeSecurityHeaders: true }
}

or

{
  modules: [
    [
      '@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 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

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.

You can’t perform that action at this time.