Quasar Counter with Toolbar - Quasar-framework Typing CST Test

Quasar Counter with Toolbar — Quasar-framework Code

Counter example using a Quasar toolbar at the top.

<template>
<q-page>
  <q-toolbar class="bg-primary text-white">
    <q-toolbar-title>Counter App</q-toolbar-title>
  </q-toolbar>
  <div class="q-pa-md text-center">
    <h2>{{ count }}</h2>
    <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>
  </div>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value = 0;
</script>

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