{"id":16941566,"url":"https://github.com/emanuele-em/nuxt-swipe","last_synced_at":"2025-10-16T03:38:22.452Z","repository":{"id":64844187,"uuid":"576247303","full_name":"emanuele-em/nuxt-swipe","owner":"emanuele-em","description":"🚀 📱 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","archived":false,"fork":false,"pushed_at":"2024-08-05T08:43:51.000Z","size":594,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-21T12:55:26.959Z","etag":null,"topics":["gesture","gesture-recognition","lightweight","nuxt","nuxt3","swipe","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emanuele-em.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-09T11:09:40.000Z","updated_at":"2025-02-05T20:12:52.000Z","dependencies_parsed_at":"2024-10-28T13:18:58.310Z","dependency_job_id":"8d2c5a28-8ef2-4ded-bf89-9bd9f5326a86","html_url":"https://github.com/emanuele-em/nuxt-swipe","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":"0.18181818181818177","last_synced_commit":"181acba2d5c7cf3a228640cac48aa8db01332776"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/emanuele-em/nuxt-swipe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuele-em%2Fnuxt-swipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuele-em%2Fnuxt-swipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuele-em%2Fnuxt-swipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuele-em%2Fnuxt-swipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emanuele-em","download_url":"https://codeload.github.com/emanuele-em/nuxt-swipe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuele-em%2Fnuxt-swipe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279146970,"owners_count":26113954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-16T02:00:06.019Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gesture","gesture-recognition","lightweight","nuxt","nuxt3","swipe","vue"],"created_at":"2024-10-13T21:09:47.063Z","updated_at":"2025-10-16T03:38:22.410Z","avatar_url":"https://github.com/emanuele-em.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Nuxt-Swipe\n\nThis 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.\n\n\n\n## Installation\n\nTo add this module to your Nuxt.js project, run the following command:\n\n```bash\n  npm i @emanuele-em/nuxt-swipe\n\n```\nThen, add nuxt-swipe to the modules section of your nuxt.config.js file:\n\n```javascript\n  export default {\n    modules: [\n        '@emanuele-em/nuxt-swipe'\n    ]\n  }\n\n```    \n\n## Usage\n\nTo use the module, simply add `\u003cSwipe\u003e` component, it will be the component that will intercept the _swipe_ gesture\n\nFor example:\n```javascript\n\u003ctemplate\u003e\n    \u003cSwipe\u003e\n        \u003cslot /\u003e\n    \u003c/Swipe\u003e\n\u003c/template\u003e\n```\n\nThe 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.\n\nYou can handle that event in the script section of your component, **remember to import nuxtApp**:\n\n```html\n\u003cscript setup\u003e\n\nimport { useNuxtApp } from '#app'\n\nconst nuxtApp = useNuxtApp()\n\nnuxtApp.$bus.$on('swipe', (direction) =\u003e {\n    switch (direction) {\n        case 'left': \n            // swiped left, do things\n            break;\n        case 'right':\n            // swiped right, do things\n            break;\n        case 'up':\n            // swiped up, do things\n            break;\n        case 'down':\n            // swiped down, do things\n            break;\n        default:\n            break;\n    }\n})\n\n\u003c/script\u003e\n```\n## Examples\n\nSwipe navigation with `Swipe` component as Default Layout\n\n_layouts/default.vue_\n```javascript\n\u003ctemplate\u003e\n    \u003cSwipe\u003e\n        \u003cslot /\u003e\n    \u003c/Swipe\u003e\n\u003c/template\u003e\n  \n\u003cscript setup\u003e\nimport { useNuxtApp, useRoute, navigateTo } from '#app'\n\nconst nuxtApp = useNuxtApp()\nconst routes = ['/', '/about']\n\nnuxtApp.$bus.$on('swipe', (direction) =\u003e {\n    let indexCurrentRoute = routes.indexOf(useRoute().path)\n    if (direction === 'left' \u0026\u0026 routes[indexCurrentRoute + 1]) {\n        indexCurrentRoute += 1\n    }\n    if (direction === 'right' \u0026\u0026 routes[indexCurrentRoute - 1]) {\n        indexCurrentRoute -= 1\n    }\n    return navigateTo(routes[indexCurrentRoute])\n})\n\n\u003c/script\u003e\n  \n```\n\n\n## Demo\n\n[demo-nuxt-swipe.pages.dev](https://demo-nuxt-swipe.pages.dev/)\n\n\n## Roadmap\n\n- Typescript correct syntax\n\n- Swipe handling during the `touchEvent` and not just at `touchend` \n\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuele-em%2Fnuxt-swipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femanuele-em%2Fnuxt-swipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuele-em%2Fnuxt-swipe/lists"}