Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Learn how to use the Vue version of Fullscreen Lightbox.


There are 3 types of sources supported out-of-the-box: images, HTML videos, and YouTube videos. To display such a source, pass its URL or path to the "sources" array prop.

Custom sources

With the "sources" prop you can also display custom content—such as a Vimeo video, Google map, etc. A custom source must be a Vue component.

<button @click="toggler = !toggler">
Open the lightbox.


import FsLightbox from "fslightbox-vue";
import CustomSource from "./CustomSource.vue"

export default {
components: { FsLightbox },
data() {
return {
toggler: false
created() {
this.CustomSource = CustomSource;

An example custom source (a Vimeo video):

allow="autoplay; fullscreen"

How to set props of a custom source?

Look over the Fullscreen Lightbox open source plug-ins.