https://github.com/emanuele-em/nuxt-swipe

🚀 📱 The Nuxt-Swipe plugin allows you to easily add swipe gesture support to your Nuxt3 projects. With this plugin, you can use swipe gestures to navigate between pages, trigger actions, and much more
https://github.com/emanuele-em/nuxt-swipe

gesture gesture-recognition lightweight nuxt nuxt3 swipe vue

Last synced: 3 months ago
JSON representation

🚀 📱 The Nuxt-Swipe plugin allows you to easily add swipe gesture support to your Nuxt3 projects. With this plugin, you can use swipe gestures to navigate between pages, trigger actions, and much more

• Host: GitHub
• URL: https://github.com/emanuele-em/nuxt-swipe
• Owner: emanuele-em
• Created: 2022-12-09T11:09:40.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-05T08:43:51.000Z (6 months ago)
• Last Synced: 2024-10-14T21:09:47.207Z (3 months ago)
• Topics: gesture, gesture-recognition, lightweight, nuxt, nuxt3, swipe, vue
• Language: TypeScript
• Homepage:
• Size: 580 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Nuxt-Swipe

This Nuxt 3 module allows you to easily add swipe gestures to your Vue 3 App. With just a few lines of code, you can enable swiping on your website or web application.

## Installation

To add this module to your Nuxt.js project, run the following command:

```bash

  npm i @emanuele-em/nuxt-swipe

```

Then, add nuxt-swipe to the modules section of your nuxt.config.js file:

```javascript

  export default {

    modules: [

        '@emanuele-em/nuxt-swipe'

    ]

  }

```    

## Usage

To use the module, simply add `` component, it will be the component that will intercept the _swipe_ gesture

For example:

```javascript

    

        

    

```

The module will create a plugin that will emit the `Swipe` event only after some checks to make sure that the gesture is really a swipe gesture.

You can handle that event in the script section of your component, **remember to import nuxtApp**:

```html

import { useNuxtApp } from '#app'

const nuxtApp = useNuxtApp()

nuxtApp.$bus.$on('swipe', (direction) => {

    switch (direction) {

        case 'left': 

            // swiped left, do things

            break;

        case 'right':

            // swiped right, do things

            break;

        case 'up':

            // swiped up, do things

            break;

        case 'down':

            // swiped down, do things

            break;

        default:

            break;

    }

})

```

## Examples

Swipe navigation with `Swipe` component as Default Layout

_layouts/default.vue_

```javascript

    

        

    

  

import { useNuxtApp, useRoute, navigateTo } from '#app'

const nuxtApp = useNuxtApp()

const routes = ['/', '/about']

nuxtApp.$bus.$on('swipe', (direction) => {

    let indexCurrentRoute = routes.indexOf(useRoute().path)

    if (direction === 'left' && routes[indexCurrentRoute + 1]) {

        indexCurrentRoute += 1

    }

    if (direction === 'right' && routes[indexCurrentRoute - 1]) {

        indexCurrentRoute -= 1

    }

    return navigateTo(routes[indexCurrentRoute])

})

  

```

## Demo

[demo-nuxt-swipe.pages.dev](https://demo-nuxt-swipe.pages.dev/)

## Roadmap

- Typescript correct syntax

- Swipe handling during the `touchEvent` and not just at `touchend` 

## License

[MIT](https://choosealicense.com/licenses/mit/)