{"_id":"nuxt-easy-lightbox","_rev":"3-4e706a20dbfa5c0bdc77f92e142e9702","name":"nuxt-easy-lightbox","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.1":{"name":"nuxt-easy-lightbox","version":"1.0.1","license":"MIT","_id":"nuxt-easy-lightbox@1.0.1","maintainers":[{"name":"modbender","email":"yashascia@gmail.com"}],"homepage":"https://github.com/modbender/nuxt-easy-lightbox#readme","bugs":{"url":"https://github.com/modbender/nuxt-easy-lightbox/issues"},"dist":{"shasum":"2bc21fe7101a8604cfc6fba73e9344db2f45890e","tarball":"https://registry.npmjs.org/nuxt-easy-lightbox/-/nuxt-easy-lightbox-1.0.1.tgz","fileCount":12,"integrity":"sha512-SewgT5os2hPXMqXX4gGBKjvZ0BLqHxyMMP4YkPS5L4Xh0VkXCvRar/M1knsJyFa4bYQF+x7mitk8/Gh2sz5wnA==","signatures":[{"sig":"MEUCIHC0sC9uPO7DJhHc5+rcTYcqu5bhqwiFUBggmHFw49jqAiEAoNrnQct0MCAFVkZD2v1rIXLZKlGXQj0XVxpNh18r0Ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7885},"main":"./dist/module.cjs","type":"module","types":"./dist/types.d.ts","exports":{".":{"types":"./dist/types.d.ts","import":"./dist/module.mjs","require":"./dist/module.cjs"}},"gitHead":"e30d0d0bdf20da146bd8a0163fd28370df17408c","scripts":{"dev":"nuxi dev playground","lint":"eslint .","test":"vitest run","prepack":"nuxt-module-build build","release":"npm run lint && npm run test && npm run prepack && changelogen --release && npm publish","dev:build":"nuxi build playground","test:watch":"vitest watch","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground"},"_npmUser":{"name":"modbender","email":"yashascia@gmail.com"},"repository":{"url":"git+https://github.com/modbender/nuxt-easy-lightbox.git","type":"git"},"_npmVersion":"10.5.0","description":"My new Nuxt module","directories":{},"_nodeVersion":"21.7.1","dependencies":{"@nuxt/kit":"^3.11.2","vue-easy-lightbox":"^1.19.0"},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^3.11.2","eslint":"^9.0.0","vitest":"^1.4.0","@types/node":"^20.12.7","changelogen":"^0.5.5","@nuxt/schema":"^3.11.2","@nuxt/devtools":"^1.1.5","@nuxt/test-utils":"^3.12.0","@nuxt/eslint-config":"^0.3.6","@nuxt/module-builder":"^0.5.5"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-easy-lightbox_1.0.1_1713980008260_0.2265151982693867","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"nuxt-easy-lightbox","version":"1.0.2","keywords":["vue","vue.js","vue3","vue 3","nuxt","nuxt3","nuxt 3","lightbox","easy","carousel","slideshow","gallery","lightweight","touch","responsive","image"],"license":"MIT","_id":"nuxt-easy-lightbox@1.0.2","maintainers":[{"name":"modbender","email":"yashascia@gmail.com"}],"homepage":"https://github.com/modbender/nuxt-easy-lightbox#readme","bugs":{"url":"https://github.com/modbender/nuxt-easy-lightbox/issues"},"dist":{"shasum":"d33af9a677ebf209d74053450dcfac51f197ed40","tarball":"https://registry.npmjs.org/nuxt-easy-lightbox/-/nuxt-easy-lightbox-1.0.2.tgz","fileCount":12,"integrity":"sha512-zx71H6RpHHhUux/h596u6d/vMhqlN/IwqNBMuU5lY28lfuqhKRcv/AeWzE6pPz65qhJ3Dv4Bo1LQmAJfQIzHPg==","signatures":[{"sig":"MEQCIDKO9LM0zAJokpdCeAsQ86hSiGaOvHltGUjALlKiRAfCAiA/bk//GAsgcOV8F/k0CJUP7FjsafDeOFKxwqjQdia8LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8239},"main":"./dist/module.cjs","type":"module","types":"./dist/types.d.ts","exports":{".":{"types":"./dist/types.d.ts","import":"./dist/module.mjs","require":"./dist/module.cjs"}},"gitHead":"172cc0cd08a604a47e57293525e02204f2fcb943","scripts":{"dev":"nuxi dev playground","lint":"eslint .","test":"vitest run","prepack":"nuxt-module-build build","release":"npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags","dev:build":"nuxi build playground","test:watch":"vitest watch","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground"},"_npmUser":{"name":"modbender","email":"yashascia@gmail.com"},"repository":{"url":"git+https://github.com/modbender/nuxt-easy-lightbox.git","type":"git"},"_npmVersion":"10.5.0","description":"A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.","directories":{},"_nodeVersion":"21.7.1","dependencies":{"@nuxt/kit":"^3.11.2","vue-easy-lightbox":"^1.19.0"},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^3.11.2","eslint":"^9.0.0","vitest":"^1.4.0","@types/node":"^20.12.7","changelogen":"^0.5.5","@nuxt/schema":"^3.11.2","@nuxt/devtools":"^1.1.5","@nuxt/test-utils":"^3.12.0","@nuxt/eslint-config":"^0.3.6","@nuxt/module-builder":"^0.5.5"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-easy-lightbox_1.0.2_1714059813130_0.4990879329159146","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"nuxt-easy-lightbox","version":"1.1.0","description":"A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.","repository":{"type":"git","url":"nuxt-easy-lightbox"},"keywords":["vue","vue.js","vue3","vue 3","nuxt","nuxt3","nuxt 3","lightbox","easy","carousel","slideshow","gallery","lightweight","touch","responsive","image"],"license":"MIT","type":"module","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"main":"./dist/module.mjs","typesVersions":{"*":{".":["./dist/types.d.mts"]}},"dependencies":{"@nuxt/kit":"^4.0.1","vue-easy-lightbox":"^1.19.0"},"devDependencies":{"@nuxt/devtools":"^2.6.2","@nuxt/eslint-config":"^1.7.1","@nuxt/module-builder":"^1.0.2","@nuxt/schema":"^4.0.2","@nuxt/test-utils":"^3.19.2","@types/node":"^24.1.0","@vue/test-utils":"^2.4.6","changelogen":"^0.6.2","eslint":"^9.32.0","happy-dom":"^18.0.1","nuxt":"^4.0.2","playwright-core":"^1.54.1","vitest":"^3.2.4"},"scripts":{"dev":"nuxi dev playground","dev:build":"nuxi build playground","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground","release":"npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags","lint":"eslint .","test":"vitest run","test:watch":"vitest watch"},"_id":"nuxt-easy-lightbox@1.1.0","_integrity":"sha512-a8eseAvAC2w+zmptmb4+4UmaCwxRtgZkrfMHo84lAc4aINK+J7ZFDx3zzAr/hhpNHZEduNgSbF9LbfqDSFRzxA==","_resolved":"/tmp/bcfe344fc1c460368d37b7f1b52329b6/nuxt-easy-lightbox-1.1.0.tgz","_from":"file:nuxt-easy-lightbox-1.1.0.tgz","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-a8eseAvAC2w+zmptmb4+4UmaCwxRtgZkrfMHo84lAc4aINK+J7ZFDx3zzAr/hhpNHZEduNgSbF9LbfqDSFRzxA==","shasum":"28f79e1859b9b3491ca3da008e76de3d473831a1","tarball":"https://registry.npmjs.org/nuxt-easy-lightbox/-/nuxt-easy-lightbox-1.1.0.tgz","fileCount":9,"unpackedSize":7855,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICHuHYqRmqR5HX0plf6TPzHGbdzHqqiR7v7TVYaKVjhDAiAgrSd/qdEe76BceNbXc9k5iOeud7AS5YbZzo6QWD4ZNw=="}]},"_npmUser":{"name":"modbender","email":"yashascia@gmail.com"},"directories":{},"maintainers":[{"name":"modbender","email":"yashascia@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nuxt-easy-lightbox_1.1.0_1753886639206_0.1222129303836581"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-24T17:33:28.259Z","modified":"2025-07-30T14:43:59.556Z","1.0.1":"2024-04-24T17:33:28.426Z","1.0.2":"2024-04-25T15:43:33.300Z","1.1.0":"2025-07-30T14:43:59.398Z"},"license":"MIT","keywords":["vue","vue.js","vue3","vue 3","nuxt","nuxt3","nuxt 3","lightbox","easy","carousel","slideshow","gallery","lightweight","touch","responsive","image"],"repository":{"type":"git","url":"nuxt-easy-lightbox"},"description":"A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.","maintainers":[{"name":"modbender","email":"yashascia@gmail.com"}],"readme":"<h1 align=\"center\">\nNuxt Easy Lightbox\n</h1>\n\n<p align=\"center\">\n<a href=\"https://npmjs.com/package/nuxt-easy-lightbox\"><img src=\"https://img.shields.io/npm/v/nuxt-easy-lightbox/latest.svg?style=flat&colorA=020420&colorB=00DC82\" alt=\"Nuxt Splide - NPM Package\" /></a>\n<a href=\"https://npmjs.com/package/nuxt-easy-lightbox\"><img src=\"https://img.shields.io/npm/dm/nuxt-easy-lightbox.svg?style=flat&colorA=020420&colorB=00DC82\" alt=\"Nuxt Splide - NPM Package Downloads\" /></a>\n<a href=\"https://npmjs.com/package/nuxt-easy-lightbox\"><img src=\"https://img.shields.io/npm/l/nuxt-easy-lightbox.svg?style=flat&colorA=020420&\" alt=\"Nuxt Splide License\" /></a>\n<a href=\"https://nuxt.com\"><img src=\"https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\" alt=\"Nuxt Splide - Nuxt\" /></a>\n</p>\n\n<p align=\"center\">\nA plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.\n</p>\n\n![Nuxt Easy Lightbox](./.github/VueEasyLightbox.gif)\n\n- [✨ &nbsp;Release Notes](/CHANGELOG.md)\n- [🏀 Online playground](https://stackblitz.com/github/modbender/nuxt-easy-lightbox?file=playground%2Fapp.vue)\n- [📖 &nbsp;Documentation](https://github.com/XiongAmao/vue-easy-lightbox)\n\n## Features\n\n- 🪶 &nbsp;Lightweight, Fast Loading\n- ❤️ &nbsp;Easy to Use with Lots of Features\n- 🖼️ &nbsp;Image Slider in Lightbox\n\n## Quick Setup\n\n1. Install the module to your Nuxt application with one command:\n\n    ```bash\n    npx nuxi module add nuxt-easy-lightbox\n    ```\n\n2. Add module to `nuxt.config.ts`\n  \n    ```js\n    export default defineNuxtConfig({\n      modules: ['nuxt-easy-lightbox'],\n    })\n    ```\n\n3. Next use the component `VueEasyLightbox` right next to image element for which you want to use lightbox.\n\n    ```vue\n    <template>\n      <div>\n        <div\n          v-for=\"(src, index) in imgs\"\n          :key=\"index\"\n          class=\"pic\"\n          @click=\"() => showImg(index)\"\n        >\n          <img :src=\"src\" />\n        </div>\n        <VueEasyLightbox\n          :visible=\"visibleRef\"\n          :imgs=\"imgs\"\n          :index=\"indexRef\"\n          @hide=\"onHide\"\n        />\n      </div>\n    </template>\n\n    <script setup>\n    const visibleRef = ref(false);\n    const indexRef = ref(0);\n\n    const imgs = [\n      \"https://via.placeholder.com/450.png/\",\n      \"https://via.placeholder.com/300.png/\",\n      \"https://via.placeholder.com/150.png/\",\n      { src: \"https://via.placeholder.com/450.png/\", title: \"this is title\" },\n    ];\n\n    const showImg = (index) => {\n      indexRef.value = index;\n      visibleRef.value = true;\n    };\n    const onHide = () => (visibleRef.value = false);\n    </script>\n    ```\n  \n  Remember \n  - For group of images you need only a single `VueEasyLightbox` since they can be viewed through slider. Put all the images in an Array and pass it to `imgs` argument.\n  - For individual images, for each `img` element you need individual lightbox.\n\nThat's it! You can now use Easy Lightbox in your Nuxt app ✨\n\n\n## Contribution\n\n<details>\n  <summary>Local development</summary>\n  \n  ```bash\n  # Install dependencies\n  pnpm install\n  \n  # Generate type stubs\n  pnpm dev:prepare\n  \n  # Develop with the playground\n  pnpm dev\n  \n  # Build the playground\n  pnpm dev:build\n  \n  # Run ESLint\n  pnpm lint\n  \n  # Run Vitest\n  pnpm test\n  pnpm test:watch\n  \n  # Release new version\n  npm run release\n  ```\n\n</details>\n","readmeFilename":"README.md"}