Awesome iOS Style Swipe Actions for Vue.js

vue-swipe-actions component allows the user to perform some actions when the object is scrolled as you see it on iOS.

vue swipe actions, vue swipe cards, vue swipe button, vue awesome swiper, vue 3 touch events, mobile web swipe gesture, vuetify swipe

How to make use of it:


npm install --save vue-swipe-actions


import { SwipeList, SwipeOut } from 'vue-swipe-actions';

export default {
  components: {
import 'vue-swipe-actions/dist/vue-swipe-actions.css';


PropData TypeRequiredDefaultDescription
itemsArray* An array with your data
item-keyString idYour key for :key when the list is v-for-ed, if not found array index will be used
disabledBoolean falseif true items will be disabled, and text selection will be possible (on desktop). adds class swipeout--disabled
item-disabledFunction js () => falseA function that receives the item as a parameter and returns true case disabled or false if not
thresholdNumber 45With that property, you can fine-tune when actions are considered open
passive-listenersBoolean falseIt defines if the touch events should be registered as passive or not
revealedObject  An object represents the revealed status of the items, the key is the index and the value is either left or right, use it with the .sync modifier


swipeout:clickitemEmitted on a single click/tap on the item
activeBooleanEmitted when the user is opening/closing any of the actions


revealRightindex (number)Reveals the right actions on a given index
revealLeftindex (number)Reveals left actions on given index
closeActionsindex (number)?Closes actions on the given index, or all if no index given
isRevealedindex (number)Returns the revealed status on a given index, either false for closed, or left or right

ios style swipe actions for vue js, vue-swipe-actions Plugin/Github

See Demo And Download

Official Website(eCollect): Click Here

This superior jQuery/javascript plugin is developed by eCollect. For extra advanced usage, please go to the official website.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…