Nuxt集成Fancybox

要在Nuxt中集成Fancybox，按照以下步骤：

安装依赖

# Usage with NPM
npm install --save @fancyapps/ui

# and with Yarn
yarn add @fancyapps/ui

项目新建plugins目录，新建useFancybox.client.js文件：

import { Fancybox } from "@fancyapps/ui";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide("Fancybox", Fancybox);
  nuxtApp.$Fancybox.bind("[data-fancybox]", {
    // Your custom options
  });
});

将@fancyapps/ui/dist/fancybox/fancybox.css增加到nuxt.config.ts中：

export default defineNuxtConfig({
  devtools: { enabled: false },
  app: {
    css: [
      "@fancyapps/ui/dist/fancybox/fancybox.css",
    ],
  }
})