Swiper.js for Nuxt 3

Overview

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
You might also like...

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jul 1, 2022

🌉 Experience Nuxt 3 features on existing Nuxt 2 projects

🌉 Nuxt Bridge Experience Nuxt 3 features on existing Nuxt 2 projects. Bridge is a forward-compatibility layer that allows you to experience many of t

Sep 18, 2022

Localtunnel module for Nuxt to allow remote/external access to your Nuxt development server.

Nuxt Localtunnel A Nuxt module for automatically running localtunnnel to externally expose your development instance of Nuxt to the outside world. All

Sep 7, 2022

CSS optimization using critters for Nuxt

@nuxtjs/critters CSS optimization using critters for Nuxt Features Zero-configuration required Enables CSS Extraction Critical CSS automatically injec

Sep 19, 2022

🕋Assets Compression module for Nuxt 3

🕋Assets Compression module for Nuxt 3

@nuxt-modules/compression Assets Compression module for Nuxt 3 ✨ Release Notes 📖 Read the documentation Features Nuxt 3 ready Assets Compression usin

Sep 4, 2022

"Nuxt-like" routing in Quasar projects

Quasar App Extension auto-routing "Nuxt-like" routing in Quasar projects Install quasar ext add auto-routing Quasar CLI will retrieve it from the NPM

Sep 19, 2022

Tools for Dump NUXT JS Environment Config Through Browser Window Object

Tools for Dump NUXT JS Environment Config Through Browser Window Object

Introduction Nuxt JS is an open source javascript framework making web development simple and powerful. This tool is used to get environment configura

Sep 5, 2022

Authenticated server-side rendering with Nuxt 3 and Firebase 9

Authenticated server-side rendering with Nuxt 3 and Firebase 9.

Sep 20, 2022

Partytown integration for Nuxt

@nuxtjs/partytown Partytown integration for Nuxt Features 👌 Zero-config required 🔥 Relocates resource intensive scripts into a web worker ⚡️ Speeds

Sep 20, 2022

⚡️ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Sep 23, 2022

A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❤️‍🔥.

Aug 18, 2022

Nuxt.js module to use Unleash toggle feature services

nuxt-unleash Nuxt.js module to use Unleash toggle feature services 📖 Release Notes Features Use $unleash to access and handle your Unleash feature fl

Sep 13, 2022

Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 📋

nuxt-social-tags Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 ✨ Release Notes 📖 Read the documentation Features Nuxt3 ready Composables

Aug 27, 2022

🌬 Opiniated Nuxt 3 Starter — visual deployment indicator & more

Nuxt 3 Minimal Starter I recommend to look at the documentation. Key Features 🍍 State management with Pinia 📐 Prettier & ESLint 🔢 Pre-configured VS

Aug 19, 2022

A tiny Nuxt.js module for WebSocket interactions

@deepsource/nuxt-websocket A tiny Nuxt.js module for WebSocket interactions. This module is only compatible with Nuxt v2 at the moment. Setup Add @dee

Aug 4, 2022

Easily connect your Nuxt 3 application with LogSnag 📰

Easily connect your Nuxt 3 application with LogSnag 📰

Nuxt LogSnag 📰 LogSnag integration for Nuxt 3 ✨ Release Notes Features Nuxt 3 ready Easy integration Handy composables TypeScript support Setup Insta

Apr 28, 2022

Nuxt 3 starter with Algolia, Storyblok, and Indexer

Nuxt 3 with Storyblok CMS and Algolia Search (incl. automatic indexing) This is a demo repository for an article in Dev.to. We recommend to look at th

May 24, 2022
Comments
Releases(v0.1.5)
Owner
Christian Preston
Software Engineer | Investor | Gamer | A Passion to helping Open Source Projects
Christian Preston
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
🌉 Experience Nuxt 3 features on existing Nuxt 2 projects

?? Nuxt Bridge Experience Nuxt 3 features on existing Nuxt 2 projects. Bridge is a forward-compatibility layer that allows you to experience many of t

Nuxt 150 Sep 18, 2022
🕋Assets Compression module for Nuxt 3

@nuxt-modules/compression Assets Compression module for Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Assets Compression usin

Nuxt Modules 23 Sep 4, 2022
"Nuxt-like" routing in Quasar projects

Quasar App Extension auto-routing "Nuxt-like" routing in Quasar projects Install quasar ext add auto-routing Quasar CLI will retrieve it from the NPM

Luke Diebold 18 Sep 19, 2022
Tools for Dump NUXT JS Environment Config Through Browser Window Object

Introduction Nuxt JS is an open source javascript framework making web development simple and powerful. This tool is used to get environment configura

Agus Setya R 7 Sep 5, 2022
A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❤️‍??.

wellá 6 Aug 18, 2022
🌬 Opiniated Nuxt 3 Starter — visual deployment indicator & more

Nuxt 3 Minimal Starter I recommend to look at the documentation. Key Features ?? State management with Pinia ?? Prettier & ESLint ?? Pre-configured VS

Johann Schopplich 7 Aug 19, 2022
Toolkit for authoring Nuxt Themes.

@nuxt-themes/config Toolkit for authoring Nuxt Themes. Features ✨ Lets you create a theme from any Nuxt project ?? Handles theme.config.ts file ?? Off

Nuxt Themes 29 Sep 8, 2022
The best place to start your Nuxt Theme.

Nuxt Theme Starter Create Nuxt theme with this GitHub template. Setup Make sure to install the dependencies: # yarn yarn install # npm npm install #

Nuxt Themes 17 Sep 21, 2022