/nuxt-swiper

Swiper.js for Nuxt 3

Primary LanguageTypeScriptMIT LicenseMIT

Cover Image

nuxt-swiper

Swiper.js built for Nuxt 3

CI Version Downloads MIT

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.

  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 ☕️

Logo