Vue 3 Composition Api Click Event Example

In this section we will how to use click event in vuejs 3 composition api.

Example 1

Simple Composition Api Click Event.

Vue
<template>
    <div class="container mx-auto">
        <p>{{ count }}</p>
        <button @click="count++" class="px-4 py-2 text-blue-900 bg-blue-100">
            Increment
        </button>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);

        return { count };
    },
};
</script>

Vue 3 composition api method click event.

Vue
<template>
    <div class="container mx-auto">
        <p>{{ count }}</p>
        <button @click="Increment" class="px-4 py-2 text-blue-900 bg-blue-100">
            Increment
        </button>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const Increment = () => count.value++
        return { count, Increment };
    },
};
</script>
click event

Example 2

Show and hide div element using vuejs 3 composition api.

Vue
<template>
    <div class="container mx-auto">
        <button @click="showElement" class="px-4 py-2 text-white bg-indigo-600">
            Click
        </button>
        <div v-show="message">vue show component on click</div>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const message = ref(false);
        function showElement() {
            message.value = !message.value;
        }
        return { message, showElement };
    },
};
</script>
hide div  composition api

Example 3

Vue 3 composition api click event simple function argument with arrow function.

Vue
<template>
  <div class="container flex justify-center mx-auto">
    <div class="mt-20 space-x-4">
      <button
        @click="sayHi('Vue 3 Composition Api is Awesome!')"
        class="px-4 py-2 text-blue-900 bg-blue-100"
      >
        Sayhi
      </button>
      <button
        @click="sayBye('Bye Bye!')"
        class="px-4 py-2 text-red-900 bg-red-100"
      >
        SayBye
      </button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    // Define a ref for message
    const message = ref("");

    // Define functions to handle button clicks
    const sayHi = (message) => alert(message);
    const sayBye = (message) => alert(message);

    return { message, sayHi, sayBye };
  },
};
</script>
composition api click event
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack