Vue Fullscreen Lightbox

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

		<FsLightbox
			:toggler="toggler"
			:sources="[
				'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";
// import FsLightbox from "fslightbox-vue/v2"; for Vue 2

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

If you want to see more advanced options, visit the documentation.