{"_id":"@auto-skeleton/vue","_rev":"3-2e4ecba8bf99686db33e960b872b4d0c","name":"@auto-skeleton/vue","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.5":{"name":"@auto-skeleton/vue","version":"0.0.5","keywords":["skeleton","skeleton-loader","loading","placeholder","shimmer","vue","vue3","auto-skeleton","dom","zero-config","ui","ux"],"license":"MIT","_id":"@auto-skeleton/vue@0.0.5","maintainers":[{"name":"riazzm","email":"riazzahmedm@gmail.com"}],"dist":{"shasum":"334cba569bfa383b6c95af232d3f8f36a89e4ee2","tarball":"https://registry.npmjs.org/@auto-skeleton/vue/-/vue-0.0.5.tgz","fileCount":11,"integrity":"sha512-wT8G6JT7eM7FeI6ZTxjWk8oXzJepfn1DUOnGM8km6j43sfsxYyhtyjhf7fasikJAqKXkQG90YiXpVJeEQjAJ8Q==","signatures":[{"sig":"MEYCIQCW6WR5dpTdRw0K+sYKleeAp7n1HsqgZ24sw9H5prYDqQIhAJjVItfJPboKkoUy+C78au02RPMBO7Aux5CTEsa61IYH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15536},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"62068443eb2e62b4502bf025b444042582d08702","scripts":{"build":"vite build && node scripts/copy-styles.mjs","typecheck":"vue-tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"riazzm","email":"riazzahmedm@gmail.com"},"_npmVersion":"10.9.2","description":"Zero-config skeleton loaders for Vue 3. Scans the live DOM at runtime — no manual shapes, no CLI, no config files.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.15.0","dependencies":{"@auto-skeleton/core":"0.0.5"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","vue-tsc":"^2.0.0","vite-plugin-dts":"^4.0.0","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.5_1778998706450_0.6624190975179733","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@auto-skeleton/vue","version":"0.0.6","keywords":["skeleton","skeleton-loader","loading","placeholder","shimmer","vue","vue3","auto-skeleton","dom","zero-config","ui","ux"],"license":"MIT","_id":"@auto-skeleton/vue@0.0.6","maintainers":[{"name":"riazzm","email":"riazzahmedm@gmail.com"}],"dist":{"shasum":"c6f912e2cefe7ca0c6480bd1124ec82b61d2cb4b","tarball":"https://registry.npmjs.org/@auto-skeleton/vue/-/vue-0.0.6.tgz","fileCount":11,"integrity":"sha512-tP1Rpgo+goT3wJw52BMWZuzq3w9K4Hd/5aV9KIRWe9gTx188xv0uJKPOlvIUjYQGTcJIIjr8otCv4Fm/vAmI9g==","signatures":[{"sig":"MEUCIDtBeufJIZCmAl7j80maLJKmkn474cRIXwTQ3XjkF/AxAiEAqpEVll8keJ5cG8tWGx5zE71aIobqeR+gKGxHH64+bJ4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16179},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"37aa5b20d5da06fb78175b1444c5a0e6d0861e14","scripts":{"build":"vite build && node scripts/copy-styles.mjs","typecheck":"vue-tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"riazzm","email":"riazzahmedm@gmail.com"},"_npmVersion":"10.9.2","description":"Zero-config skeleton loaders for Vue 3. Scans the live DOM at runtime — no manual shapes, no CLI, no config files.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.15.0","dependencies":{"@auto-skeleton/core":"0.0.5"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","vue-tsc":"^2.0.0","vite-plugin-dts":"^4.0.0","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.6_1778999531530_0.7766990168690837","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@auto-skeleton/vue","version":"0.0.7","description":"Zero-config skeleton loaders for Vue 3. Scans the live DOM at runtime — no manual shapes, no CLI, no config files.","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"keywords":["skeleton","skeleton-loader","loading","placeholder","shimmer","vue","vue3","auto-skeleton","dom","zero-config","ui","ux"],"license":"MIT","sideEffects":["**/*.css"],"scripts":{"build":"vite build && node scripts/copy-styles.mjs","typecheck":"vue-tsc -p tsconfig.json --noEmit"},"peerDependencies":{"vue":">=3.0.0"},"dependencies":{"@auto-skeleton/core":"0.0.5"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.4","vite":"^5.0.0","vite-plugin-dts":"^4.0.0","vue":"^3.4.0","vue-tsc":"^2.0.0"},"_id":"@auto-skeleton/vue@0.0.7","gitHead":"7746545c3f72d0764008a6d87f20886810f34515","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-YKcV683HyXOMPQldbQ7EI8sv2hKbR/g6FL+bp13BkyIwfvwH1dO6x3WkLve5HYyU5YFth7fSOQa0LA6xtKK93g==","shasum":"7a2d4d251c1dcecd03c0684aeab74f09e47fc65b","tarball":"https://registry.npmjs.org/@auto-skeleton/vue/-/vue-0.0.7.tgz","fileCount":11,"unpackedSize":16761,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH1aZ++WcTBrBMQS3QyKEr/81yge3ZhYFH/D3HBZOwfMAiEAqzJ7mR9C/HbM30+CNJOEbG7Ihem49aQ5On/t0cROcUc="}]},"_npmUser":{"name":"riazzm","email":"riazzahmedm@gmail.com"},"directories":{},"maintainers":[{"name":"riazzm","email":"riazzahmedm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.0.7_1779000390673_0.918972223074042"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-17T06:18:26.390Z","modified":"2026-05-17T06:46:30.976Z","0.0.5":"2026-05-17T06:18:26.628Z","0.0.6":"2026-05-17T06:32:11.743Z","0.0.7":"2026-05-17T06:46:30.835Z"},"license":"MIT","keywords":["skeleton","skeleton-loader","loading","placeholder","shimmer","vue","vue3","auto-skeleton","dom","zero-config","ui","ux"],"description":"Zero-config skeleton loaders for Vue 3. Scans the live DOM at runtime — no manual shapes, no CLI, no config files.","maintainers":[{"name":"riazzm","email":"riazzahmedm@gmail.com"}],"readme":"# @auto-skeleton/vue\n\nZero-config skeleton loaders for Vue 3. Wraps any component — `auto-skeleton` scans the live DOM at runtime and generates a pixel-accurate skeleton overlay. No manual shapes, no config files, no CLI step.\n\n## Installation\n\n```bash\nnpm install @auto-skeleton/vue\n```\n\n## Quick start\n\n```vue\n\n\n\n```\n\nWhen `loading` is `true`, the real UI is replaced with a skeleton that mirrors its exact layout. When `loading` flips back to `false`, the real content reappears instantly from cache.\n\n## Props\n\n| Prop | Type | Required | Description |\n|---|---|:---:|---|\n| `id` | `string` | ✅ | Unique cache key per instance. |\n| `loading` | `boolean` | ✅ | Shows the skeleton overlay when `true`. |\n| `options` | `AutoSkeletonOptions` | | Fine-tune animation, caching, and scan behaviour. |\n\n## Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `animation` | `\"wave\" \\| \"pulse\" \\| \"none\"` | `\"wave\"` | Skeleton animation style. |\n| `debug` | `boolean` | `false` | Outline detected bones with dashed borders. |\n| `watch` | `boolean` | `true` | Re-scan when layout changes while not loading. |\n| `watchDebounceMs` | `number` | `120` | Debounce delay for watcher-triggered re-scans. |\n| `cache` | `boolean` | `true` | Cache bones in memory and `sessionStorage`. |\n| `minSize` | `number` | `8` | Minimum element dimension (px) to generate a bone. |\n| `ignoreSelectors` | `string[]` | `[]` | CSS selectors for elements to skip. |\n\n## Data attributes\n\nFine-tune individual elements without changing render logic:\n\n```html\n\n

\n

\n\n```\n\n## Theming\n\nOverride CSS custom properties to match your design system:\n\n```css\n:root {\n --as-base: #e4e4e7;\n --as-highlight: rgba(255, 255, 255, 0.9);\n}\n```\n\n## `useAutoSkeleton` composable\n\nLow-level composable for custom integrations:\n\n```ts\nimport { useAutoSkeleton } from \"@auto-skeleton/vue\";\n\nconst { rootRef, bones, shouldShow, animation, debug } = useAutoSkeleton(\n toRef(props, \"id\"),\n toRef(props, \"loading\"),\n toRef(props, \"options\")\n);\n```\n\n## Ecosystem\n\n| Package | Description |\n|---|---|\n| [`@auto-skeleton/react`](https://www.npmjs.com/package/@auto-skeleton/react) | React component and hook |\n| [`@auto-skeleton/vue`](https://www.npmjs.com/package/@auto-skeleton/vue) | Vue 3 component and composable |\n| [`@auto-skeleton/lit`](https://www.npmjs.com/package/@auto-skeleton/lit) | Lit / Web Component |\n| [`@auto-skeleton/core`](https://www.npmjs.com/package/@auto-skeleton/core) | Framework-agnostic DOM scanner |\n\n## Contributors\n\n\n \n \n \n \n \n
\n \n \"riazzahmedm\"
\n @riazzahmedm\n \n 		\n \n \"kishore-s-n\"
\n @kishore-s-n\n \n 		\n \n \"chithumonk\"
\n @chithumonk\n \n
\n\n## License\n\nMIT\n","readmeFilename":"README.md"}