Unstyled (Core Theme)

The core theme loads only the structural CSS Splide needs to lay out and animate slides — no opinionated arrow or pagination styling. It’s the right choice when you want the slider to match your own design system.

1. Select the core theme

nuxt.config.ts

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

With core, the slider works perfectly — it just looks plain until you style it.

2. Style the slider

Splide exposes stable BEM-style class names you can target. The slider root is .splide, the arrows are .splide__arrow (with --prev / --next modifiers), and the pagination dots are .splide__pagination__page.

pages/index.vue

<template>
  <Splide :options="{ type: 'loop', perPage: 1 }" aria-label="Styled slider">
    <SplideSlide>
      <img src="/img-1.jpg" alt="Slide 1">
    </SplideSlide>
    <SplideSlide>
      <img src="/img-2.jpg" alt="Slide 2">
    </SplideSlide>
    <SplideSlide>
      <img src="/img-3.jpg" alt="Slide 3">
    </SplideSlide>
  </Splide>
</template>

<style scoped>
:deep(.splide__arrow) {
  background: #111827;
  opacity: 1;
}

:deep(.splide__arrow svg) {
  fill: #ffffff;
}

:deep(.splide__pagination__page) {
  background: #d1d5db;
}

:deep(.splide__pagination__page.is-active) {
  background: #111827;
  transform: scale(1.2);
}

img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
</style>

Caution

Splide injects its arrows and pagination as children of <Splide>, so in a component with <style scoped> you need Vue’s :deep() selector (shown above) to reach them. Without :deep(), scoped styles won’t apply to the slider’s internal elements.

Placing controls yourself

If you want the arrows or pagination somewhere specific in the markup, combine the core theme with the custom-track structure from Usage:

<template>
  <Splide :has-track="false" :options="{ type: 'loop' }" aria-label="Custom layout">
    <SplideTrack>
      <SplideSlide v-for="n in 3" :key="n">
        <img :src="`/img-${n}.jpg`" :alt="`Image ${n}`">
      </SplideSlide>
    </SplideTrack>

    <div class="splide__arrows my-arrows">
      <button class="splide__arrow splide__arrow--prev">Prev</button>
      <button class="splide__arrow splide__arrow--next">Next</button>
    </div>
  </Splide>
</template>

Tip

The bundled themes (default, skyblue, sea-green) are built on top of this same core CSS. Start with core only when you intend to style the controls yourself — otherwise a bundled theme saves you the work.

Next steps

• Configuration — the full list of themes.
• Usage — the options prop, events, and custom track structure.