Cloudflare headers Module for Nuxt3
- 👌 Easy to use
- ✅ Nuxt3 compatible
- 🧾 Supports static generation
- Add
@logotip4ik_/nuxt-cloudflare-headersdependency to your project
yarn add @logotip4ik_/nuxt-cloudflare-headers # or npm install @logotip4ik_/nuxt-cloudflare-headers- Add
@logotip4ik_/nuxt-cloudflare-headersto themodulessection ofnuxt.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" },
},
});// 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
_headersfile
- Clone this repository
- Run
npm run dev:prepareto generate type stubs. - Use
npm run devto start playground in development mode.