All Projects → davidgaroro → Vuetify Swipeout

davidgaroro / Vuetify Swipeout

Licence: mit
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vuetify Swipeout

Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (+36.75%)
Mutual labels:  vue-cli, material-design, material, vuetify, vuejs2, pwa, vue2
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+25129.91%)
Mutual labels:  mobile, swipe, slider, touch, swiper, touch-events
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+10217.95%)
Mutual labels:  swipe, slider, swiper, vuejs2, vue2
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+17070.94%)
Mutual labels:  material-design, material, vuejs2, pwa, vue2
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+1648.72%)
Mutual labels:  mobile, swipe, slider, touch
Keen Slider
The HTML touch slider carousel with the most native feeling
Stars: ✭ 3,097 (+2547.01%)
Mutual labels:  mobile, slider, touch, touch-events
Vuetify Material Dashboard
Vuetify Material Dashboard - Open Source Material Design Admin
Stars: ✭ 1,023 (+774.36%)
Mutual labels:  vue-cli, material, vuetify, vuejs2
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+14053.85%)
Mutual labels:  material-design, mobile, material, touch
Vue Ts Daily
Stars: ✭ 735 (+528.21%)
Mutual labels:  vue-cli, vuejs2, pwa
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (+569.23%)
Mutual labels:  material-design, material, slider
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+28177.78%)
Mutual labels:  material-design, material, vuetify
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+39047.01%)
Mutual labels:  material-design, mobile, pwa
Vue Crud
Vue.js based REST-ful CRUD system
Stars: ✭ 629 (+437.61%)
Mutual labels:  material-design, vuetify, vuejs2
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (+582.05%)
Mutual labels:  material-design, material, pwa
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+324.79%)
Mutual labels:  vue-cli, vuejs2, vue2
Vuetify Admin Dashboard
A Crud Admin panel made from Vue js and Vuetify
Stars: ✭ 481 (+311.11%)
Mutual labels:  vue-cli, vuetify, vuejs2
Quasar Awesome
🎉 A list of awesome things related to Quasar
Stars: ✭ 995 (+750.43%)
Mutual labels:  material-design, material, vue2
Mdi Vue
Material design icons for vue.js
Stars: ✭ 53 (-54.7%)
Mutual labels:  material-design, vuejs2, vue2
Generator Ngx Rocket
🚀 Extensible Angular 11+ enterprise-grade project generator
Stars: ✭ 1,329 (+1035.9%)
Mutual labels:  mobile, material, pwa
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-27.35%)
Mutual labels:  mobile, swipe, touch


This project is a swipe out example built with Vue, Vuetify and Swiper.

Live Demo


  • Vue CLI 3 + Webpack + vue-loader for single file Vue components
    • Hot-reload in development
    • Lint-on-save with ESLint (Standard)
    • Stylus CSS preprocessor
  • Vuetify a-la-carte (reduce project's size in production)
  • Progressive Web App
    • App manifest
    • Service worker
    • Workbox options - Cache Google Fonts
    • 100/100 Lighthouse score

Built With


Name Description
swiper ️Most Modern Mobile Touch Slider 👆
vue Progressive JavaScript Framework 🖖
vue-cli-3 ️Standard Tooling for Vue.js Development 🛠️
vuetify ️Material Component Framework for Vue.js 📚

Development Dependencies

Name Description
stylus-loader CSS preprocessor for webpack 🎨
vue/cli-plugin-babel Compiler for next generation JavaScript 🐠
vue/cli-plugin-eslint Pluggable JavaScript linter ✍️
vue/cli-plugin-pwa JavaScript Library for adding support to PWA 📱

How To Use Swiper with Vuetify

For information on how to use Swiper, visit the official documentation

Install Swiper

npm install swiper --save

Add v-list component

<!-- App.vue -->
    <template v-for="(item, index) in items">

import CustomComponent from '@/components/CustomComponent.vue'
export  default {
  components: {
    'custom-component': CustomComponent
  methods: {
    transitionEnd () {
      // Callback from SwipeoutItem after transition

Import and configure Swiper in the custom component

<!-- CustomComponent.vue -->
  <div :id="id" class="swiper-container">
    <div class="swiper-wrapper">
      <v-list-tile class="swiper-slide error"></v-list-tile>
      <v-list-tile class="swiper-slide">
        <!-- custom content here -->

import 'swiper/dist/css/swiper.min.css'
import { Swiper } from 'swiper/dist/js/swiper.esm.js'

export default {
  props: ['id'],
  mounted () {
    const self = this
    const el = '#' +

    // Initialize Swiper
    const swiper = new Swiper(el, {
      initialSlide: 1,
      resistanceRatio: 0,
      speed: 150

    // Event will be fired after transition
    swiper.on('transitionEnd', function () {
      if (this.activeIndex === 0) {
        // Destroy slider instance and detach all events listeners

Project Installation & Setup

Clone repository

git clone
cd vuetify-swipeout

Install dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint




MIT © davidgaroro

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].