nuxt3-swiper

<h1 align="center">nuxt3-swiper</h1> <p align="center">Swiper.js built for Nuxt 3 </p> > Fully featured Swiper.js module for Nuxt 3. > Checkout [Swiper.js](https://swiperjs.com/) for more information about how to use. ## Features - [Nuxt 3](https://nuxt.com) Support - Typescript Support - Auto imports enabled - Just works out of the box like magic ## Install ```bash # npm npm install nuxt3-swiper # yarn yarn add nuxt3-swiper #pnpm pnpm add nuxt3-swiper ``` ## Setup ```ts // 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](https://swiperjs.com/swiper-api#lazy-loading)| | `SwiperMousewheel` | ✅ | | `SwiperManipulation` | ✅ | | `SwiperNavigation` | ✅ | | `SwiperPagination` | ✅ | | `SwiperParallax` | ✅ | | `SwiperScrollbar` | ✅ | | `SwiperThumbs` | ✅ | | `SwiperVirtual` | ✅ | | `SwiperZoom` | ✅ | ```vue <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 ```ts 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](https://github.com/nodejs/corepack) using `corepack enable` - Install dependencies using `pnpm install --shamefully-hoist` - Open playground with `pnpm dev` ## Credits [`swiper`](https://swiperjs.com/) is developed by [@nolimits4web](https://github.com/nolimits4web). [`nuxt-swiper`](#nuxt-swiper) is developed by [@cpreston321](https://github.com/cpreston321). ## License [MIT](./LICENSE) License © 2022 [cpreston321](https://github.com/cpreston321) # Contact cpreston321 - [@cpreston321](https://twitter.com/cpreston321) Also, if you like my work, please feel free to [buy me a coffee](https://www.buymeacoffee.com/cpreston321) ☕️ <a href="https://www.buymeacoffee.com/cpreston321" target="_blank"> <img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Logo"> </a> # Contributors <a href="https://github.com/cpreston321/nuxt-swiper/graphs/contributors"> <img src="https://contrib.rocks/image?repo=cpreston321/nuxt-swiper" /> </a>