reInit() required on nuxt3/vue3 applications

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• v7.0.0-rc05

Describe the bug

Within my nuxt3 application on load the embla carousel works fine but when navigation away and back (using NuxtLink, for example) the slider looks initialised but you cannot swipe/drag/use the slider. If I resize the browser it works as usual again.

I have read about using the reInit() method on other issues but having tried watching embla or scrollSnaps etc it doesn’t seem to work.

I have also tried the vue wrapper but get the same issue. Weirdly I never had this issue in nuxt2/vue2.

CodeSandbox

<script setup>

import { ref, onMounted, watch } from 'vue'
import EmblaCarousel from 'embla-carousel'

const props = defineProps({
	slides: Array
})

const viewport = ref(null)

const embla = ref(null)
const scrollSnaps = ref([])
const selectedScrollSnap = ref(0)
const canScrollPrev = ref(false)
const canScrollNext = ref(true)

onMounted(() => {
	embla.value = EmblaCarousel(viewport.value, {
		loop: false
	})
	scrollSnaps.value = embla.value.scrollSnapList()
})

watch(??????, () => {
	console.log('hello')
	embla.value?.reInit()
})

</script>

[richgcook]

Hi @davidjerleke apologies greatly for the delay.

I’m using the <script setup></script> sugar for vue but nevertheless I couldn’t get your suggested fix to work. I’ll try to create a CodeSandbox asap.

[davidjerleke]

Hi @richgcook,

I’m closing this until there’s a reduced test case that clearly demonstrates the problem (a CodeSandbox or similar). Because I can’t debug fragments of code that are shared in comments.

Thank you for understanding.

Best, David