[READ-ONLY] Mirror of https://github.com/danielroe/cross-origin-storage. Load shared dependencies from Cross-Origin Storage (COS).
cross-origin-storage
experimental
nuxt
vite
vite-plugin
1# nuxt-cos
2
3> [!WARNING]
4> Experimental. The [Cross-Origin Storage API](https://github.com/WICG/cross-origin-storage) is an early-stage proposal with no native browser support yet, and the underlying chunk format is not stable. Do not depend on it in production.
5
6A Nuxt module that loads shared dependencies (such as `vue`) from [Cross-Origin Storage (COS)](https://github.com/WICG/cross-origin-storage). It extracts those dependencies into content-addressed chunks so that a COS-capable browser can reuse the same chunk across different sites instead of downloading it once per origin.
7
8It is a thin Nuxt wrapper around [`vite-plugin-cross-origin-storage`](https://github.com/danielroe/nuxt-cos/tree/main/packages/vite-plugin-cross-origin-storage); see that package for how the content addressing and sharing work.
9
10## Setup
11
12```bash
13npx nuxt module add nuxt-cos
14```
15
16Or add it manually:
17
18```ts
19// nuxt.config.ts
20export default defineNuxtConfig({
21 modules: ['nuxt-cos'],
22})
23```
24
25By default it manages `vue` and `@vue/*`. The module only runs in production builds (it is a no-op in dev), and it injects the COS loader into the server-rendered HTML, replacing Nuxt's default entry script.
26
27## Configuration
28
29```ts
30export default defineNuxtConfig({
31 modules: ['nuxt-cos'],
32 cos: {
33 // Packages to extract into COS chunks. Matched against the imported
34 // specifier; a plain string is an exact match. Transitive dependencies
35 // are collected automatically.
36 packages: [/^(?:vue$|@vue\/)/],
37 },
38})
39```
40
41| Option | Type | Default | Description |
42| --- | --- | --- | --- |
43| `packages` | `Array<string \| RegExp>` | `[/^(?:vue$\|@vue\/)/]` | Packages to extract into COS chunks. |
44
45## Trying it out
46
47The module is a no-op in dev, so test a production build:
48
49```bash
50nuxt build && nuxt preview
51```
52
53What to look for:
54
55- In `.output/public/_nuxt/`, the managed packages are emitted as content-hashed chunks (64-character hex filenames like `a1b2c3...e4f5.js`).
56- View source on the rendered page: Nuxt's default entry `<script type="module">` is gone, replaced by a `<script id="cos-loader">` containing the loader and an inlined manifest.
57- The page still hydrates and is interactive.
58
59Without a COS-capable browser the loader fetches each chunk over the network (the fallback path), so this confirms the chunking and loader work, but not sharing.
60
61To see real Cross-Origin Storage, install the [extension](https://chromewebstore.google.com/detail/cross-origin-storage/denpnpcgjgikjpoglpjefakmdcbmlgih), open the preview URL once (the chunks are fetched and stored), then reload or open another site shipping the same Vue version: in DevTools -> Network the hashed chunks are served from the shared store instead of refetched.
62
63## Browser support
64
65The [Cross-Origin Storage API](https://github.com/WICG/cross-origin-storage) is not yet in any browser. You can try it with the [Cross-Origin Storage browser extension](https://github.com/web-ai-community/cross-origin-storage-extension). Without it, chunks load over the network as usual, so your site keeps working; it just doesn't share them.
66
67## License
68
69MIT