[Help]: Accessing embla ref after v-if

[wanted80]

Summary

Hello,

I'm trying to integrate Embla Carousel in a Vue (v3.5.13) component (composition api) and I have an issue when using a v-if on the results ref variable in the parent/root div. Without the v-if="isNotEmpty(results)" control Embla work fine.

Have you guys a suggestion to make it work and keeping the v-if on top?

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

Additional information

A simplified version of the component:

<script setup lang="ts">
import { ref } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
import client from '@/client'
import { isNotEmpty } from '@/helpers'

import type { AxiosError } from 'axios'
import type { EmblaOptionsType } from 'embla-carousel'
import type { FastResultsResponse, MessageErrorResponse } from '@/types'

defineOptions({
  inheritAttrs: false
})

const props = withDefaults(
  defineProps<{
    route: string
    title?: string
  }>(),
  {
    title: undefined,
  }
)

const results = ref<FastResultsResponse | null>(null)
const errorMsg = ref<string>('')
const isLoading = ref<boolean>(false)

const options: EmblaOptionsType = { align: 'start', dragFree: true, loop: false }
const [emblaRef] = emblaCarouselVue(options)

async function fetchData() {
  isLoading.value = true

  try {
    const { data } = await client.post<FastResultsResponse>(props.route)
    results.value = isNotEmpty(data) ? data : null
  } catch (e) {
    const err = e as AxiosError
    errorMsg.value = (err.response?.data as MessageErrorResponse).message
    results.value = null
  } finally {
    isLoading.value = false
  }
}

fetchData()
</script>

<template>
  <div
    v-if="isNotEmpty(results)"
    :class="$attrs.class"
  >
    <div
      class="embla p-2 overflow-hidden"
      ref="emblaRef"
    >
      <div class="embla__container grid grid-cols-[repeat(auto-fill,14rem)] grid-flow-col gap-3 touch-pan-y">
        <div
          v-for="(result, index) in results"
          :key="`slide-${index}`"
          class="embla__slide"
        >
          Slide {{ index }}
        </div>
      </div>
    </div>
  </div>
</template>

CodeSandbox example

No response

[davidjerleke]

Hi @wanted80,

Thank you for your question. When inspecting the code, my initial guess is that emblaCarouselVue has to watch the element ref named emblaNode for changes and react accordingly internally, much like the React wrapper works.

Maybe something along these lines:

  watch(
    () => emblaNode.value,
    () => {
      if (emblaNode.value) {
        EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
        emblaApi.value = EmblaCarousel(
          emblaNode.value,
          storedOptions,
          storedPlugins
        )
      } else {
        emblaApi.value = undefined
      }
    },
    { immediate: true }
  )

This improvement has been added/fixed in v9 here and is an upcoming feature.

Until then, you'll have to call emblaApi.value.reInit() manually, as soon as your carousel placed inside a v-if becomes visible.