Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cpreston321/nuxt-swiper
Swiper.js for Nuxt
https://github.com/cpreston321/nuxt-swiper
alternative nuxt nuxt-module nuxt3 swiper swiperjs vue
Last synced: 6 days ago
JSON representation
Swiper.js for Nuxt
- Host: GitHub
- URL: https://github.com/cpreston321/nuxt-swiper
- Owner: cpreston321
- License: mit
- Created: 2022-09-12T21:47:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-10T00:09:06.000Z (12 days ago)
- Last Synced: 2025-02-14T15:06:31.936Z (7 days ago)
- Topics: alternative, nuxt, nuxt-module, nuxt3, swiper, swiperjs, vue
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/nuxt-swiper
- Size: 2.68 MB
- Stars: 255
- Watchers: 2
- Forks: 11
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Swiper
[](https://www.npmjs.com/package/nuxt-swiper/)
[](https://www.npmjs.com/package/nuxt-swiper)
[](/LICENSE)
> [!IMPORTANT]
> ***Nuxt Swiper*** utilizes Swiper.js as its foundation using it's web components. Please ensure that you read the Swiper.js [documentation](https://swiperjs.com/element) 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](https://github.com/nolimits4web/swiper/issues).
> [!NOTE]
> If you want to learn how to use web components in **Vue.js** please refer to the docs here: [Vue.js Web Components](https://vuejs.org/guide/extras/web-components.html)
## Features
- 📖 Open Source
- 🪄 TypeScript Support
- ✅ Auto Imports Enabled
- ✨ Just Works Out of the Box like Magic
## Setup
### Try it online
[](https://stackblitz.com/github/cpreston321/nuxt-swiper/tree/main/examples/swiper-basic?file=app.vue)
### Step 1: Install module
```bash
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
```ts
interface ModuleOptions {
/**
* Enable custom Swiper composables to help you access Swiper instance.
* @example ```vue
*
* const swiperRef = ref<null>(null)
* const swiper = useSwiper(swiperRef, { loop: true, autoplay: { delay: 5000 })
*
* const next = () => swiper.next()
*
*
*
*
* Slide 1
* Slide 2
*
*
* ```
* @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
```vue
// Create 10 slides
const containerRef = ref(null)
const slides = ref(Array.from({ length: 10 }))
const swiper = useSwiper(containerRef)
onMounted(() => {
// Access Swiper instance
// Read more about Swiper instance: https://swiperjs.com/swiper-api#methods--properties
console.log(swiper.instance)
})
Slide {{ idx + 1 }}
Prev
Next
swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 20vh;
font-size: 4rem;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
```
## Advanced Usage
```vue
const containerRef = ref(null)
const slides = ref(Array.from({ length: 10 }))
const swiper = useSwiper(containerRef, {
effect: 'creative',
loop: true,
autoplay: {
delay: 5000,
},
creativeEffect: {
prev: {
shadow: true,
translate: [0, 0, -400],
},
next: {
shadow: true,
translate: [0, 0, -400],
},
},
})
onMounted(() => {
console.log(swiper.instance)
})
Slide {{ idx + 1 }}
swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 20vh;
font-size: 4rem;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
```
## 💻 Development
Local development
- Clone this repository
- Install the latest LTS version of [Node.js](https://nodejs.org/en/)
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Generate type stubs using `pnpm dev:prepare`
- Run tests using `pnpm dev`
## Credits
[`Swiper.js`](https://swiperjs.com/) is developed by [@nolimits4web](https://github.com/nolimits4web).
[`Nuxt Swiper`](#nuxt-swiper) is developed by [@cpreston321](https://github.com/cpreston321).
## 📧 Contact
**X** (formely knowned as Twitter) - [@christian_ggg](https://x.com/christian_ggg)
Also, if you like my work, please feel free to [buy me a coffee](https://www.buymeacoffee.com/cpreston321) ☕️
[](https://www.buymeacoffee.com/cpreston321)
## Contributors
[](https://contrib.rocks/image?repo=cpreston321/nuxt-swiper)
---
[MIT](./LICENSE) License © 2024 [CP](https://github.com/cpreston321)