nuxt3-swiper

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

# 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