[v3] The server must emit the COOP/COEP response headers to enable those (Warning)

[pieterjanmaes]

Hi,

When I navigate with NuxtLink I get following warning when I navigate the first time:

Ignoring inability to install OPFS sqlite3_vfs: Cannot install OPFS: Missing SharedArrayBuffer and/or Atomics. The server must emit the COOP/COEP response headers to enable those. See https://sqlite.org/wasm/doc/trunk/persistence.md#coop-coep

How can I add COOP/COEP response headers to the queryCollection composable?

dependencies used:

• "@nuxt/content": "^3.0.0"
• "nuxt": "^3.15.2"
• "vue": "latest"
• "vue-router": "latest"

[lenndewolten]

I encountered the same issue when deploying on Cloudflare Pages and resolved it by specifying the missing headers.
To fix this create a _headers file in the root directory of your project with the following content:

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

These headers are required for enabling cross-origin isolation, which allows features like OPFS.
The /* is a wildcard that enables these headers on every url.

A redeploy will resolve the warning. If you are using a different hosting provider, the fix will be the same, but the method for specifying headers may differ.