Installation

Getting Nuxt Splide running takes one step: add the module. Choosing a theme is optional — it defaults to default.

1. Add the module

The quickest way is the Nuxt CLI, which installs the package and adds it to your nuxt.config for you:

npx nuxi@latest module add nuxt-splide

If you’d rather install it by hand, add the package with your preferred package manager:

# pnpm
pnpm add -D nuxt-splide

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

# yarn
yarn add --dev nuxt-splide

Then add 'nuxt-splide' to the modules array in nuxt.config.ts:

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

Set a theme under the splide key. The module loads the matching stylesheet automatically — you never import CSS yourself:

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

Theme	Description
`default`	Default theme (the default if you set nothing).
`skyblue`	Light blue theme.
`sea-green`	Green theme.
`core`	Unstyled — only the essential layout CSS, so you can style it entirely yourself.

See Configuration for more on themes and the unstyled core option.

Once the module is registered, three components are auto-imported across your app — no import statement and no manual component registration:

<Splide> — the slider root, which takes the options prop.
<SplideSlide> — wraps each slide.
<SplideTrack> — an optional explicit track element, for custom arrow/pagination placement (see Usage).