Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

nuxt-splide

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-splide

Splide is lightweight slider/carousel, no dependencies, no lighthouse errors

  • 1.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
142
increased by2.9%
Maintainers
1
Weekly downloads
 
Created
Source

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'
      }
    })
    
    ThemeDescription
    defaultdefault theme
    skybluelight blue theme
    sea-greengreen theme
    coreunstyled
  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

Keywords

FAQs

Package last updated on 03 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc