PhotoSwipe
PhotoSwipe copied to clipboard
Nuxt 3 compatibility
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 ?