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
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
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 v4
Read Also
Vue 3 Dark Mode with Tailwind CSS Example
Install Vite + Vue 3 + Typescript + Tailwind CSS 3
How to Install Tailwind CSS in Vue 3
How to install Bootstrap 5 in Vue 3
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
Vue 3 Dropdown With Tailwind CSS Examples
