nuxt3-swiper
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

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

Logo

Contributors

Package Sidebar

Install

npm i nuxt3-swiper

Weekly Downloads

11

Version

1.2.1

License

MIT

Unpacked Size

17 kB

Total Files

7

Last publish

Collaborators

  • lxf2513