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
• 🪄 Typescript Support
• ✨ Auto imports enabled
• ✨ Just works out of the box like magic ✨

StackBlitz Demo

Just want to try it out ? Checkout the demo below.

Install

1# npm
2npm install nuxt-swiper
3
4# yarn
5yarn add nuxt-swiper
6
7#pnpm
8pnpm add nuxt-swiper

Setup

1// nuxt.config.ts
2import { defineNuxtModule } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-swiper']
6  swiper: {
7    // Swiper options
8    //----------------------
9    // prefix: 'Swiper',
10    // styleLang: 'css',
11    // modules: ['navigation', 'pagination'], // all modules are imported by default
12  }
13})

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	❌ - Taken out Swiper ^9.0.0
SwiperMousewheel	✅
SwiperManipulation	✅
SwiperNavigation	✅
SwiperPagination	✅
SwiperParallax	✅
SwiperScrollbar	✅
SwiperThumbs	✅
SwiperVirtual	✅
SwiperZoom	✅

1<template>
2  <Swiper
3    :modules="[SwiperAutoplay, SwiperEffectCreative]"
4    :slides-per-view="1"
5    :loop="true"
6    :effect="'creative'"
7    :autoplay="{
8      delay: 8000,
9      disableOnInteraction: true,
10    }"
11    :creative-effect="{
12      prev: {
13        shadow: false,
14        translate: ['-20%', 0, -1],
15      },
16      next: {
17        translate: ['100%', 0, 0],
18      },
19    }"
20  >
21    <SwiperSlide v-for="slide in 10" :key="slide">
22      <strong>{{ slide }}</strong>
23    </SwiperSlide>
24  </Swiper>
25</template>

Module Options

1type SwiperStyleLangType = 'css' | 'scss'
2type SwiperModulesType =
3  | 'a11y'
4  | 'autoplay'
5  | 'controller'
6  | 'free-mode'
7  | 'grid'
8  | 'hash-navigation'
9  | 'history'
10  | 'keyboard'
11  | 'manipulation'
12  | 'mousewheel'
13  | 'navigation'
14  | 'pagination'
15  | 'parallax'
16  | 'scrollbar'
17  | 'thumbs'
18  | 'virtual'
19  | 'zoom'
20  | `effect-${SwiperInterface['effect']}`
21
22export interface SwiperModuleOptions {
23  /**
24   * The prefix to use for the Swiper Modules to import.
25   * This is useful for importing only the modules you need and
26   * avoiding importing the entire Swiper library.
27   *
28   * e.g. `${prefix}Autoplay` -> `SwiperAutoplay`
29   *
30   * @default 'Swiper' - import components from 'swiper/vue' by default
31   */
32  prefix?: string
33
34  /**
35   * Which type of lang of styles to import
36   *
37   * @default 'css' - imports css from 'swiper/css' by default
38   */
39  styleLang?: SwiperStyleLangType
40
41  /**
42   * Swiper modules to import
43   *
44   * '*' - imports all modules
45   * '['thumbs', 'lazy']' - imports only specified modules
46   *
47   * @default '*' - imports all modules by default
48   */
49  modules?: '*' | SwiperModulesType[]
50}
51
52export {}
53

💻 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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. 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 ☕️

🔥 Contributors