[Help]: Adding multiple plugins with Vue

[richgcook]

Summary

Is this a working way to set up multiple plugins when using emblaCarouselVue?

import emblaCarouselVue from 'embla-carousel-vue'
import AutoScroll from 'embla-carousel-auto-scroll'
import ClassNames from 'embla-carousel-class-names'

const [viewport, embla] = emblaCarouselVue({
	loop: true,
	align: 'start',
	dragFree: true,
	containScroll: 'trimSnaps',
}, [
	ClassNames({
		draggable: '--draggable', 
		dragging: '--dragging'
	}),
	AutoScroll(
		{ playOnInit: false }
	)]
)

It's not the cleanest but technically it should work? I had previously used the following but unsure which is cleaner.

const classNamesOptions = { draggable: '--draggable', dragging: '--dragging' }
const classNamesWithOptions = ClassNames(classNamesOptions)

const [viewport, embla] = emblaCarouselVue({
	loop: true,
	align: 'start',
	dragFree: true,
	containScroll: 'trimSnaps',
}, [classNamesWithOptions])

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]

@richgcook as stated in the docs (please click on the Vue tab for relevant code example) the first approach you mention is correct. You should pass the plugin constructors directly to emblaCarouselVue().

However, if you want to make it a bit more readable, you can store the plugin options in a variable like so:

<script setup>
  import emblaCarouselVue from 'embla-carousel-vue'
  import Autoplay from 'embla-carousel-autoplay'

  const autoplayOptions = { delay: 4000 }

  const [emblaRef] = emblaCarouselVue({ loop: true }, [
    Autoplay(autoplayOptions)
  ])

  // ...
</script>

[richgcook]

Here we go, sorry for the delay.

https://stackblitz.com/edit/ab-nuxt3-nhg5fc?file=pages%2Findex.vue

You'll see setup under the components > SliderA.vue for embla. You'll see in the browser window no class names are being added nor is AutoScroll enabled. Weird?

[meirroth]

@richgcook Here's a minimal setup with Auto Scroll and Class Names plugins working:
https://stackblitz.com/edit/github-gtivz7?file=app.vue

[richgcook]

So the issue is using slots? I don't understand. The loop is generated through the component so the slider initialisation should be fine. Hmm.

[meirroth]

@richgcook Upgrading embla-carousel-vuedependency from 7.1.0 to 8.0.2 fixed the issue 😅
https://stackblitz.com/edit/ab-nuxt3-urc5zc?file=package.json

[davidjerleke]

@richgcook probably because of this (from the v8.0.0 release):

[davidjerleke]

@richgcook please mark @meirroth's comment as answer if it solved your problem. Thanks!

[richgcook]

Ah okay so I was using v8 of the plugins but v7 of embla itself so embla wasn't using ResizeObserver or MutationObserver but the plugins were?

[davidjerleke]

@richgcook you need to match the major version of the Embla package with the plugins you use. Example:

• Embla v7.x.x only work with plugins with v7.x.x.
• Embla v8.x.x only work with plugins with v8x.x.
• You should prefer an exact version match though: Embla v8.0.3 with plugins with v8.0.3.

This is because v8 has changed how it handled plugins internally.