lucaspulliese / vue-cool-lightbox

Vue.js lightbox inspired by fancybox.
https://vue-cool-lightbox.lucaspulliese.com
341 stars 55 forks source link

Integration with nuxtjs3 #140

Open leccyril opened 1 year ago

leccyril commented 1 year ago

Do you have an integration example for nuxtjs3 ?

the current conf is not working

this is what i tested

create a plugin useCoolLightBox.client.js

import { defineNuxtPlugin } from '#app'
import CoolLightBox from "vue-cool-lightbox";

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(CoolLightBox)
})

and try to use it in front

<template>
        <div class="col-12">
                        <CoolLightBox :items="images" :index="index" @close="index = null">
                        </CoolLightBox>

                        <div class="images-wrapper">
                            <div class="image">
                                <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
                                <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
                            </div>
                        </div>
</template>
<script lang="ts" setup>
const images = ref(["https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg","https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"])
</script>

this error in console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.__vue_render__ (vue-cool-lightbox.esm.js:1816:91) at renderComponentRoot (runtime-core.esm-bundler.js:898:44) at hydrateSubTree (runtime-core.esm-bundler.js:5603:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5624:25) at ReactiveEffect.run (reactivity.esm-bundler.js:187:25) at instance.update (runtime-core.esm-bundler.js:5745:56) at setupRenderEffect (runtime-core.esm-bundler.js:5759:9) at mountComponent (runtime-core.esm-bundler.js:5541:9) at hydrateNode (runtime-core.esm-bundler.js:4730:21) at hydrateChildren (runtime-core.esm-bundler.js:4869:24) Thanks

IlyasDiker commented 1 year ago

Same Error, any solutions or alternatives ?

leccyril commented 1 year ago

for our side we decided to use a envato lightbox and use it with local lib

thunderBestPower commented 1 year ago

Hi, I have same error. Someone has resolved?