Nuxt Swiper

[!IMPORTANT]

Nuxt Swiper uses Swiper.js as its base via its web components. Please make sure to read the Swiper.js documentation before using this module and reporting any issues not directly related to Nuxt Swiper. If there is a fundamental bug, please file an issue in the Swiper.js repository.

[!NOTE]

If you want to learn how to use web components in Vue.js, please refer to the docs here: Vue.js Web Components

Features

• 📖 Open Source
• 🪄 TypeScript Support
• ✅ Auto Imports Enabled
• ✨ Just Works Out of the Box like Magic

Setup

Try it online

Step 1: Install module

npx nuxi@latest module add swiper

Usage

[!NOTE]

Since these are web components, they use the kebab-case naming convention vs the camelCase naming convention that Vue uses.

| Swiper Components (WebComponent) | | -------------------------------- | | | | |

Module Options

interface ModuleOptions {
  /
   
Enable custom Swiper composables to help you access Swiper instance.
   
@example ``vue

   

   
*
   

   
`

   
@default true
   
*/
  enableComposables?: boolean
  /
   
Bundle Swiper custom elements.
   
if disabled, you need to import swiper css and modules manually.
   
@see https://swiperjs.com/element#core-version--modules
   
@default true
   
*/
  bundled?: boolean
}

Basic Usage

Advanced Usage

💻 Development

Credits

Swiper.js is developed by @nolimits4web.

Nuxt Swiper` is developed by @cpreston321.

📧 Contact

X (formerly known as Twitter) - @christian_ggg

Also, if you like my work, please feel free to buy me a coffee ☕️

Contributors

MIT License © 2025 CP

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-15 ---