{"id":12482,"library":"vue-glide-js","title":"Vue Glide.js Carousel Component","description":"Vue Glide.js is a Vue.js component that wraps the popular and lightweight Glide.js carousel library, providing a Vue-native interface for creating responsive sliders. As of its current stable version, 1.3.14, the library facilitates the integration of carousels into Vue applications with minimal setup. It maintains a consistent, albeit not rapid, release cadence, addressing NPM vulnerabilities and updating the underlying Glide.js library. Its key differentiators include leveraging the robust feature set and performance of Glide.js while offering a declarative API consistent with Vue's component-based architecture, abstracting away direct DOM manipulation typical of vanilla JavaScript libraries. The current documentation and examples primarily target Vue 2 environments.","status":"active","version":"1.3.14","language":"javascript","source_language":"en","source_url":"https://github.com/antonreshetov/vue-glide","tags":["javascript","slider","carousel","glide","vue","vuejs","vue slider","vue carousel","components"],"install":[{"cmd":"npm install vue-glide-js","lang":"bash","label":"npm"},{"cmd":"yarn add vue-glide-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-glide-js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as a Vue.js component library.","package":"vue","optional":false},{"reason":"Runtime dependency for the core carousel functionality.","package":"@glidejs/glide","optional":false}],"imports":[{"note":"For on-demand component registration, commonly used in Single File Components (SFCs).","wrong":"const { Glide, GlideSlide } = require('vue-glide-js')","symbol":"Glide, GlideSlide","correct":"import { Glide, GlideSlide } from 'vue-glide-js'"},{"note":"Used for global registration via `Vue.use(VueGlide)` in Vue 2 applications.","wrong":"import { VueGlide } from 'vue-glide-js'","symbol":"VueGlide","correct":"import VueGlide from 'vue-glide-js'"},{"note":"Essential for proper rendering and styling of the carousel. Must be imported separately.","wrong":"/* Missing CSS import */","symbol":"CSS Styles","correct":"import 'vue-glide-js/dist/vue-glide.css'"}],"quickstart":{"code":"/* main.js (or main.ts) */\nimport Vue from 'vue';\nimport App from './App.vue';\nimport 'vue-glide-js/dist/vue-glide.css';\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n\n/* App.vue */\n<template>\n  <div id=\"app\">\n    <h1>My Product Showcase</h1>\n    <div class=\"carousel-container\">\n      <Glide :options=\"glideOptions\">\n        <GlideSlide v-for=\"product in products\" :key=\"product.id\">\n          <div class=\"product-card\">\n            <img :src=\"product.image\" :alt=\"product.name\" />\n            <h2>{{ product.name }}</h2>\n            <p>{{ product.description }}</p>\n          </div>\n        </GlideSlide>\n        <template slot=\"control\">\n          <button data-glide-dir=\"<\">prev</button>\n          <button data-glide-dir=\">\">next</button>\n        </template>\n      </Glide>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { Glide, GlideSlide } from 'vue-glide-js';\n\nexport default {\n  name: 'App',\n  components: {\n    [Glide.name]: Glide,\n    [GlideSlide.name]: GlideSlide\n  },\n  data() {\n    return {\n      glideOptions: {\n        type: 'carousel',\n        perView: 3,\n        focusAt: 'center',\n        gap: 20,\n        breakpoints: {\n          768: { perView: 2 },\n          480: { perView: 1 }\n        }\n      },\n      products: [\n        { id: 1, name: 'Product A', description: 'Description for A', image: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Product+A' },\n        { id: 2, name: 'Product B', description: 'Description for B', image: 'https://via.placeholder.com/150/00FF00/000000?text=Product+B' },\n        { id: 3, name: 'Product C', description: 'Description for C', image: 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Product+C' },\n        { id: 4, name: 'Product D', description: 'Description for D', image: 'https://via.placeholder.com/150/FFFF00/000000?text=Product+D' },\n        { id: 5, name: 'Product E', description: 'Description for E', image: 'https://via.placeholder.com/150/FF00FF/FFFFFF?text=Product+E' }\n      ]\n    };\n  }\n};\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n.carousel-container {\n  max-width: 900px;\n  margin: 0 auto;\n}\n.product-card {\n  border: 1px solid #eee;\n  padding: 15px;\n  text-align: center;\n  background: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.product-card img {\n  max-width: 100%;\n  height: auto;\n  margin-bottom: 10px;\n}\nbutton {\n  background-color: #42b983;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  margin: 0 5px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 1em;\n}\nbutton:hover {\n  background-color: #368a62;\n}\n</style>","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure that only `<VueGlideSlide>` components are direct children of the `<VueGlide>` component.","message":"Version 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.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"For 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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always include `import 'vue-glide-js/dist/vue-glide.css'` in your main application entry file or within a component where the carousel is used.","message":"Critical 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to the latest stable version of `vue-glide-js` (e.g., `npm update vue-glide-js` or `npm install vue-glide-js@latest`).","message":"Multiple NPM vulnerabilities were fixed in versions 1.3.0 and 1.3.10. Running older versions exposes projects to known security risks.","severity":"deprecated","affected_versions":"<1.3.0, >=1.3.0 <1.3.10"},{"fix":"Monitor 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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For 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);`.","cause":"The Vue component `Glide` (or `VueGlide` for global install) was not properly registered with your Vue application.","error":"Unknown custom element: <vue-glide> - did you register the component correctly?"},{"fix":"Add `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).","cause":"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.","error":"Cannot read properties of undefined (reading 'mount') OR Slides do not appear correctly formatted or styled."},{"fix":"Ensure `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.","cause":"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.","error":"TypeError: Cannot set properties of undefined (setting 'perView') OR The slider does not respond to options changes."}],"ecosystem":"npm"}