Swiper.js built for Nuxt 3
Fully featured Swiper.js module for Nuxt 3. Checkout Swiper.js for more information about how to use.
- 🚀 Nuxt 3 Support
- Open Source
- Full Typescript Support
- ✨ Auto import Swiper.js modules + styles.
- ✨ Just works out of the box.
# npm
npm install nuxt-swiper
# yarn
yarn add nuxt-swiper
#pnpm
pnpm add nuxt-swiper
// nuxt.config.ts
import { defineNuxtModule } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-swiper']
swiper: {
// Swiper options
//----------------------
// prefix: 'Swiper',
// styleLang: 'css',
// modules: ['navigation', 'pagination'],
}
})
// or inline config
export default defineNuxtConfig({
modules: [['nuxt-swiper', {
// Swiper options
}]]
})
Component Name | Auto Imported |
---|---|
<Swiper/> |
✅ |
<SwiperSlide/> |
✅ |
Default Prefix: Swiper
You can change the prefix in the module options.
Module Name | Auto Imported |
---|---|
SwiperA11y |
✅ |
SwiperAutoplay |
✅ |
SwiperController |
✅ |
SwiperEffectCreative |
✅ |
SwiperEffectCoverflow |
✅ |
SwiperEffectCube |
✅ |
SwiperEffectFade |
✅ |
SwiperEffectFlip |
✅ |
SwiperFreeMode |
✅ |
SwiperGrid |
✅ |
SwiperHashNavigation |
✅ |
SwiperHistory |
✅ |
SwiperKeyboard |
✅ |
SwiperLazy |
✅ |
SwiperMousewheel |
✅ |
SwiperManipulation |
✅ |
SwiperNavigation |
✅ |
SwiperPagination |
✅ |
SwiperParallax |
✅ |
SwiperScrollbar |
✅ |
SwiperThumbs |
✅ |
SwiperVirtual |
✅ |
SwiperZoom |
✅ |
<template>
<Swiper
:modules="[SwiperAutoplay, SwiperEffectCreative]"
:slides-per-view="1"
:loop="true"
:effect="'creative'"
:autoplay="{
delay: 8000,
disableOnInteraction: true,
}"
:creative-effect="{
prev: {
shadow: false,
translate: ['-20%', 0, -1],
},
next: {
translate: ['100%', 0, 0],
},
}"
>
<SwiperSlide v-for="slide in 10" :key="slide">
<strong>{{ slide }}</strong>
</SwiperSlide>
</Swiper>
</template>
type SwiperEffectType = "slide" | "fade" | "cube" | "coverflow" | "flip";
type SwiperModulesType =
| "a11y"
| "autoplay"
| "controller"
| "free-mode"
| "grid"
| "hash-navigation"
| "history"
| "keyboard"
| "lazy"
| "manipulation"
| "mousewheel"
| "navigation"
| "pagination"
| "parallax"
| "scrollbar"
| "thumbs"
| "virtual"
| "zoom"
| `effect-${SwiperEffectType}`;
/*
* Main Config interface
*/
interface SwiperModuleOptions {
/**
* The prefix to use for the Swiper Modules to import.
* This is useful for importing only the modules you need and
* avoiding importing the entire Swiper library.
*
* e.g. `${prefix}Autoplay` -> `SwiperAutoplay`
*
* @default 'Swiper'
*/
prefix?: string;
/**
* Which type of lang of styles to import
*
* ! This option is only works when `modules` is
* ! an array of modules.
*
* @default 'css'
*/
styleLang?: "css" | "scss";
/**
* Swiper modules to import
*
* '*' - imports all modules
* '['autoplay', 'effect-cards', 'thumbs', 'lazy']' - imports only these modules to keep bundle size small
*
* @default '*'
*/
modules?: SwiperModulesType[] | "*";
}
- Clone this repository
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install --shamefully-hoist
- Open playground with
pnpm dev
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
swiper
is developed by @nolimits4web.
nuxt-swiper
is developed by @cpreston321.
MIT License © 2022 cpreston321
cpreston321 - @cpreston321
Also, if you like my work, please feel free to buy me a coffee ☕️