https://github.com/modbender/nuxt-splide
Nuxt Splide Plugin - Splide is lightweight slider/carousel, no dependencies, no lighthouse errors
https://github.com/modbender/nuxt-splide
Last synced: about 1 year ago
JSON representation
Nuxt Splide Plugin - Splide is lightweight slider/carousel, no dependencies, no lighthouse errors
- Host: GitHub
- URL: https://github.com/modbender/nuxt-splide
- Owner: modbender
- License: mit
- Created: 2024-03-07T06:53:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T14:37:47.000Z (about 2 years ago)
- Last Synced: 2025-04-09T23:51:01.300Z (about 1 year ago)
- Language: TypeScript
- Size: 102 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
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](https://splidejs.github.io/vue-splide/)
- [📖 Splide Documentation](https://splidejs.com/integration/vue-splide/)
- [🏀 Online playground](https://stackblitz.com/github/modbender/nuxt-splide?file=playground%2Fapp.vue)
- [✨ Release Notes](/CHANGELOG.md)
## 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
img {
width: 100%;
aspect-ratio: 4/3;
}
```
For all `options` check [Official Documentation](https://splidejs.com/guides/options/#options).
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
```