Best, lightweight Keen Slider for best web performance
npm install nuxt-keen-slider
Easy, lightweight slider or carousel creations.
-----
- ๐งช Examples
- โจ Release Notes
- ๐ Online playground
- โ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
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`
`bashInstall dependencies
pnpm install