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

Install

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

Setup

1// nuxt.config.ts
2import { defineNuxtModule } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt3-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

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