nuxt-swiper
Swiper.js built for Nuxt 3
Fully featured Swiper.js module for Nuxt 3. Checkout Swiper.js for more information about how to use.
Features
-
🚀 Nuxt 3 Support - Open Source
- Full Typescript Support
-
✨ Auto import Swiper.js modules + styles. -
✨ Just works out of the box.
Install
# npm
npm install nuxt-swiper
# yarn
yarn add nuxt-swiper
#pnpm
pnpm add nuxt-swiper
Setup
// 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
}]]
})
Usage
| 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>
Module Options
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[] | '*'
}
💻
Development
- Clone this repository
- Enable Corepack using
corepack enable - Install dependencies using
pnpm install --shamefully-hoist - Open playground with
pnpm dev
➕
Contributing
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
Credits
swiper is developed by @nolimits4web. nuxt-swiper is developed by @cpreston321.
📜
License
MIT License © 2022 cpreston321
📧
Contact
cpreston321 - @cpreston321
Also, if you like my work, please feel free to buy me a coffee
4 May 3, 2022
14 Jan 3, 2023
180 Jan 5, 2023
26 Nov 21, 2022
19 Dec 2, 2022
7 Sep 5, 2022
6 Aug 18, 2022
7 Dec 7, 2022
28 Dec 6, 2022
19 Dec 19, 2022
3 May 18, 2022
14 Sep 7, 2022
76 Dec 26, 2022