Nuxt Swiper
[!IMPORTANT]
Nuxt Swiper utilizes Swiper.js as its foundation using it's 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
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
[!INFO]
Since these are web components, they use the kebab-case naming convention vs the camelCase naming convention that Vue uses.
Swiper Components (WebComponent) |
---|
<swiper-container/> |
<swiper-slide /> |
Module Options
interface ModuleOptions {
enableComposables?: boolean
bundled?: boolean
}
Basic Usuage
<script setup lang="ts">
// 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)
})
</script>
<template>
<ClientOnly>
<swiper-container ref="containerRef">
<swiper-slide
v-for="(slide, idx) in slides"
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
</swiper-slide>
</swiper-container>
</ClientOnly>
<!-- Go back one slide -->
<button @click="swiper.prev()">
Prev
</button>
<!-- Go forward one slide -->
<button @click="swiper.next()">
Next
</button>
</template>
<style lang="css">
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;
}
</style>
Advanced Usage
<script setup lang="ts">
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)
})
</script>
<template>
<ClientOnly>
<swiper-container ref="containerRef" :init="false">
<swiper-slide
v-for="(slide, idx) in slides"
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
</swiper-slide>
</swiper-container>
</ClientOnly>
</template>
<style lang="css">
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;
}
</style>
💻 Development
Local development
- Clone this repository
- Install the latest LTS version of Node.js
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install
- Generate type stubs using
pnpm dev:prepare
- Run tests using
pnpm dev
Credits
Swiper.js
is developed by @nolimits4web.
Nuxt Swiper
is developed by @cpreston321.
📧 Contact
X (formely knowned as Twitter) - @christian_ggg
Also, if you like my work, please feel free to buy me a coffee ☕️
Contributors
MIT License © 2024 CP