Vue

First, follow the installation instructions to add the NPM package @fancyapps/ui.

Use this sample code for the Fancybox Vue wrapper or create your own based on it:

vue

<script>
import { Fancybox } from "@fancyapps/ui/dist/fancybox/";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

export default {
  props: {
    fancyboxOptions: Object,
  },
  mounted() {
    Fancybox.bind(this.$refs.container, "[data-fancybox]", {
      ...(this.fancyboxOptions || {}),
    });
  },
  updated() {
    Fancybox.unbind(this.$refs.container);

    Fancybox.close();

    Fancybox.bind(this.$refs.container, "[data-fancybox]", {
      Hash: false,
      ...(this.fancyboxOptions || {}),
    });
  },
  unmounted() {
    Fancybox.unbind(this.$refs.container);
    Fancybox.close();
  },
};
</script>

<template>
  <div ref="container">
    <slot></slot>
  </div>
</template>

Usage:

vue

<Fancybox
  :fancybox-options="{
    // Your custom options
  }"
>
<a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
    <img src="https://lipsum.app/id/60/200x150" alt="Sample image #1" />
</a>
<a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img src="https://lipsum.app/id/61/200x150" alt="Sample image #2" />
</a>
<a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img src="https://lipsum.app/id/62/200x150" alt="Sample image #3" />
</a>
</Fancybox>

Vue ​

Vue