Nuxt Splide

Splide is a lightweight, dependency-free slider and carousel that doesn’t degrade Accessibility, Best Practices, or SEO scores. Nuxt Splide wires its official Vue 3 integration into Nuxt for you.

It’s a thin wrapper around @splidejs/vue-splide: add the module, pick a theme, and the <Splide>, <SplideSlide>, and <SplideTrack> components are auto-imported everywhere — no plugin wiring, no manual CSS import, and the right stylesheet is loaded automatically based on your chosen theme.

Key features

No Lighthouse / PageSpeed errors — Splide is built to keep Accessibility, Best Practices, and SEO scores intact.
Lightweight, zero-dependency — the underlying Splide core has no runtime dependencies.
Auto-imported components — <Splide>, <SplideSlide>, and <SplideTrack> are registered for you; no imports needed.
Themes or unstyled — choose a bundled theme (default, skyblue, sea-green) or go core for fully unstyled markup you style yourself.
RTL and vertical — right-to-left and vertical sliders are supported out of the box.
Flexible and extensible — the full Splide options object and event set are available on the component.
Nuxt 3 + Nuxt 4 — a single install supports both major versions.

A 30-second taste

Install the module:

npx nuxi@latest module add nuxt-splide

Pick a theme in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-splide'],
  splide: {
    theme: 'default',
  },
})

Then use the components anywhere — they’re auto-imported:

<template>
  <Splide :options="{ rewind: true, perPage: 1 }" aria-label="My slider">
    <SplideSlide>
      <img src="/image-1.jpg" alt="Slide 1">
    </SplideSlide>
    <SplideSlide>
      <img src="/image-2.jpg" alt="Slide 2">
    </SplideSlide>
  </Splide>
</template>

That’s the whole thing. The slider’s behavior is driven entirely by the options object — every Splide option is available.

Compatibility

	Supported
Nuxt Splide	1.x
Nuxt	3.x and 4.x
Vue	3

Where to next

Installation — install the module and pick a theme.
Usage — the <Splide> / <SplideSlide> / <SplideTrack> components, options, and events.
Configuration — the splide config key and the available themes.