vue-tailwind-lightbox
v1.0.5
Published
A simple TailwindCSS Lightbox, written in Vue.js 3.
Downloads
5
Readme
📺 Demo
https://vue-tailwind-lightbox-demo.vercel.app/
🚀 Installation
- Install using your package manager of choice:
npm i vue-tailwind-lightbox
- Add the source files of Nuxt Tailwind Lightbox to the
tailwind.config.js
template path:
module.exports = {
content: [
// other files...
'./node_modules/vue-tailwind-lightbox/**/*.{js,ts,vue}',
],
}
⚙️ Usage
Import the component locally or define it globally:
<template>
<vue-tailwind-lightbox :image-list="imageList" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { VueTailwindLightbox } from 'vue-tailwind-lightbox'
import "vue-tailwind-lightbox/dist/style.css"; // Import CSS needed!
import image1 from '@/assets/images/image-product-1.jpg'
import image2 from '@/assets/images/image-product-2.jpg'
import image3 from '@/assets/images/image-product-3.jpg'
import image4 from '@/assets/images/image-product-4.jpg'
const imageList = ref([image1, image2, image3, image4])
</script>
Note: don't worry about the thumbnails images, they are automatically compressed to improve and maintain performance! 😉
📃 Props
| Name | Type | Default | Description |
| ---------- | ------------------ | ------- | ---------------------------------- |
| image-list
| Array
| --- | Array of images to fill the gallery |