Nuxt Splide

Performance first slider/carousel you have always been waiting after Owl Carousel.

The Splide slider does not degrade Accessibility, Best Practices and SEO 🎉

-----
- 🧪  Examples
- 📖  Splide Documentation
- 🏀 Online playground
- ✨  Release Notes

Features

- 🔆  No Lighthouse/PageSpeed Errors
- ⚡  Lightweight, No dependencies
- 🕶️  Unstyled or Styled with themes
- ⚔️  Compatible with modern browsers
- ➡️  RTL and vertical direction
- 🗼  Flexible and Extensible

Quick Setup

1. Add nuxt-splide dependency to your project

``bash
# Using pnpm
pnpm add -D nuxt-splide

# Using yarn
yarn add --dev nuxt-splide

# Using npm
npm install --save-dev nuxt-splide
`

2. Add nuxt-splide to the modules section of nuxt.config.ts

`js
export default defineNuxtConfig({
modules: [
'nuxt-splide'
]
splide: {
theme: 'default'
}
})
`
| Theme | Description |
| --------- | :--------------: |
| default | default theme |
| skyblue | light blue theme |
| sea-green | green theme |
| core | unstyled |

3. Next add Splide and SplideSlide components to your page.

`xml



`
For all options check Official Documentation.

That's it! You can now use Nuxt Splide in your Nuxt app ✨

Development

`bash


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

Run Vitest

pnpm run test
pnpm run test:watch

Release new version

npm run release
``