[Help]: Vue2 support?

[shadowspade]

Summary

Hi There! I'm struggling to use this library with Vue2.

We have a webpack mix, so we can globally declare packages and components, and I'd like to just import Embla there instead of in my vue component, but I just can't get it to work. Does embla even support vue2? Do i need to lower my version from latest? I can't seem to find a concrete answer online.

If vue2 is not supported I could attempt to use the vanilla js implementation, thanks.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @shadowspade,

Thank you for your question. Unfortunately, embla-carousel-vue only supports Vue 3 and up. However, as you said you can use the vanilla version and re-create the behaviour of embla-carousel-vue by making use of the embla-carousel-reactive-utils utility package. You need to do this if you want it to work like embla-carousel-vue`:

• Only initialise the script EmblaCarousel() if the environment is a browser and the ref you attach to the DOM has any value.
• Automatically re-initialize when options change.
• Automatically re-initialize when plugins change.
• Automatically handle destroy before unmount.

Good luck!

Best,
David

[shadowspade]

Thank you so much for your help and quick response! We are using the vue2 options-api instead of the composition-api, and this is giving me some trouble initializing the carousel.

I tried to follow your example and your nice bullet points but I fear that I am not skilled enough to convert it to a working carousel in the options-api. Nonetheless, thank you for your response and best of luck with the package for the future!

[davidjerleke]

@shadowspade I understand. Maybe a discord channel for Vue questions would be a good place to ask for help?

[meirroth]

@shadowspade Hi, Here's a working implementation of Embla Carousel with Vue 2 and Options API: https://github.com/meirroth/embla-carousel-vue2 Have fun!

[shadowspade]

@meirroth whaaat, did you create that just for me 🥹 thank you so much! I see I was at least very close with my implementation but seeing how you did it is a perfect example! thank you again!

[meirroth]

@shadowspade Sure, happy to help!

@davidjerleke I'll create a PR to mention Vue 2 support.