[](https://www.npmjs.com/package/nuxt-swiper/) [](https://www.npmjs.com/package/nuxt-swiper) [
> [!IMPORTANT]
> Nuxt Swiper utilizes Swiper.js as its foundation using its web components. Please ensure that you read the Swiper.js documentation before utilizing this module and reporting any issues that are not directly related to Nuxt Swiper. If there is an underlying bug, please submit an issue to 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
- 📖 Open Source
- 🪄 TypeScript Support
- ✅ Auto Imports Enabled
- ✨ Just Works Out of the Box like Magic
``bash`
npx nuxi@latest module add swiper
> [!NOTE]
> Since these are web components, they use the kebab-case naming convention vs the camelCase naming convention that Vue uses.
| Swiper Components (WebComponent) |
| -------------------------------- |
| |
| |
`ts`
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
}
`
`vue
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
`
`vue
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
`
Local development
- Clone this repository
- Install the latest LTS version of Node.js
- Enable Corepack using corepack enable
- Install dependencies using
- Generate type stubs using
- Run tests using
Swiper.js is developed by @nolimits4web.
Nuxt Swiper` is developed by @cpreston321.
X (formely knowned as Twitter) - @christian_ggg
Also, if you like my work, please feel free to buy me a coffee ☕️
---