added code.

Author: Timonwa

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue3-touch-events": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,17 +1,56 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="grid-cntr">
+    <button
+      class="btn"
+      @touchstart="nameCurrentEvent('touchstart')"
+      @touchmove="nameCurrentEvent('touchmove')"
+      @touchend="nameCurrentEvent('touchend')"
+      >Touch me</button
+    >
+    <button class="btn" v-touch:tap="onTapItem('onTapItem')">Tap me</button>
+    <button class="btn" v-touch:swipe="onSwipeItem">Swipe any direction</button>
+    <button class="btn" v-touch:swipe.left="onSwipeLeftItem">Swipe left</button>
+    <button class="btn" v-touch:drag="onDragItem">Drag me</button>
+    <button class="btn" v-touch:press="onPressItem">Press me</button></div
+  >
+
+  <p class="output"
+    >Current Touch Event:
+    <span class="event">{{ name }}</span>
+  </p>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+  name: "App",
+  data() {
+    return {
+      name: "none",
+    };
+  },
+  methods: {
+    nameCurrentEvent(name) {
+      this.name = name;
+    },
+    onTapItem(param) {
+      return function () {
+        alert("You called the " + param + " touch event.");
+      };
+    },
+    onSwipeItem() {
+      return (this.name = "swipped");
+    },
+    onSwipeLeftItem() {
+      return (this.name = "swipped left");
+    },
+    onDragItem() {
+      return (this.name = "dragged");
+    },
+    onPressItem() {
+      return (this.name = "pressed");
+    },
+  },
+};
 </script>
 
 <style>
@@ -23,4 +62,25 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+.grid-cntr {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  max-width: 500px;
+  margin: auto;
+}
+.btn {
+  border: 2px solid rgb(71, 197, 255);
+  background-color: rgb(246, 244, 244);
+  border-radius: 5px;
+  height: 100px;
+  font-size: 1rem;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.event {
+  border-bottom: 1px solid rgb(71, 197, 255);
+  color: rgb(113, 113, 113);
+}
 </style>

src/main.js

@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
+import Vue3TouchEvents from "vue3-touch-events";
 
-createApp(App).mount('#app')
+createApp(App).use(Vue3TouchEvents).mount("#app");

yarn.lock

@@ -5807,6 +5807,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue3-touch-events@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vue3-touch-events/-/vue3-touch-events-4.1.0.tgz#053500d1e9ab4870efcd5de29530641064d0a7d5"
+  integrity sha512-fZKusOiBJzDPsY34tXYl/Wo9c2ONzBuQmF0+oHqVWr+TDbf90CgMWLHZsTv1KaShXjt+oeLow7BDVBpXW6lfXQ==
+
 vue@^3.2.13:
   version "3.2.39"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d"