Vue Tailwind Lightbox

A Gallery/Lightbox component styled with TailwindCSS for Vue 3 (Typescript included!).

Based on Frontend Mentor E-commerce product page Lightbox.

Demo

https://vue-tailwind-lightbox-demo.vercel.app/

Installation

1. Install using your package manager of choice:

npm i vue-tailwind-lightbox

1. 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