Quasar Counter with Toggle Theme - Quasar-framework Typing CST Test

Quasar Counter with Toggle Theme — Quasar-framework Code

Switches between dark and light theme for the counter.

<template>
<q-page class="flex flex-center">
  <div class="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>
    <q-btn color="warning" class="q-mt-md" @click="toggleTheme">Switch Theme</q-btn>
  </div>
</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:#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