Skip to content
Modbender

Basic

The smallest complete setup: register the module, then render a <Splide> with a few slides.

1. Register the module

Section titled “1. Register the module”
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-splide'],
  splide: {
    theme: 'default',
  },
})

The theme is optional — leave the splide key off entirely and you get the default theme.

2. Render a slider

Section titled “2. Render a slider”
pages/index.vue
<template>
  <Splide
    :options="{ type: 'loop', perPage: 3, perMove: 1, gap: '1rem' }"
    aria-label="My favorite images"
  >
    <SplideSlide>
      <img src="https://images.unsplash.com/photo-1460176449511-ff5fc8e64c35" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="https://images.unsplash.com/photo-1561424412-6c2125ecb1cc" alt="Sample 2">
    </SplideSlide>
    <SplideSlide>
      <img src="https://images.unsplash.com/photo-1507160874687-6fe86a78b22e" alt="Sample 3">
    </SplideSlide>
    <SplideSlide>
      <img src="https://images.unsplash.com/photo-1584220844836-4071bc6cc793" alt="Sample 4">
    </SplideSlide>
  </Splide>
</template>


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

That’s it — <Splide> and <SplideSlide> are auto-imported, so there are no import statements. You get a three-up looping carousel with arrows and pagination from the default theme.

Next steps

Section titled “Next steps”