How to Use fancyapps V4 in Vue.js 3.x

[westchinago]

Hi
fancyapps is best plugin i used.
i try in the vue:

after installing with npm;
i quote in script:
import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui"; //V4

style:
@import "@fancyapps/ui/dist/fancybox.css";
@import "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom.css";
@import "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel.css";

i intend to realize the effect like this: https://fancyapps.com/playground/vu
input the responsively html,and finally fail the effect.

so may know to how to use this in vue?thanks

[evrendev]

import "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox.css";

<a href="bigImage.png" data-fancybox>
<img src="thumbnail.png" />
</a>

You can use like this in Vue3.