I would like to use glidejs inside a vuejs component, although I couldn't make it work so far.
Is it possible to achieve this? Does vuejs support such a thing?
my code:
<template>
<div>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">0</li>
<li class="glide__slide">1</li>
<li class="glide__slide">2</li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
</template>
<script>
import Glide from '@glidejs/glide'
new Glide('.glide').mount() // this is probably wrong
export default {
name: 'Carousel',
}
</script>
<style scoped>
@import '../assets/styles/glide/glide.core.min.css';
</style>
The main fix needed in your code is to move the Glide initialization to the mounted() hook, which runs when the component has mounted in the document, enabling the .glide selector given to the Glide constructor to be found:
<script>
import Glide from '@glidejs/glide'
export default {
mounted() {
new Glide('.glide').mount()
},
}
</script>