PhotoSwipe icon indicating copy to clipboard operation
PhotoSwipe copied to clipboard

Nuxt 3 compatibility

Open BenjaminOddou opened this issue 3 years ago • 0 comments

Hello, I am trying to to use photoswipe in my Nuxt 3 app. For now I can't make it work:

  • I have an error when importing photoswipe in a
Could not locate module 'photoswipe/lightbox' or corresponding type declarations.ts(2307)

Note : I am using vue-masonry-wall plugin

my code :

<script setup lang="ts">
import PhotoSwipeLightbox from 'photoswipe/lightbox'
import 'photoswipe/style.css'

let lightbox = null

const { data: images } = await useFetch<ImageKit[]>('/api/imgkit')

onMounted(() => {
  if (!lightbox) {
    lightbox = new PhotoSwipeLightbox({
      gallery: '#galerie-masonry',
      children: 'a',
      pswpModule: () => import('photoswipe')
    })
    lightbox.init()
  }
})

onUnmounted(() => {
  if (lightbox) {
    lightbox.destroy()
    lightbox = null
  }
})
</script>

<template>
        <MasonryWall
          id="galerie-masonry"
          :items="images"
          :column-width="340"
          :gap="0"
          @redraw="onRedraw"
        >
          <template #default="{ item }: { item: ImageKit }">
            <Transition mode="out-in" @leave="onLeave" @enter="onEnter">
              <a
                :href="item.url"
                :data-pswp-width="item.width"
                :data-pswp-height="item.height"
                target="_blank"
                rel="noreferrer"
              >
                <nuxt-img
                  v-show="item.tags && item.tags.find((tag) => tag === filter)"
                  :src="item.filePath"
                  :width="700"
                  class="pl-6 pr-6 pb-6 sm:pl-0"
                />
              </a>
            </Transition>
          </template>
        </MasonryWall>
</template>

Could you help me with that ?

BenjaminOddou avatar Sep 17 '22 17:09 BenjaminOddou