Nuxt Keen Slider

Easy, lightweight slider or carousel creations.

-----
- 🧪  Examples
- ✨  Release Notes
- 🏀  Online playground

Features

- ✊Great Performance: Best Lighthouse Perfomance, Lowest CLS
- ⚡Lightweight: No dependencies, Fast loading
- 📱Mobile First: Supports multi touch and is fully responsive
- ⚔️Compatible: Works in all common browsers, including >= IE 10 and React Native
- 🗼Extensible: Rich but simple API

Quick Setup

1. Add nuxt-keen-slider dependency to your project

``bash
# Using pnpm
pnpm add -D nuxt-keen-slider

# Using yarn
yarn add --dev nuxt-keen-slider

# Using npm
npm install --save-dev nuxt-keen-slider
`

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

`js
export default defineNuxtConfig({
modules: [
'nuxt-keen-slider'
]
})
`

3. Create a component with name of your wish, ex. KeenSlider.vue

`xml



`

4. Add the component anywhere you want

`xml

`

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

-----

> [!NOTE] OPTIONAL
> I have seen absolute 0 CLS, maximum performance by wrapping the Slider component with ClientOnly.
> Seems to stop working if the component is created with .client.vue extension.
> You could try the same if you are having Lighthouse/PageSpeed score issues and you are aiming for maximum performance.
>
> Remember, this could not work depending on use case.

`xml

`

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
``