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.

<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

<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>
Vue 3 Composition Api Click Event v1

Vue 3 Composition Api Click Event v1


Example 2

Show and hide div element using vuejs 3 composition api

<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>
Vue 3 Composition Api Click Event v2

Vue 3 Composition Api Click Event v2



Example 3

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

<template>
  <div class="container flex justify-center mx-auto">
    <div class="mt-20 space-x-4">
      <button
        @click="sayHi('Vue 3 Composition Api is Awsome !')"
        class="px-4 py-2 text-blue-900 bg-blue-100"
      >
        Sayhi
      </button>
      <button
        @click="sayHi('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() {
    //   normal function
    function sayHi(message) {
      alert(message);
    }
    // arrow function
    const sayBye = (message) => alert(message);
    return { sayHi, sayBye };
  },
};
</script>
Vue 3 Composition Api Click Event v3

Vue 3 Composition Api Click Event v3

Vue 3 Composition Api Click Event v4

Vue 3 Composition Api Click Event v4


Use Vue 3 Composition Api Click Event

👉 Tailwind CSS Vue 3 Modal Examples

👉 Vue 3 Dropdown With Tailwind CSS Examples

👉 Build A Simple Tabs with Tailwind CSS & Vue 3

👉 Vue 3 Responsive Navbar Menu With Tailwind CSS Example