nuxt-splide
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

Nuxt Splide

Nuxt Splide - NPM Package Nuxt Splide - NPM Package Downloads Nuxt Splide License Nuxt Splide - Nuxt

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

Nuxt Splide Performance


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

  1. 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
  2. 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
  3. 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

Package Sidebar

Install

npm i nuxt-splide

Weekly Downloads

63

Version

1.1.1

License

MIT

Unpacked Size

10.8 kB

Total Files

12

Last publish

Collaborators

  • modbender