Nuxt Tailwind Lightbox ✨

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

Based on Frontend Mentor E-commerce product page Lightbox.

Quick Setup

1. Add nuxt-tailwind-lightbox dependency to your project

# Using pnpm
pnpm add -D nuxt-tailwind-lightbox

# Using yarn
yarn add --dev nuxt-tailwind-lightbox

# Using npm
npm install --save-dev nuxt-tailwind-lightbox

2. Add nuxt-tailwind-lightbox to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-tailwind-lightbox'
  ]
})

3. Add the source files of Nuxt Tailwind Lightbox to the tailwind.config.js template path:

module.exports = {
  content: [
    // other files...
    './node_modules/nuxt-tailwind-lightbox/**/*.{js,ts,vue}',
  ],
}

That's it! You can now use the <NuxtTailwindLightbox :image-list="your_image_list_array" /> component in your Nuxt app ✨

📃 Props

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release