Counter Example - Vuetify Typing CST Test

Counter Example — Vuetify Code

Demonstrates a simple counter layout using Vuetify components and Vue.js for interactivity.

<template>
	<v-app>
		<v-main class="d-flex justify-center align-center" style="height:100vh">
		<v-card class="pa-6 text-center">
		<v-card-title>
		Counter: {{ count }}
		</v-card-title>
		<v-card-actions>
		<v-btn color="primary" @click="increment">+</v-btn>
		<v-btn color="error" @click="decrement">-</v-btn>
		<v-btn color="secondary" @click="reset">Reset</v-btn>
		</v-card-actions>
		<v-btn class="mt-4" color="warning" @click="toggleTheme">Switch Theme</v-btn>
		</v-card>
		</v-main>
	</v-app>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const count = ref(0);
		const isDark = ref(false);
		const increment = () => count.value++;
		const decrement = () => count.value--;
		const reset = () => count.value = 0;
		const toggleTheme = () => {
		isDark.value = !isDark.value;
		document.body.className = isDark.value ? 'theme--dark' : '';
		};
		return { count, increment, decrement, reset, toggleTheme };
	}
};
</script>

<style>
.theme--dark {
	background-color: #333;
	color: #fff;
}
</style>

Vuetify Language Guide

Vuetify is a Vue.js framework that provides a comprehensive collection of UI components following the Material Design specification, enabling developers to build visually consistent, responsive, and feature-rich web applications.

More Vuetify Typing Exercises

Practice Other Languages