Is it possible to use glidejs inside a vue component?

Question

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>

score 2 · Accepted Answer · answered Oct 05 '21 at 22:54

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

Is it possible to use glidejs inside a vue component?

1 Answers1