search

zedjarvis / vue3-compare-image

A Simple Vue 3 component to compare two images with a slider, supports vertical and horizontal modes, and Keyboard for accessibility.
https://vue3-compare-image.vercel.app
MIT License
1 stars 1 forks source link

Something wrong when used in Nuxt 3 #3

Open annamithairil opened 1 month ago

annamithairil commented 1 month ago

can not work in SSR mode,when i use it and refresh the page, the website wents to /, when wrappered by 

<client-only>
        <VueCompareImage
          :left-image="vnsw1"
          :right-image="vnsw2"
        />
 </client-only>

it became normal

zedjarvis commented 2 weeks ago

Hello @annamithairil, yes the component is rendered only on the client side hence the need to wrap it with the <client-only> tag

stephiescastle commented 1 week ago

Also want to note that if you are trying to add it as a Nuxt plugin, you'll want to use the file name *.client.js

// vue-compare-image.client.js

import VueCompareImage from 'vue3-compare-image'

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