Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Glide, GlideSlide
✓ import { Glide, GlideSlide } from 'vue-glide-js'
✗ const { Glide, GlideSlide } = require('vue-glide-js')
For on-demand component registration, commonly used in Single File Components (SFCs).
VueGlide
✓ import VueGlide from 'vue-glide-js'
✗ import { VueGlide } from 'vue-glide-js'
Used for global registration via `Vue.use(VueGlide)` in Vue 2 applications.
CSS Styles
✓ import 'vue-glide-js/dist/vue-glide.css'
✗ /* Missing CSS import */
Essential for proper rendering and styling of the carousel. Must be imported separately.
This quickstart demonstrates the on-demand registration and usage of `vue-glide-js` components (`Glide` and `GlideSlide`) within a Vue 2 application's Single File Components, including dynamic content and navigation controls.
/* main.js (or main.ts) */
import Vue from 'vue';
import App from './App.vue';
import 'vue-glide-js/dist/vue-glide.css';
new Vue({
render: h => h(App),
}).$mount('#app');
/* App.vue */
<template>
<div id="app">
<h1>My Product Showcase</h1>
<div class="carousel-container">
<Glide :options="glideOptions">
<GlideSlide v-for="product in products" :key="product.id">
<div class="product-card">
<img :src="product.image" :alt="product.name" />
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
</div>
</GlideSlide>
<template slot="control">
<button data-glide-dir="<">prev</button>
<button data-glide-dir=">">next</button>
</template>
</Glide>
</div>
</div>
</template>
<script>
import { Glide, GlideSlide } from 'vue-glide-js';
export default {
name: 'App',
components: {
[Glide.name]: Glide,
[GlideSlide.name]: GlideSlide
},
data() {
return {
glideOptions: {
type: 'carousel',
perView: 3,
focusAt: 'center',
gap: 20,
breakpoints: {
768: { perView: 2 },
480: { perView: 1 }
}
},
products: [
{ id: 1, name: 'Product A', description: 'Description for A', image: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Product+A' },
{ id: 2, name: 'Product B', description: 'Description for B', image: 'https://via.placeholder.com/150/00FF00/000000?text=Product+B' },
{ id: 3, name: 'Product C', description: 'Description for C', image: 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Product+C' },
{ id: 4, name: 'Product D', description: 'Description for D', image: 'https://via.placeholder.com/150/FFFF00/000000?text=Product+D' },
{ id: 5, name: 'Product E', description: 'Description for E', image: 'https://via.placeholder.com/150/FF00FF/FFFFFF?text=Product+E' }
]
};
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.carousel-container {
max-width: 900px;
margin: 0 auto;
}
.product-card {
border: 1px solid #eee;
padding: 15px;
text-align: center;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-card img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
border-radius: 4px;
font-size: 1em;
}
button:hover {
background-color: #368a62;
}
</style>
Debug
Known issues
breakingVersion 1.2.0 refactored how templates are rendered, explicitly requiring `VueGlideSlide` components as direct children of `VueGlide`. Placing other elements directly inside the main carousel component will likely break the layout or functionality.fixEnsure that only `<VueGlideSlide>` components are direct children of the `<VueGlide>` component.
affects: >=1.2.0
gotchaThe package currently lacks explicit documentation or examples for Vue 3. While it might function with Vue 3 via compatibility builds, the provided API and quickstart examples (e.g., `Vue.use`, `[Glide.name]: Glide`) are designed for Vue 2's Options API and global instance methods. Vue 2 reached End of Life (EOL) in late 2023.fixFor Vue 3 projects, investigate `vue-glide-js`'s compatibility or consider alternatives with native Vue 3 support. If using `vue-glide-js` with Vue 3, adapt component registration to Vue 3's `app.component()` or use named imports directly in Composition API setups.
affects: >=1.0.0
gotchaCritical styling for the carousel, including layout and default theme, is provided via a separate CSS file (`vue-glide-js/dist/vue-glide.css`). Forgetting to import this stylesheet will result in an unstyled and potentially broken slider appearance.fixAlways include `import 'vue-glide-js/dist/vue-glide.css'` in your main application entry file or within a component where the carousel is used.
affects: >=1.0.0
deprecatedMultiple NPM vulnerabilities were fixed in versions 1.3.0 and 1.3.10. Running older versions exposes projects to known security risks.fixUpgrade to the latest stable version of `vue-glide-js` (e.g., `npm update vue-glide-js` or `npm install vue-glide-js@latest`).
affects: <1.3.0, >=1.3.0 <1.3.10
gotchaThe underlying `Glide.js` library, which `vue-glide-js` wraps, has shown inactive maintenance with no new versions released to npm in the past 12 months, and little recent repository activity. This could imply a slower pace for bug fixes or new features if `vue-glide-js` relies on updates from its core dependency.fixMonitor both `vue-glide-js` and `@glidejs/glide` for updates. For mission-critical applications, assess the long-term support implications of the underlying library's maintenance status.
affects: >=1.0.0
Errors
Common errors & fixes
Unknown custom element: <vue-glide> - did you register the component correctly?
The Vue component `Glide` (or `VueGlide` for global install) was not properly registered with your Vue application.
fixFor on-demand usage in SFCs, ensure you import and register: `import { Glide, GlideSlide } from 'vue-glide-js'; export default { components: { [Glide.name]: Glide, [GlideSlide.name]: GlideSlide } }`. For global use in `main.js`, ensure `import VueGlide from 'vue-glide-js'; Vue.use(VueGlide);`. Cannot read properties of undefined (reading 'mount') OR Slides do not appear correctly formatted or styled.
The required CSS stylesheet `vue-glide-js/dist/vue-glide.css` was not imported, leading to missing essential styling and potentially JavaScript errors related to element dimensions.
fixAdd `import 'vue-glide-js/dist/vue-glide.css';` to your main JavaScript entry file (e.g., `main.js`) or within the `<style>` block of the component where the carousel is used (if using a preprocessor or build tool that handles imports).
TypeError: Cannot set properties of undefined (setting 'perView') OR The slider does not respond to options changes.
Props passed to the `<Glide>` component (e.g., `options`) are not reactive or are being mutated incorrectly after initial setup, or the Glide.js instance isn't correctly re-initialized on option changes.
fixEnsure `options` are defined in `data()` and treated as immutable or use a deep watch if dynamic changes are required. The library might require a manual refresh/update call on the Glide instance if options change dynamically, or consider using a `key` prop on `<Glide>` to force re-render on major option changes.
Audit
Dependencies
vuerequiredPeer dependency as a Vue.js component library.
@glidejs/gliderequiredRuntime dependency for the core carousel functionality.