{"_id":"@danilo.riedel/img-fit-vue","_rev":"4-b3664d7146152771728322170967c66b","name":"@danilo.riedel/img-fit-vue","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.7":{"name":"@danilo.riedel/img-fit-vue","version":"0.1.7","keywords":["img-fit","img-fwd","vue","vue3","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit-vue@0.1.7","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"ccf2024831ff7a94f4ea8ebf9a81aa3bad775e97","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-vue/-/img-fit-vue-0.1.7.tgz","fileCount":4,"integrity":"sha512-3m5KtCV49rc4TEQ70Tw7w2rik5i7w2ccMhlKZ6C+cY4TV3E1BopBAJMIiiifjAkvgZ+COzATK9GVlF6cWORFkw==","signatures":[{"sig":"MEYCIQCVU6USYCdHFWSfeSXNp0z0Wy+pGfwuc6kV3WIZCJu9wQIhAMoCCOYa2FB/nM8uxHVnn6dnEvBlGoZdoXWDQ7k227IY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-vue@0.1.7","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":3725},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"804e6b1d13802b0ccb89e7c37277888bf2fcc42f","scripts":{"test":"node --test test/*.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"jsdom":"^29.1.1","@vue/test-utils":"^2.4.11","@danilo.riedel/img-fit":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fit-vue_0.1.7_1781571271095_0.7737312654736255","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@danilo.riedel/img-fit-vue","version":"0.2.0","keywords":["img-fit","img-fwd","vue","vue3","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit-vue@0.2.0","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"969343fc61994659fc790fc28a91be908a9ba1bf","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-vue/-/img-fit-vue-0.2.0.tgz","fileCount":4,"integrity":"sha512-+ICob8Q9zheRavL0gQjp0DM+kmx+BVvlIRP/hrL4l9dY1WNIUJG4OHUlcZTk91kGEoNn6Wsh1zQJPfHpSd+gmg==","signatures":[{"sig":"MEUCIBeQqVGEIhvmbcB0TnFZ/7imeFCFZV+gvaC3bC2/ofrMAiEA0e8a+h6DjYyYe/g8Lr5Qq/RBbY7HzupZWs+XEAz9nPA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-vue@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":3654},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"63d709c7db5b76788e6c2863160e7927b1ad4e60","scripts":{"test":"node --test test/*.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"jsdom":"^29.1.1","@vue/test-utils":"^2.4.11","@danilo.riedel/img-fit":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fit-vue_0.2.0_1781575321521_0.0655889292444678","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@danilo.riedel/img-fit-vue","version":"0.2.1","keywords":["img-fit","img-fwd","vue","vue3","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit-vue@0.2.1","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"823038fe35e3cf1130be9c998ab43c6ea8d7e997","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-vue/-/img-fit-vue-0.2.1.tgz","fileCount":4,"integrity":"sha512-9zkRB5xkZ1d4IgxyhpVBu4Q2XELhNLnRO5d4PqXFz/jt/wkIh42HHpuz141799hK2lanEXAiapSASDVCA5NcPA==","signatures":[{"sig":"MEUCIHPW1pV4P/WmOQfbMSTeIyBkJbQb9VkqmUsw6Kcc+OcBAiEAyvhJMeKw5h/BMJOkngPyXg/ywER6bN2mLMk9ExX+Fz0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-vue@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":5077},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"42c3480c0fe7acb58eb26d35bfd6a5295a247af2","scripts":{"test":"node --test test/*.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"jsdom":"^29.1.1","@vue/test-utils":"^2.4.11","@danilo.riedel/img-fit":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fit-vue_0.2.1_1781630131299_0.2938123625076736","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"_id":"@danilo.riedel/img-fit-vue@0.2.2","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"5273b6947e5e617f5100079a6aefc13e1375e60a","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-vue/-/img-fit-vue-0.2.2.tgz","fileCount":4,"integrity":"sha512-Nq0dQC9/pz2cSUXCxffJQ3zgKu8jmyG5GNz7usyTzUILZjaAbBUjT4GngyTgh/+v1DbV3nSbNpo+0EOgAm47xQ==","signatures":[{"sig":"MEQCIE0/3uE18LGkKuEY8xxhx1iKlitIcgfbQfoZiPFQVOJuAiBg0VItLKa3dzZHFXBZY3N1Ohfz9MaxK5oSo4PLtaK5iw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE0+jB2DmVbRNVn4V61SwYrc1FnfVtyud77PbKjjOSaRAiEA8B0iTzYnh5ZNMrcCpb802shYGxsZjkhTZetTVDRoZ1M="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-vue@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":5121},"main":"./src/index.js","name":"@danilo.riedel/img-fit-vue","type":"module","types":"./src/index.d.ts","author":{"name":"Danilo Riedel"},"module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"ce350d3b286e4c54b1865e76b43bdf3cd2556798","license":"MIT","scripts":{"test":"node --test test/*.test.js"},"version":"0.2.2","_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"homepage":"https://github.com/driedel/img-fit#readme","keywords":["img-fit","img-fwd","vue","vue3","image","responsive","optimization"],"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"_nodeVersion":"20.20.2","dependencies":{"jsdom":"^29.1.1","@vue/test-utils":"^2.4.11","@danilo.riedel/img-fit":"^0.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.1.0","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/img-fit-vue_0.2.2_1789391092468_0.04755983373380923"}}},"time":{"created":"2026-06-16T00:54:30.953Z","modified":"2026-09-14T13:04:52.962Z","0.1.7":"2026-06-16T00:54:31.241Z","0.2.0":"2026-06-16T02:02:01.677Z","0.2.1":"2026-06-16T17:15:31.451Z","0.2.2":"2026-09-14T13:04:52.643Z"},"bugs":{"url":"https://github.com/driedel/img-fit/issues"},"author":{"name":"Danilo Riedel"},"license":"MIT","homepage":"https://github.com/driedel/img-fit#readme","keywords":["img-fit","img-fwd","vue","vue3","image","responsive","optimization"],"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/vue"},"description":"Vue adapter for img-fit — automatic width-aware images for img-fwd.","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"readme":"# @danilo.riedel/img-fit-vue\n\nVue 3 adapter for [img-fit](https://github.com/driedel/img-fit).\n\n## Installation\n\n```bash\nnpm install @danilo.riedel/img-fit-vue\n```\n\nRequires Vue 3 or later (peer dependency).\n\n## Usage\n\n```vue\n<script setup>\nimport { ImgFit } from '@danilo.riedel/img-fit-vue';\n</script>\n\n<template>\n  <ImgFit\n    src=\"https://cdn.example.com/photo.jpg\"\n    alt=\"Photo\"\n    params=\"f=webp&q=80\"\n  />\n</template>\n```\n\n## Props\n\n| Prop | Type | Description |\n|---|---|---|\n| `src` | `string` | Original image URL. |\n| `alt` | `string` | Image alt text. |\n| `params` | `string` | Extra img-fwd parameters, e.g. `f=webp&q=80`. |\n| `options` | `object` | Options passed to `ImgFit.watch()`. See table below. |\n\nAll other attributes are forwarded to the underlying `<img>` element.\n\n## Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `dpr` | `boolean` | `true` | Multiply the measured width by `window.devicePixelRatio`. |\n| `observeResize` | `boolean` | `true` | Update the image when the container resizes. |\n| `resizeDebounceMs` | `number` | `100` | Debounce delay (ms) for resize updates. |\n| `lazy` | `boolean` | `true` | Recompute via `IntersectionObserver` for `loading=\"lazy\"` images. |\n\nAll options from the core package are accepted. See [@danilo.riedel/img-fit](https://www.npmjs.com/package/@danilo.riedel/img-fit) for the full list.\n\n## Retina / DPR\n\nBy default the component multiplies the measured container width by `window.devicePixelRatio` before snapping to a breakpoint. A 560 px container on a 2× Retina display generates `?rs=1250` instead of `?rs=600`, keeping images crisp on every screen.\n\nTo request CSS pixel widths only:\n\n```vue\n<template>\n  <ImgFit\n    src=\"https://cdn.example.com/photo.jpg\"\n    alt=\"Photo\"\n    :options=\"{ dpr: false }\"\n  />\n</template>\n```\n\n## Extra parameters\n\nAppend extra [img-fwd](https://img-fwd.driedel.dev/) transform parameters via the `params` prop. They are inserted before `?rs=` in the final URL:\n\n```vue\n<!-- Result: https://cdn.example.com/photo.jpg?f=webp&q=80&rs=1250 -->\n<template>\n  <ImgFit\n    src=\"https://cdn.example.com/photo.jpg\"\n    alt=\"Photo\"\n    params=\"f=webp&q=80\"\n  />\n</template>\n```\n\n## Notes\n\n- The component renders the original `src` during SSR and hydration.\n- The optimized `?rs=<width>` URL is applied on the client after the container is measured.\n- Pass `loading=\"lazy\"` and the core will recompute the URL via `IntersectionObserver` before the image loads.\n","readmeFilename":"README.md"}