nuxt-splide

Nuxt Splide

Performance first slider/carousel you have always been waiting after Owl Carousel.
The Splide slider does not degrade Accessibility, Best Practices and SEO 🎉

• 🧪  Examples
• 📖  Splide Documentation
• 🏀 Online playground
• ✨  Release Notes

Features

• 🔆  No Lighthouse/PageSpeed Errors
• ⚡  Lightweight, No dependencies
• 🕶️  Unstyled or Styled with themes
• ⚔️  Compatible with modern browsers
• ➡️  RTL and vertical direction
• 🗼  Flexible and Extensible

Quick Setup

• Add nuxt-splide dependency to your project

  # Using pnpm
  pnpm add -D nuxt-splide
  
  # Using yarn
  yarn add --dev nuxt-splide
  
  # Using npm
  npm install --save-dev nuxt-splide
  

• Add nuxt-splide to the modules section of nuxt.config.ts

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

  Theme	Description
  default	default theme
  skyblue	light blue theme
  sea-green	green theme
  core	unstyled

• Next add Splide and SplideSlide components to your page.

  <template>
    <Splide
      :options="{ perPage: 3, perMove: 1, type: 'loop' }"
      aria-labelledby="My Favorite Images"
    >
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1460176449511-ff5fc8e64c35?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Sample 1"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1561424412-6c2125ecb1cc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Sample 2"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1507160874687-6fe86a78b22e?q=80&w=1959&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Sample 3"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://plus.unsplash.com/premium_photo-1664478194406-4a1f2915f685?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Sample 4"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1584220844836-4071bc6cc793?q=80&w=1928&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Sample 5"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1513889961551-628c1e5e2ee9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Sample 6"
        />
      </SplideSlide>
    </Splide>
  </template>
  
  <script setup></script>
  
  <style>
  img {
    width: 100%;
    aspect-ratio: 4/3;
  }
  </style>
  

  For all options check Official Documentation.

That's it! You can now use Nuxt Splide in your Nuxt app ✨

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
npm run release