{"id":12401,"library":"vue-awesome-swiper","title":"Vue Awesome Swiper (Deprecated)","description":"Vue Awesome Swiper is a Vue.js component wrapper for the Swiper carousel library. As of its latest stable version, 5.0.1, the project is officially deprecated. Version 5.x acts exclusively as a re-export of the official `swiper/vue` package, making its APIs entirely incompatible with previous `vue-awesome-swiper` versions (v4.x and below). All functionality and component structures now directly mirror the official Swiper Vue component. Developers are strongly advised to migrate to the official `swiper/vue` package for continued stability, features, and future updates. Prior versions (e.g., v4.1.1 for Swiper 5-6/Vue 2, v3.1.3 for Swiper 4.x/Vue 2) offered direct integration but are no longer maintained. The project effectively has no independent release cadence since its deprecation, simply following `swiper/vue`'s exports.","status":"deprecated","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/surmon-china/vue-awesome-swiper","tags":["javascript","vue swiper","vue awesome swiper","vue carrousel","carrousel","swiper","typescript"],"install":[{"cmd":"npm install vue-awesome-swiper","lang":"bash","label":"npm"},{"cmd":"yarn add vue-awesome-swiper","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-awesome-swiper","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Swiper library; v5.x re-exports the official `swiper/vue` components which depend on Swiper.js itself.","package":"swiper","optional":false},{"reason":"Vue.js framework, specifically Vue 3.x for `vue-awesome-swiper` v5.x.","package":"vue","optional":false}],"imports":[{"note":"Since v5, `vue-awesome-swiper` re-exports from `swiper/vue`, so this is functionally equivalent to `import { Swiper, SwiperSlide } from 'swiper/vue'`. ESM is required.","wrong":"const { Swiper, SwiperSlide } = require('vue-awesome-swiper')","symbol":"Swiper, SwiperSlide","correct":"import { Swiper, SwiperSlide } from 'vue-awesome-swiper'"},{"note":"Swiper modules and their CSS must be imported directly from the `swiper` package, not `vue-awesome-swiper` v5. Ensure you import the base Swiper class and specific module styles.","wrong":"import { Pagination } from 'vue-awesome-swiper'","symbol":"Pagination (and other Swiper modules)","correct":"import SwiperClass, { Pagination } from 'swiper'\nimport 'swiper/css'\nimport 'swiper/css/pagination'"}],"quickstart":{"code":"<template>\n  <swiper\n    :modules=\"modules\"\n    :pagination=\"{ clickable: true }\"\n    :slides-per-view=\"1\"\n    :space-between=\"30\"\n    navigation\n    @swiper=\"onSwiper\"\n    @slideChange=\"onSlideChange\"\n  >\n    <swiper-slide>Slide 1: Welcome to Swiper!</swiper-slide>\n    <swiper-slide>Slide 2: A powerful touch slider.</swiper-slide>\n    <swiper-slide>Slide 3: Build amazing carousels.</swiper-slide>\n    <swiper-slide>Slide 4: Fully customizable.</swiper-slide>\n  </swiper>\n</template>\n\n<script setup>\n  import { ref } from 'vue';\n  import SwiperClass, { Pagination, Navigation } from 'swiper';\n  import { Swiper, SwiperSlide } from 'vue-awesome-swiper';\n\n  // Import Swiper styles\n  import 'swiper/css';\n  import 'swiper/css/pagination';\n  import 'swiper/css/navigation';\n\n  const modules = [Pagination, Navigation];\n  const swiperInstance = ref(null);\n\n  const onSwiper = (swiper) => {\n    swiperInstance.value = swiper;\n    console.log('Swiper initialized:', swiper);\n  };\n\n  const onSlideChange = () => {\n    console.log('Slide changed!');\n  };\n</script>\n\n<style scoped>\n.swiper-slide {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  height: 200px;\n  background-color: #f0f0f0;\n  border-radius: 8px;\n}\n</style>","lang":"typescript","description":"This example demonstrates the basic setup of `vue-awesome-swiper` v5.x within a Vue 3 SFC, including module imports, event handling, and basic styling for a functional carousel."},"warnings":[{"fix":"Rewrite your Swiper component usage to align with the `swiper/vue` API documentation. This involves using `Swiper` and `SwiperSlide` components directly, importing modules and styles from the `swiper` package, and adopting the new prop and event structure.","message":"Version 5.x of `vue-awesome-swiper` introduces a complete API incompatibility with previous versions (v4.x and below). It no longer provides its own Swiper wrapper but instead re-exports components directly from the official `swiper/vue` package. Code written for older `vue-awesome-swiper` APIs will not function with v5.x.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update your import paths to use `import { Swiper, SwiperSlide } from 'swiper/vue'` instead of `vue-awesome-swiper`. No other changes are typically needed for v5.x code as it already re-exports the official components.","message":"The `vue-awesome-swiper` library is officially deprecated as of version 5.x. Users are strongly recommended to migrate to the official `swiper/vue` component for ongoing support, new features, and bug fixes, as this project will not receive further independent development.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Ensure you explicitly import Swiper modules (e.g., `import { Pagination } from 'swiper'`) and all necessary CSS files (e.g., `import 'swiper/css'`, `import 'swiper/css/pagination'`) in your component or global entry point.","message":"When using `vue-awesome-swiper` v5.x, all Swiper modules (e.g., Pagination, Navigation) and their corresponding CSS styles must be imported directly from the `swiper` package, not from `vue-awesome-swiper`. Forgetting to import styles will result in unstyled carousels.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For `vue-awesome-swiper` v5.x (and `swiper/vue`), Swiper modules are passed as props to the `<swiper>` component via the `modules` array (e.g., `:modules=\"[Pagination, Navigation]\"`). Ensure modules are imported directly from `swiper` and passed correctly.","cause":"Attempting to use `SwiperClass.use()` or other methods from an incorrectly imported Swiper instance, often after migrating from `vue-awesome-swiper` v4.x to v5.x without updating module imports.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Verify that your project is running Vue 3.x, as `vue-awesome-swiper` v5.x (and `swiper/vue`) are Vue 3-only. If you need Vue 2 support, you must use `vue-awesome-swiper@4.1.1` or earlier.","cause":"This typically occurs when trying to use `vue-awesome-swiper` v5.x components in a Vue 2 project or incorrectly configuring a Vue 3 project with incompatible component versions or build setups.","error":"Vue warn: Component is missing template or render function."}],"ecosystem":"npm"}