Nuxt-swiper NPM

Nuxt Swiper

!IMPORTANT Nuxt Swiper utilizes Swiper.js as its foundation using it's web components. Please ensure that you read the Swiper.js documentation before utilizing this module and reporting any issues that are not directly related to Nuxt Swiper. If there is an underlying bug, please submit an issue to the Swiper.js repository.
!NOTE If you want to learn how to use web components in Vue.js please refer to the docs here: Vue.js Web Components

Features

📖 Open Source
🪄 TypeScript Support
✅ Auto Imports Enabled
✨ Just Works Out of the Box like Magic

Setup

Try it online

Step 1: Install and add to Nuxt

# npm
npm install nuxt-swiper

# yarn
yarn add nuxt-swiper

#pnpm
pnpm add nuxt-swiper

#bun
bun add nuxt-swiper

export default defineNuxtConfig({
  modules: ['nuxt-swiper'],
})

Usage

Swiper Components (WebComponent)
`<swiper-container/>`
`<swiper-slide />`

Module Options

export interface ModuleOptions {
  /**
   * Enable custom Swiper composables to help you access Swiper instance.
   * @example ```ts
   * // Access Swiper instance
   * const swiperRef = ref<null>(null)
   * const swiper = useSwiper(swiperRef)
   *
   * const next = () => swiper.next()
   * ```
   * @default true
   */
  enableComposables?: boolean
}

Basic Usuage

<script setup lang="ts">
// Create 10 slides
const containerRef = ref(null)
const slides = ref(Array.from({ length: 10 }))

const swiper = useSwiper(containerRef)

onMounted(() => {
  // Access Swiper instance
  // Read more about Swiper instance: https://swiperjs.com/swiper-api#methods--properties
  console.log(swiper.instance)
})
</script>

<template>
  <swiper-container ref="containerRef" :loop="true">
    <swiper-slide
      v-for="(slide, idx) in slides"
      :key="idx"
      style="background-color: rgb(32, 233, 70); color: white;"
    >
      Slide {{ idx + 1 }}
    </swiper-slide>
  </swiper-container>
  <!-- Go back one slide -->
  <button @click="swiper.prev()">
    Prev
  </button>
  <!-- Go forward one slide -->
  <button @click="swiper.next()">
    Next
  </button>
</template>

<style lang="css">
swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  height: 20vh;
  font-size: 4rem;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}
</style>

💻 Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint