Vue3 support

[Jesse Gall]

Will there be Vue3 support anytime soon?

[ragnarlotus]

Hello, I've been working in Vue3 version since the beta versions of Vue, but many changes and new stuff made me wait until the ecosystem is a bit more stable, because I saw I was wasting the time changing things.

Right now I'm working trying to make the Vue 3 version work with Vite for realeases, but it is not being easy since I wanted to use the composition API, which resulted being really complicated because the mixins I have. Also expected to reduce the size of the package with the composition API but at the end has been the opposite, so I'm also doing some structure changes and trying some refactors.

My expectation is to have it within few months, I'm sorry for not giving you a more precise estimation but I still need to learn few things and improve others, and to be honest I prefer to wait a bit more than releasing something with a lot of problems 😅

[mrfrkayvaz]

First of all, thank you for your work. is there any progress on vue3 support?

[ragnarlotus]

Hello and yes, in fact right now I'm working updating the complements 😄

Even pushed all improvements this morning https://github.com/ragnarlotus/vue-flux/tree/v7

The slider is functional right now althougyht some complements need to be finished.

Besides finishing the complements this are the reamining things I want to do before releasing:

• Add TS
• Refactor the code a bit to a more updated architecture
• Add Vue component as resource
• Update documentation

If for whatever reason somebody is in hurry I can release a beta version, which would serve me also for testing purposes although I will add unit tests after the release

[mrfrkayvaz]

thanks for your reply, i am in a hurry a little bit 😊 can you release beta version? I can help you for testing.

[ragnarlotus]

sorry, yesterday I was busy, I will try to release an alpha version now (in this version also started to use vite and I guess I will have to play a bit to get the build I need). I will send here a message when it is published

[ragnarlotus]

https://www.npmjs.com/package/vue-flux/v/7.0.0-alpha.0 released, since it differs a bit from version 6 check https://github.com/ragnarlotus/vue-flux/blob/v7/src/App.vue on how to implement it.

regards!

[mrfrkayvaz]

thank you for all your hard work, you are amazing. 💥
i am getting some errors. Can you show an example usage?

[mrfrkayvaz]

I am getting an error with the code below.

<vue-flux
  :options="options"
  :images="images"
  :transitions="transitions"
/>

setup() {
  const options = ref({
    allowFullscreen: false,
    allowToSkipTransition: true,
    autohideTime: 2500,
    autoplay: false,
    bindKeys: false,
    delay: 5000,
    enableGestures: false,
    infinite: true,
    lazyLoad: true,
    lazyLoadAfter: 3,
  })

  const images = ref([
    "https://neoo.s3.us-east-2.amazonaws.com/examples/pexels-monstera-6311653.jpg",
    "https://neoo.s3.us-east-2.amazonaws.com/examples/pexels-monstera-6311653.jpg",
    "https://neoo.s3.us-east-2.amazonaws.com/examples/pexels-monstera-6311653.jpg"
  ])

  const transitions = ref(["fade"])

  return { options, images, transitions }
}

[ragnarlotus]

Hello, sorry for the late answer.

This is the example:

import { shallowReactive } from 'vue';
import { VueFlux, Img, Fade } from 'vue-flux';

const rscs = shallowReactive([
   new Img('/images/1.jpg'),
   new Img('/images/2.jpg'),
   new Img('/images/2.jpg'),
]);

const transitions = shallowReactive([Fade]));

const options = shallowReactive({
   allowFullscreen: true,
   asutoplay: false,
   bindKeys: true,
   infinite: false,
   lazyLoadAfter: 10,
});

<VueFlux :transitions="transitions" :rscs="rscs" :options="options" />

I hope this helps you.

[mrfrkayvaz]

Hi, thanks for your reply.
I am using external sources and it's causing this error.

Does the plugin support external images?

[ragnarlotus]

It should work although I didn't test, but being external shouldn't cause any problem