Vue 3 wrapper

Feature description

Create an Embla Carousel Vue wrapper - A component that allows Vue users to consume Embla Carousel.

Release

Released with v7.0.0-rc05. Documentation will be released with stable v7 but until then you can check out usage instructions below:

Vue wrapper

Start by installing the Embla Carousel npm package and add it to your dependencies.

npm install embla-carousel-vue --save

The component structure

Embla Carousel provides the handy emblaCarouselVue function for seamless integration with Vue. A minimal setup requires an overflow wrapper and a scroll container. Start by adding the following structure to your carousel:

<template>
  <div class="embla" ref="emblaNode">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
  import emblaCarouselVue from 'embla-carousel-vue'

  export default {
    setup() {
      const [emblaNode] = emblaCarouselVue()
      return { emblaNode }
    },
  }
</script>

Styling the carousel

The emblaCarouselVue function gives us an emblaNode to attach to our wrapping element with the classname embla, which is needed to cover the scroll overflow. The element with the container classname is the scroll body that scrolls the slides. Continue by adding the following CSS to these elements:

<style scoped>
  .embla {
    overflow: hidden;
  }
  .embla__container {
    display: flex;
  }
  .embla__slide {
    position: relative;
    flex: 0 0 100%;
  }
</style>

Accessing the carousel API

The emblaCarouselVue function takes the Embla Carousel options as the first argument. Additionally, you can access the API with an onMounted like demonstrated below:

<template>
  <div class="embla" ref="emblaNode">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
  import { onMounted } from 'vue'
  import emblaCarouselVue from 'embla-carousel-vue'

  export default {
    setup() {
      const [emblaNode, emblaApi] = emblaCarouselVue({ loop: false })

      onMounted(() => {
        if (emblaApi.value) {
          // Embla API is ready
        }
      })

      return { emblaNode, emblaApi }
    },
  }
</script>

Adding plugins

The emblaCarouselVue function also accepts plugins as the second argument. Note that plugins need to be passed in an array like so:

<template>
  <div class="embla" ref="emblaNode">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>

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

  export default {
    setup() {
      const [emblaNode] = emblaCarouselVue({ loop: false }, [Autoplay()])
      return { emblaNode }
    },
  }
</script>

Congratulations! You just created your first Embla Carousel component.

[davidjerleke]

@rojadesign yes, this is clearly a TypeScript related bug in the embla-carousel-vue package because the typings are wrong. The type for emblaApi should be EmblaCarouselType | null. I’ll have to look into this when possible. Feel free to propose a solution if you want. The Vue wrapper code is here.

Thank you for reporting this. I created the following bug report where we can track the bug:

• #366

Best, David

[rojadesign]

@davidjerleke thank you for your time. Here is the Vue3 + TypeScript template used - not really working but the same error I have locally also appears there:

Property 'clickAllowed' does not exist on type 'EmblaCarouselType | HTMLElement'. Property 'clickAllowed' does not exist on type 'HTMLElement'.ts(2339)