Quasar Counter Example - Quasar-framework Typing CST Test

Quasar Counter Example — Quasar-framework Code

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

<template>
	<q-page class="flex flex-center">
		<q-card class="q-pa-md text-center">
		<q-card-section>
		<h2>Counter: {{ count }}</h2>
		</q-card-section>
		<q-card-actions align="center">
		<q-btn color="primary" @click="increment">+</q-btn>
		<q-btn color="negative" @click="decrement">-</q-btn>
		<q-btn color="secondary" @click="reset">Reset</q-btn>
		</q-card-actions>
		<q-btn class="q-mt-md" color="warning" @click="toggleTheme">Switch Theme</q-btn>
		</q-card>
	</q-page>
</template>

<script setup>
import { ref } from 'vue';
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 ? 'bg-dark text-white' : '';
};
</script>

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

Quasar-framework Language Guide

Quasar Framework is a Vue.js-based framework that allows developers to build high-performance, responsive web apps, mobile apps (via Cordova/Capacitor), and desktop apps (via Electron) using a single codebase.

More Quasar-framework Typing Exercises

Practice Other Languages