Image and video gallery for Vue

Full featured image and video gallery component for Vue.

lightGallery 3 ships @lightgallery/vue, a native Vue 3 component, not a wrapper. Every node is rendered by Vue, with v-model for the open state and the index, typed emits, scoped slots and a Teleport overlay. State and gallery logic come from the shared headless core, so behavior matches the vanilla, React and Angular packages exactly.

Install

npm install @lightgallery/vue lightgallery

Peer range is vue >=3.4. Import the stylesheets globally, they ship from the lightgallery package and are shared by every binding:

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

A gallery in one SFC

<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const items: LgGalleryItem[] = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        lgSize: '1600-1067',
        caption: 'Mountains',
    },
];
</script>

<template>
    <LightGallery :plugins="[Thumbnail, Zoom]" :zoom="{ scale: 1.5 }">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>

Prefer to own the state? Pass :slides with v-model:open and v-model:index. Both modes are documented in the Vue package docs.

What you get

• All 14 plugins as tree-shakable subpaths, thumbnails, zoom, video, autoplay, fullscreen, hash deep links, pager, share, rotate, comments, medium-style zoom, relative captions, Vimeo thumbnails and origin crop, plus the justified layout.
• Idiomatic Vue API: settings are same-named props (:speed, :loop, :caption-position), per-plugin settings are one object prop per plugin, events are kebab-case emits (@after-slide), and the gallery chrome comes from named scoped slots (#caption, #counter, #prev-button, #next-button).
• Typed end to end, including LgGalleryItem for slide data and a template-ref handle for imperative control.
• Nuxt-ready: entries import without browser globals and the overlay never server-renders, so no <ClientOnly> wrapper and no hydration mismatch.
• Accessibility: dialog semantics, focus trap and restore, keyboard operable thumbnails and pager, prefers-reduced-motion support; axe reports zero violations.

Next steps

• Vue package docs, the full prop surface, all plugins, SSR and accessibility notes.
• Vue image gallery demo and Vue video gallery demo, live galleries with the code behind them.
• Settings reference, every setting, shared by all four packages.

Using the 2.x wrapper? The old lightgallery/vue component is documented in the 2.x Vue archive, and the migration guide covers the move to the native package.

Edit this page on GitHub