Merge pull request #242 from fabricioOak/documentation-external-navigation

Author: Baroshem

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).
+::