From 958b8cbfff9335f979b80f9df113275715c6288d Mon Sep 17 00:00:00 2001
From: Fabricio Carvalho <fcarvalho1999@gmail.com>
Date: Sat, 14 Oct 2023 16:55:33 -0300
Subject: [PATCH] docs(headers): Add documentation for updating headers on a
 specific route

Explain how to override default headers on a specific route in Nuxt.js by using 'routeRules' and provide alternative methods using middleware and 'NuxtLink' with the 'external' attribute.
---
 .../1.documentation/5.advanced/2.faq.md       | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/docs/content/1.documentation/5.advanced/2.faq.md b/docs/content/1.documentation/5.advanced/2.faq.md
index de85e758..5fe86ef8 100644
--- a/docs/content/1.documentation/5.advanced/2.faq.md
+++ b/docs/content/1.documentation/5.advanced/2.faq.md
@@ -145,3 +145,72 @@ security:{
 ::alert{type="info"}
 ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/228).
 ::
+
+## Updating Headers on an especific route
+
+Sometimes you may want to override the default headers on an especific route to allow a certain script to be loaded. You can do that by using the `routeRules` option and loading the headers again by setting the navigation to that route to act as `external`:
+
+```ts
+  routeRules: {
+    // The default headers for all routes
+    '/**': {
+        headers: {
+        'Cross-Origin-Embedder-Policy': 'require-corp'
+      }
+     },
+    // The headers for the route you want to override
+    '/example': {
+      headers: {
+        'Cross-Origin-Embedder-Policy': 'unsafe-none'
+      }
+    },
+  },
+```
+
+### Using a Middleware
+
+You can create a middleware to handle external navigation as follows:
+
+```ts
+// middleware/external-navigation.ts
+
+export default defineNuxtRouteMiddleware((to) => {
+  const routesForExternalLinks = ['/example']
+  // Add any other routes you want to act as external links
+
+  if (
+    process.client &&
+    !useNuxtApp().isHydrating &&
+    to.path &&
+    routesForExternalLinks.includes(to.path)
+  ) {
+    window.location.href = to.fullPath
+  }
+})
+
+```
+
+To use this middleware, include it in your script:
+
+```ts
+// example.vue
+
+<script lang="ts" setup>
+ definePageMeta({
+  middleware: ['external-navigation']
+})
+</script>
+```
+### Using NuxtLink
+
+Alternatively, you can use the `external` attribute on `NuxtLink` to set the navigation to external:
+
+```html
+<NuxtLink :to="{name : 'example'}" :external="true">
+  Example
+</NuxtLink>
+```
+
+::alert{type="info"}
+ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/228).
+::