All Projects → juliomrqz → Nuxt Netlify

juliomrqz / Nuxt Netlify

Licence: mit
Dynamically generate `_headers` and `_redirects` files for Netlify in your Nuxt.js projects

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Nuxt Netlify

bluise
🍄 Bluise - A Nuxt.js & Netlify CMS boilerplate.
Stars: ✭ 132 (+36.08%)
Mutual labels:  nuxt, netlify, nuxtjs
platform
Community platform for dancers
Stars: ✭ 30 (-69.07%)
Mutual labels:  nuxt, netlify, nuxtjs
Bael Template
Brutalist Blog theme for Netlify CMS
Stars: ✭ 187 (+92.78%)
Mutual labels:  netlify, nuxt, nuxtjs
Nuxt Optimized Images
🌅🚀 Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).
Stars: ✭ 717 (+639.18%)
Mutual labels:  nuxt, nuxtjs, plugin
Realworld Nuxt
Nuxt.js implementation of RealWorld Frontend
Stars: ✭ 45 (-53.61%)
Mutual labels:  nuxt, nuxtjs
Sails Nuxt
Sails + Nuxt + Vuetify Combo <3
Stars: ✭ 92 (-5.15%)
Mutual labels:  nuxt, nuxtjs
Pwa Module
Zero config PWA solution for Nuxt.js
Stars: ✭ 1,033 (+964.95%)
Mutual labels:  nuxt, nuxtjs
Nuxt Netlify Functions Example
Nuxt.js example for running Netlify functions locally in a dev environment and as a generated static site deployed to Netlify
Stars: ✭ 59 (-39.18%)
Mutual labels:  netlify, nuxtjs
Iblog
基于 Node.js 的开源个人博客系统,采用 Nuxt + Vue + TypeScript 技术栈。
Stars: ✭ 994 (+924.74%)
Mutual labels:  nuxt, nuxtjs
Eslint Module
ESLint module for Nuxt.js
Stars: ✭ 49 (-49.48%)
Mutual labels:  nuxt, nuxtjs
Nuxt Compress
A simple static asset compression module for Nuxt that runs Gzip and Brotli compression during the build process
Stars: ✭ 61 (-37.11%)
Mutual labels:  nuxt, nuxtjs
Virapro.ru
[E-commerce] Plumbing Store
Stars: ✭ 45 (-53.61%)
Mutual labels:  nuxt, nuxtjs
Quickjam
Starter template for Nuxt apps bundled with an API
Stars: ✭ 42 (-56.7%)
Mutual labels:  nuxt, nuxtjs
Nuxt Box
Truffle, Nuxt and Vue boilerplate
Stars: ✭ 46 (-52.58%)
Mutual labels:  nuxt, nuxtjs
Nuxt Template
🗃 Nuxt Template (Typescript + Composition API)
Stars: ✭ 40 (-58.76%)
Mutual labels:  nuxt, nuxtjs
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-44.33%)
Mutual labels:  nuxt, nuxtjs
Docker Nuxt
Docker image to run NUXT.js application in production mode
Stars: ✭ 71 (-26.8%)
Mutual labels:  nuxt, nuxtjs
Nuxt Tailwind
A Nuxt.js starter project template using Tailwind CSS without the distraction of a complicated development environment.
Stars: ✭ 71 (-26.8%)
Mutual labels:  nuxt, nuxtjs
Nuxt Chat App
Frontend of real-time chat application built using nuxtjs, socket.io. Check the backend at https://github.com/binbytes/chat-app-server.
Stars: ✭ 77 (-20.62%)
Mutual labels:  nuxt, nuxtjs
Nuxt Graphql Request
Easy Minimal GraphQL client integration with Nuxt.js.
Stars: ✭ 85 (-12.37%)
Mutual labels:  nuxt, nuxtjs

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].