@aceforth/nuxt-netlify

    1.1.0 • Public • Published

    Codacy Badge Travis David David version License

    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

    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.

    Keywords

    none

    Install

    npm i @aceforth/nuxt-netlify

    DownloadsWeekly Downloads

    880

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    19.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar
    • avatar