[Help]: Create embla carousel with reactive state options (ref)?

[MickL]

Summary

I am having some refs that change over time:

const dragFree = ref(true);

const [emblaRef, emblaApi] = emblaCarouselVue({
  dragFree: dragFree,
});

But if the ref value changes, Embla does not seem to listen for those changes. How may I archive to do so? Do I need to destroy the emblaRef and recreate it?

E.g. one use-case is enabling/disabling features depending on the viewport, which may change after resizing the window.

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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@MickL thank you for your question. Try storing the entire options object in your ref and reassign the options object when you want to change options.

[MickL]

Thanks for the quick reply! This actually works when using reactve() or computed() for the whole object:

const dragFree = ref(true);

const [emblaRef, emblaApi] = emblaCarouselVue(computed(() => ({
  dragFree,
}));

Very cool!