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

# npm
npm install nuxt3-swiper

# yarn
yarn add nuxt3-swiper

#pnpm
pnpm add nuxt3-swiper

Setup

// nuxt.config.ts
import { defineNuxtModule } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt3-swiper']
  swiper: {
    // Swiper options
    //----------------------
    // prefix: 'Swiper',
    // styleLang: 'css',
    // modules: ['navigation', 'pagination'], // all modules are imported by default
  }
})

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 | ✅ |

<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 SwiperStyleLangType = 'css' | 'scss'
type SwiperModulesType =
  | 'a11y'
  | 'autoplay'
  | 'controller'
  | 'free-mode'
  | 'grid'
  | 'hash-navigation'
  | 'history'
  | 'keyboard'
  | 'manipulation'
  | 'mousewheel'
  | 'navigation'
  | 'pagination'
  | 'parallax'
  | 'scrollbar'
  | 'thumbs'
  | 'virtual'
  | 'zoom'
  | `effect-${SwiperInterface['effect']}`

export 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' - import components from 'swiper/vue' by default
   */
  prefix?: string

  /**
   * Which type of lang of styles to import
   *
   * @default 'css' - imports css from 'swiper/css' by default
   */
  styleLang?: SwiperStyleLangType

  /**
   * Swiper modules to import
   *
   * '*' - imports all modules
   * '['thumbs', 'lazy']' - imports only specified modules
   *
   * @default '*' - imports all modules by default
   */
  modules?: '*' | SwiperModulesType[]
}

export {}

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