Awesome Open Source
Awesome Open Source

vuetify-swipeout

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


Live Demo

Features

  • 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

Dependencies

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-list>
    <template v-for="(item, index) in items">
      <custom-component
        :id="`item-${item}`"
        @transitionEnd="customFunction"
        ...
      />
      <v-divider...></v-divider>
    </template>
  </v-list>
  ...
</template>

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

Import and configure Swiper in the custom component

<!-- CustomComponent.vue -->
<template>
  <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 -->
      </v-list-tile>
    </div>
  </div>
</template>

<script>
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 = '#' + this.id

    // 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) {
        self.$emit('transitionEnd')
        // Destroy slider instance and detach all events listeners
        this.destroy()
      }
    })
  }
}
</script>

Project Installation & Setup

Clone repository

git clone https://github.com/davidgaroro/vuetify-swipeout.git
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

Donation

Donate

License

MIT © davidgaroro

Alternatives To Vuetify Swipeout
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,049,824
Cli (131,591
Vue (65,202
Vuejs (65,202
Vue2 (65,149
Vuejs2 (65,149
Material (16,052
Slider (4,881
Material Design (4,568
Stylus (2,745
Swipe (2,629
Vue Cli (1,718
Preprocessor (1,596
Vuetify (1,571
Swiper (886