how to use fancybox in nuxtjs

How do i use fancybox in nuxtjs. In vuejs it works fine but when i coded the same app on nuxtjs with fancybox it wont work properly. it just sends to the corresponding link

nuxt.config.js

export default {
...
head: {
...
script: [
      {
        href: "https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js",
        body: true
      },
      {
        href:
          "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js",
        body: true
      }
    ],
link: [
    ...
      {
        rel: "stylesheet",
        href:
          "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"
      },
     ...
    ]
}
...
}

take a look https://github.com/mmoollllee/nuxt-starter-template

they have fancybox working with a nuxt start template that you can follow along with.