In this tutorial we will create simple vuejs counter app using options api and composition api.
Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS
Simple Vue 3 Counter App using (Options Api) Example
Counter.vue
<template>
<div class="flex items-center justify-center gap-x-4">
<button
class="px-4 py-2 text-white bg-blue-600 focus:outline-none"
@click="increment">
Increment
</button>
{{ number }}
<button
class="px-4 py-2 text-white bg-red-600 focus:outline-none"
@click="decrement">
Decrement
</button>
</div>
</template>
<script>
export default {
data() {
return {
number: 0,
};
},
methods: {
increment() {
this.number++;
},
decrement() {
this.number--;
},
},
};
</script>
Vue 3 Counter App using (Composition Api) Example
Counter.vue
<template>
<div class="flex items-center justify-center gap-x-4">
<button
class="px-4 py-2 text-white bg-blue-600 focus:outline-none"
@click="increment">
Increment
</button>
{{ number }}
<button
class="px-4 py-2 text-white bg-red-600 focus:outline-none"
@click="decrement">
Decrement
</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const number = ref(0);
function increment() {
number.value++;
}
function decrement() {
number.value--;
}
return { number, increment, decrement };
},
};
</script>
Top comments (0)