kytta / vue-tinybox

🌌 A slick, yet tiny lightbox gallery for Vue.js
http://os.kytta.dev/vue-tinybox/
MIT License
95 stars 7 forks source link

Support Vue.js 3 #32

Open robertsulkowskiclicktrans opened 1 year ago

robertsulkowskiclicktrans commented 1 year ago

Hi, thank you for your great plugin. However we're approaching the point where the vue 2 have to be replaced with vue 3. Is there any chance for vue 3 support?

Best, Robert

kytta commented 1 year ago

Hi Robert,

thank you for your support!

we're approaching the point where the vue 2 have to be replaced with vue 3. Is there any chance for vue 3 support?

For now this is not planned, as I am currently really busy pursuing my college degree. I have also not yet had a chance to try Vue 3. I thought that Vue 2 components can work in Vue 3; at least I remember reading this in the Migration guide. Is that not the case? If not, I'll try to find some time to read into the documentation and migrate the plugin 👌🏻

robertsulkowskiclicktrans commented 1 year ago

I never really tested the package with vue 3, just the dependencies from your package.json tell me it is not going to work :)

"vue": "^2",

Thanks for including it to your roadmap. We'll take a look at new version when it comes. Good luck with your college degree :)

kytta commented 1 year ago

I never really tested the package with vue 3, just the dependencies from your package.json tell me it is not going to work :)

"vue": "^2",

Well yeah, you're right :D

I have looked at it and have been doing the upgrade over in #40. It seems like the only thing I needed to change was the v-model. I have taken this as an opportunity to completely update the project, though.

The release is tagged but not published yet; I hope to publish an alpha version this evening so that maybe you coul already test it :)

kytta commented 1 year ago

@robertsulkowskiclicktrans okay, I've published an alpha to NPM: https://www.npmjs.com/package/vue-tinybox/v/2.0.0-alpha.3

Use npm i vue-tinybox@next to install it. There are some changes you'll need to make:

  1. Update the v-model to specify the index:

    <Tinybox
    -  v-model="currentIndex"
    +  v-model:index="currentIndex"
     :images="images"
    />
  2. Import the CSS, too:

    import "vue-tinybox/css";
  3. If you use it directly in browser, the URL has changed. Consult the new README.

If you have the time, I'd be happy for you to try this out and tell me if it works. I hope to finish the migration in the coming weeks, but the currently published alpha should be stable IMO.