How to use

The lightbox will be created from the URLs or paths provided to the "sources" array prop. There is no need to specify the types of the sources, it's done automatically. To open the lightbox use the "toggler" boolean prop. On every update of this prop the lightbox will open or close, depending on the current state; the lightbox is closed and the toggler is being updated—the lightbox opens; the lightbox is opened and the toggler is being updated—the lightbox closes (in the vast majority of cases it's an unneeded feature as the user will close the lightbox by himself through clicking the close toolbar button or the background). The value of the "toggler" prop doesn't matter, what matters is its update. You don't need to conditionally render the lightbox component.

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

	<FsLightbox
		:toggler="toggler"
		:sources="[
			"/Images/Example.jpg",
			"https://i.imgur.com/fsyrScY.jpg",
			"https://www.youtube.com/watch?v=3nQNiWdeH2Q",
			"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
		]"
	/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";

export default {
	components: { FsLightbox },
	data() {
		return {
			toggler: false
		}
	}
};
</script>

Vue 3

Import the lightbox from the "v3.js" file:

import FsLightbox from "fslightbox-vue/v3";