{"_id":"@3rg0n/breakout404-vue","_rev":"2-a1332f29b399898479875fe327299e19","name":"@3rg0n/breakout404-vue","dist-tags":{"latest":"0.6.1"},"versions":{"0.6.0":{"name":"@3rg0n/breakout404-vue","version":"0.6.0","keywords":["404","breakout","game","vue","nuxt"],"license":"MIT","_id":"@3rg0n/breakout404-vue@0.6.0","maintainers":[{"name":"3rg0n","email":"ergoncopeland@hotmail.com"}],"dist":{"shasum":"6405dfbb1fdd826d16037b5590f7b936e2831d30","tarball":"https://registry.npmjs.org/@3rg0n/breakout404-vue/-/breakout404-vue-0.6.0.tgz","fileCount":6,"integrity":"sha512-kpX6aeB96k5KR+Xf1hGAxJXSoMOx6UIwFR8XULSClfsKn5OC55BRhpQz3NUhX/qdFbuC6KZClvvSOLYO+Wkpeg==","signatures":[{"sig":"MEUCID+1A8O6TfGBMh2qeVNBkhc+xF2MJZFBv6mpH1Hg6QF/AiEAnH5DxcFfCuP9/GRvp90598aOSNoxfTQPFxf7ATCY5GY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13140},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","clean":"rimraf dist"},"_npmUser":{"name":"3rg0n","email":"ergoncopeland@hotmail.com"},"description":"Vue component for Breakout404 - a Breakout-style 404 page game","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@3rg0n/breakout404-core":"0.6.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.32","tsup":"^8.5.1","rimraf":"^5.0.10","typescript":"^5.9.3"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/breakout404-vue_0.6.0_1788378560435_0.5625183466623687","host":"s3://npm-registry-packages-npm-production"}},"0.6.1":{"name":"@3rg0n/breakout404-vue","version":"0.6.1","description":"Vue component for Breakout404 - a Breakout-style 404 page game","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"keywords":["404","breakout","game","vue","nuxt"],"license":"MIT","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"peerDependencies":{"vue":">=3.0.0"},"dependencies":{"@3rg0n/breakout404-core":"0.6.1"},"devDependencies":{"rimraf":"^5.0.10","tsup":"^8.5.1","typescript":"^5.9.3","vue":"^3.5.32"},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","dev":"tsup src/index.ts --format cjs,esm --dts --watch","clean":"rimraf dist"},"_nodeVersion":"26.0.0","_id":"@3rg0n/breakout404-vue@0.6.1","dist":{"integrity":"sha512-lbCEamb1xySmqbzAyNH4tyixgxgiq/IJkFrBJKFALGET2jzrcM+MbBS910sEBDwQcyApLzc2u+Aqgtix75ipdg==","shasum":"c1021d0d8f3ebe2c57532e6e91d93e5239e94396","tarball":"https://registry.npmjs.org/@3rg0n/breakout404-vue/-/breakout404-vue-0.6.1.tgz","fileCount":7,"unpackedSize":16523,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDdL23PpYrHoOa4vOZDmIMI0Q9EFcYxIisL+W02LwSs8AIhAJPtYTlpf1L0hATZPShLDIlM9/lBgdQuYVRqXt6nXqwT"}]},"_npmUser":{"name":"3rg0n","email":"ergoncopeland@hotmail.com"},"directories":{},"maintainers":[{"name":"3rg0n","email":"ergoncopeland@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/breakout404-vue_0.6.1_1788440259500_0.8479000884696097"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T19:49:20.277Z","modified":"2026-09-03T12:57:39.795Z","0.6.0":"2026-09-02T19:49:20.608Z","0.6.1":"2026-09-03T12:57:39.611Z"},"license":"MIT","keywords":["404","breakout","game","vue","nuxt"],"description":"Vue component for Breakout404 - a Breakout-style 404 page game","maintainers":[{"name":"3rg0n","email":"ergoncopeland@hotmail.com"}],"readme":"# @3rg0n/breakout404-vue\n\nVue 3 component for [Breakout404](https://github.com/3rg0n/breakout404) — a customizable 404 page game where visitors destroy blocks arranged to spell \"404\".\n\n**[Live Demo](https://3rg0n.github.io/breakout404/)** · **[Try the 404 page](https://3rg0n.github.io/breakout404/play)**\n\n## Installation\n\n```bash\nnpm install @3rg0n/breakout404-vue\n```\n\nRequires Vue 3 (a peer dependency). [`@3rg0n/breakout404-core`](https://www.npmjs.com/package/@3rg0n/breakout404-core) is bundled as a dependency — you don't need to install it separately.\n\n## Usage\n\n```vue\n<template>\n  <div style=\"width: 100vw; height: 100vh\">\n    <Breakout404\n      difficulty=\"medium\"\n      :show-score=\"true\"\n      @complete=\"onComplete\"\n      @block-destroyed=\"onBlockDestroyed\"\n    />\n  </div>\n</template>\n\n<script setup>\nimport { Breakout404 } from '@3rg0n/breakout404-vue';\n\nconst onComplete = () => console.log('Game complete!');\nconst onBlockDestroyed = (remaining) => console.log(`${remaining} blocks left`);\n</script>\n```\n\n### Nuxt\n\nThe game needs the browser, so render it client-side only:\n\n```vue\n<!-- error.vue, or pages/[...slug].vue -->\n<template>\n  <div style=\"width: 100vw; height: 100vh\">\n    <ClientOnly>\n      <Breakout404 difficulty=\"medium\" redirect-url=\"/\" />\n    </ClientOnly>\n  </div>\n</template>\n\n<script setup>\nimport { Breakout404 } from '@3rg0n/breakout404-vue';\n</script>\n```\n\n### Sizing\n\nThe component renders a `div` sized `100%` × `100%` with a `400px` minimum height, so give its parent an explicit size. `class` and `style` you put on the component fall through to that `div` as normal Vue attribute inheritance.\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `theme` | `Partial<Breakout404Theme>` | See core docs | Customize colors and fonts |\n| `difficulty` | `'easy' \\| 'medium' \\| 'hard'` | `'medium'` | Game difficulty |\n| `showScore` | `boolean` | `true` | Show score and lives |\n| `redirectUrl` | `string` | `undefined` | URL to redirect to after completion (http/https/relative only) |\n| `redirectDelay` | `number` | `2000` | Delay before redirect (ms) |\n| `logger` | `Breakout404Logger` | `undefined` | Structured logger for game lifecycle events |\n\nIn templates use kebab-case: `:show-score`, `:redirect-url`, `:redirect-delay`.\n\n## Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `complete` | - | All blocks destroyed |\n| `block-destroyed` | `remaining: number` | A block was destroyed |\n\n## Reactivity\n\nChanging any prop re-applies it to the running game without recreating the instance — `theme` is watched deeply, so mutating a nested color works. The game is created on `mounted` and `destroy()`d on `unmounted`, so listeners and animation frames are cleaned up on route changes and HMR.\n\n## Re-exports\n\nEverything public from the core package is re-exported:\n\n```ts\nimport {\n  defaultTheme,\n  mergeTheme,\n  isValidRedirectUrl,\n  DIFFICULTY_SETTINGS,\n  step,\n  type Breakout404Theme,\n  type GameEvent,\n} from '@3rg0n/breakout404-vue';\n```\n\n## Security\n\n`redirectUrl` is validated — only `http:`, `https:`, and relative paths are accepted; `javascript:`, `data:` and similar are rejected. See the [threat model](https://github.com/3rg0n/breakout404/blob/master/THREAT_MODEL.md).\n\n## License\n\n[MIT](https://github.com/3rg0n/breakout404/blob/master/LICENSE)\n","readmeFilename":""}