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/ui@4.0/dist/panzoom.css"; @import "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/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.