Skip to content

logotip4ik/nuxt-cloudflare-headers

Repository files navigation

☁ Nuxt3 Cloudflare Headers

npm version npm downloads

Cloudflare headers Module for Nuxt3

📖 Release Notes

Features

  • 👌 Easy to use
  • ✅ Nuxt3 compatible
  • 🧾 Supports static generation

Setup

  1. Add @logotip4ik_/nuxt-cloudflare-headers dependency to your project
yarn add @logotip4ik_/nuxt-cloudflare-headers # or npm install @logotip4ik_/nuxt-cloudflare-headers
  1. Add @logotip4ik_/nuxt-cloudflare-headers to the modules section of nuxt.config.js
// nuxt.config.js
import { defineNuxtConfig } from "nuxt";
import cloudflareHeaders from "@logotip4ik_/nuxt-cloudflare-headers";

export default defineNuxtConfig({
  modules: [
    // With inlined options
    [cloudflareHeaders, { "/api": { "x-powered-by": "cloudflare" } }],
  ],
});

Or a separate section nuxt-cloudflare-headers for module options:

// nuxt.config.js
import { defineNuxtConfig } from "nuxt";
import cloudflareHeaders from "@logotip4ik_/nuxt-cloudflare-headers";

export default defineNuxtConfig({
  modules: [cloudflareHeaders],

  cloudflareHeaders: {
    "/*": { "some-cool": "header" },
  },
});

Documentation

// nuxt.config.js
import { defineNuxtConfig } from "nuxt";
import cloudflareHeaders from "@logotip4ik_/nuxt-cloudflare-headers";

export default defineNuxtConfig({
  modules: [cloudflareHeaders],

  cloudflareHeaders: {
    "/*": { "some-cool": "header", "hello": "world" },
    "/admin": { "some-cool": false }, // detaching `some-cool` header from admin route
  },
});

In cloudflareHeaders object key (/*, /admin) will be route matcher and array of objects or plain object will be actual header rules. Where some-cool will be header name and header will be header value. Also you can detach a header from route by providing false as value. So if you are generating your project with such a config, nuxt will prerender _headers file with this content inside:

/*
  some-cool: header
  hello: world

/admin
  ! some-cool

For more features read cloudflare docs about _headers file

Development

  1. Clone this repository
  2. Run npm run dev:prepare to generate type stubs.
  3. Use npm run dev to start playground in development mode.

License

MIT License