Configuration

Module-level configuration lives under the splide key in nuxt.config.ts. The module has a single option — theme — which controls which stylesheet is loaded globally. Everything about an individual slider’s behavior (type, layout, autoplay, breakpoints) is set per-component via the options prop, not here.

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

Options reference

Option	Type	Default	Description
theme	'default' | 'skyblue' | 'sea-green' | 'core'	'default'	Which Splide stylesheet to load globally.

That’s the whole module surface. The theme you pick determines the bundled CSS the module injects for you, so you never import a Splide stylesheet by hand.

Themes

Theme	Description
default	The standard Splide theme — neutral arrows and pagination styling. Used if you set nothing.
skyblue	Light blue accent theme.
sea-green	Green accent theme.
core	Unstyled. Loads only the essential layout CSS Splide needs to function — no arrow/pagination styling — so you can style everything yourself.

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

Tip

Choose core when you want full control over the look. It still includes the structural CSS the slider needs to lay out and animate correctly — you only lose the opinionated arrow and pagination styles, which you then provide yourself.

Module config vs. per-slider options

These two are easy to mix up:

• splide in nuxt.config.ts — global, and currently only the theme. It decides which stylesheet is on the page.
• The options prop on <Splide> — per-slider, the full Splide options object. Two sliders on the same page can have completely different options.

// nuxt.config.ts — global theme
export default defineNuxtConfig({
  modules: ['nuxt-splide'],
  splide: {
    theme: 'core', // unstyled; style sliders yourself
  },
})

<!-- a component — per-slider behavior -->
<template>
  <Splide :options="{ type: 'loop', perPage: 2 }" aria-label="Looping pair">
    <SplideSlide v-for="n in 4" :key="n">
      <img :src="`/img-${n}.jpg`" :alt="`Image ${n}`">
    </SplideSlide>
  </Splide>
</template>

Caution

There is no global place to set slider behavior like perPage or autoplay — those are deliberately per-<Splide> via the options prop, so each slider is independent. The splide config key only selects the theme stylesheet.

Next steps

• Examples — runnable, end-to-end recipes.
• Usage — the options prop, events, and custom track structure.