vue snap

🌿 Modern and lightweight Vue 3 Carousel powered by CSS Scroll Snap.

bartdominiak
164
17
Vue

vue-snap

🌿 Modern, lightweight Vue 3 Carousel powered by CSS Scroll Snap.

vue-snap logo

npm version
npm bundle size
license

Table of Contents

About

The idea behind this plugin is to create a fully responsive and well-optimized carousel. We’ve used modern CSS features like Scroll Snapping, which allows the carousel wrapper to lock onto specific slides or positions after the user finishes scrolling. This approach helps us minimize the library size by including only the essential parts, and it avoids heavy JavaScript computations or CSS hacks.

Examples/Stories

  • 📕 Example

  • 📺 Props/Events/Slots

  • Lightweight – Only 4KB, fast and efficient.

  • No calculations or heavy logic – performance-first approach

  • Fully responsive – most customization is handled via CSS (e.g. number of visible slides)

  • ESM bundle with tree-shaking – dead code is automatically eliminated

  • SSR support – works with frameworks like Nuxt.js 🎉 More here

  • Vue 3 support 🎉 More here

  • Modern browser support – compatible with all common browsers More here

Installation & Usage

Installation

  pnpm add vue-snap
  yarn add vue-snap
  npm install vue-snap

Usage - Globally

import { createApp } from 'vue'
import App from './App.vue'

import VueSnap from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

const myApp = createApp(App)

myApp.use(VueSnap)
myApp.mount('#app')

Usage - Locally

import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

export default {
  components: {
    Carousel,
    Slide
  }
}

Examples usage

Check out examples folder for more details or documentation

Contribution

If you have a feature request then feel free to start a new issue, or just grab existing one.

License

MIT