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>

CodePudding user response：

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>

demo