Learn Quasar-framework - 10 Code Examples & CST Typing Practice Test

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.

View all 10 Quasar-framework code examples →

Quasar Counter Example Quasar Counter Card Layout Quasar Floating Counter Quasar Counter with Toolbar Quasar Counter with Card Grid Quasar Counter with Dialog Quasar Counter with Toggle Theme Quasar Counter with Input Step Quasar Counter with Slider Quasar Counter with Badge

Learn QUASAR-FRAMEWORK with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Quasar Counter Example

<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>

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

Let’s Try →

Quasar Counter Card Layout

<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 vertical>
      <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-card>
</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>

Counter with Quasar card layout and vertical button stack.

Let’s Try →

Quasar Floating Counter

<template>
<q-page class="flex flex-center">
  <q-btn-group spread>
    <q-btn color="primary" round @click="increment">+</q-btn>
    <q-btn color="negative" round @click="decrement">-</q-btn>
    <q-btn color="secondary" round @click="reset">Reset</q-btn>
  </q-btn-group>
  <div class="q-mt-md">Counter: {{ count }}</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>

Counter using floating action buttons.

Let’s Try →

Quasar Counter with Toolbar

<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>

Counter example using a Quasar toolbar at the top.

Let’s Try →

Quasar Counter with Card Grid

<template>
<q-page class="q-pa-md">
  <q-card v-for="n in 3" :key="n" class="q-ma-sm text-center">
    <q-card-section>
      <h3>Counter {{ n }}: {{ counts[n-1] }}</h3>
    </q-card-section>
    <q-card-actions align="center">
      <q-btn color="primary" @click="increment(n-1)">+</q-btn>
      <q-btn color="negative" @click="decrement(n-1)">-</q-btn>
      <q-btn color="secondary" @click="reset(n-1)">Reset</q-btn>
    </q-card-actions>
  </q-card>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const counts = ref([0,0,0]);
const increment=(i)=>counts.value[i]++;
const decrement=(i)=>counts.value[i]--;
const reset=(i)=>counts.value[i]=0;
</script>

Multiple counters in a Quasar grid layout.

Let’s Try →

Quasar Counter with Dialog

<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="accent" class="q-mt-md" @click="showDialog=true">Show Dialog</q-btn>
  </div>
  <q-dialog v-model="showDialog">
    <q-card class="q-pa-md text-center">
      <q-card-section>Current Count: {{ count }}</q-card-section>
      <q-card-actions align="center">
        <q-btn flat label="Close" color="primary" @click="showDialog=false" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const showDialog = ref(false);
const increment = ()=>count.value++;
const decrement = ()=>count.value--;
const reset = ()=>count.value=0;
</script>

Shows the current count in a Quasar dialog.

Let’s Try →

Quasar Counter with Toggle Theme

<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>

Switches between dark and light theme for the counter.

Let’s Try →

Quasar Counter with Input Step

<template>
<q-page class="flex flex-center">
  <div class="text-center">
    <h2>{{ count }}</h2>
    <q-input v-model.number='step' type='number' label='Step' class='q-mb-md'/>
    <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 step = ref(1);
const increment = ()=>count.value+=step.value;
const decrement = ()=>count.value-=step.value;
const reset = ()=>count.value=0;
</script>

Increment or decrement counter by a custom input step.

Let’s Try →

Quasar Counter with Slider

<template>
<q-page class="flex flex-center">
  <div class="text-center">
    <h2>{{ count }}</h2>
    <q-slider v-model.number='count' min=0 max=100 class='q-mb-md'/>
    <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>

Adjust counter using a slider in addition to buttons.

Let’s Try →

Quasar Counter with Badge

<template>
<q-page class="flex flex-center">
  <q-badge color="primary" class="q-mb-md">{{ count }}</q-badge>
  <div>
    <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>

Counter value shown inside a Quasar badge.

Let’s Try →

Frequently Asked Questions about Quasar-framework

What is Quasar-framework?

What are the primary use cases for Quasar-framework?

Vue.js web applications (SPA and SSR). Progressive Web Apps (PWA). Mobile apps via Cordova or Capacitor. Desktop apps via Electron. Cross-platform apps from a single codebase

What are the strengths of Quasar-framework?

Multi-platform support from a single codebase. Comprehensive component library. Built-in CLI and development tooling. Responsive and mobile-first layouts. Strong community and active maintenance

What are the limitations of Quasar-framework?

Vue-only framework. Bundle size can be large if unused components are not tree-shaken. Learning curve for advanced Quasar CLI and config. Opinionated structure for layouts and pages. Not ideal for projects not targeting multiple platforms

How can I practice Quasar-framework typing speed?

CodeSpeedTest offers 10+ real Quasar-framework code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Quasar Counter Example

<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>

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

Let’s Try →

Quasar Counter Card Layout

<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 vertical>
      <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-card>
</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>

Counter with Quasar card layout and vertical button stack.

Let’s Try →

Quasar Floating Counter

<template>
<q-page class="flex flex-center">
  <q-btn-group spread>
    <q-btn color="primary" round @click="increment">+</q-btn>
    <q-btn color="negative" round @click="decrement">-</q-btn>
    <q-btn color="secondary" round @click="reset">Reset</q-btn>
  </q-btn-group>
  <div class="q-mt-md">Counter: {{ count }}</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>

Counter using floating action buttons.

Let’s Try →

Quasar Counter with Toolbar

<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>

Counter example using a Quasar toolbar at the top.

Let’s Try →

Quasar Counter with Card Grid

<template>
<q-page class="q-pa-md">
  <q-card v-for="n in 3" :key="n" class="q-ma-sm text-center">
    <q-card-section>
      <h3>Counter {{ n }}: {{ counts[n-1] }}</h3>
    </q-card-section>
    <q-card-actions align="center">
      <q-btn color="primary" @click="increment(n-1)">+</q-btn>
      <q-btn color="negative" @click="decrement(n-1)">-</q-btn>
      <q-btn color="secondary" @click="reset(n-1)">Reset</q-btn>
    </q-card-actions>
  </q-card>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const counts = ref([0,0,0]);
const increment=(i)=>counts.value[i]++;
const decrement=(i)=>counts.value[i]--;
const reset=(i)=>counts.value[i]=0;
</script>

Multiple counters in a Quasar grid layout.

Let’s Try →

Quasar Counter with Dialog

<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="accent" class="q-mt-md" @click="showDialog=true">Show Dialog</q-btn>
  </div>
  <q-dialog v-model="showDialog">
    <q-card class="q-pa-md text-center">
      <q-card-section>Current Count: {{ count }}</q-card-section>
      <q-card-actions align="center">
        <q-btn flat label="Close" color="primary" @click="showDialog=false" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const showDialog = ref(false);
const increment = ()=>count.value++;
const decrement = ()=>count.value--;
const reset = ()=>count.value=0;
</script>

Shows the current count in a Quasar dialog.

Let’s Try →

Quasar Counter with Toggle Theme

<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>

Switches between dark and light theme for the counter.

Let’s Try →

Quasar Counter with Input Step

<template>
<q-page class="flex flex-center">
  <div class="text-center">
    <h2>{{ count }}</h2>
    <q-input v-model.number='step' type='number' label='Step' class='q-mb-md'/>
    <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 step = ref(1);
const increment = ()=>count.value+=step.value;
const decrement = ()=>count.value-=step.value;
const reset = ()=>count.value=0;
</script>

Increment or decrement counter by a custom input step.

Let’s Try →

Quasar Counter with Slider

<template>
<q-page class="flex flex-center">
  <div class="text-center">
    <h2>{{ count }}</h2>
    <q-slider v-model.number='count' min=0 max=100 class='q-mb-md'/>
    <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>

Adjust counter using a slider in addition to buttons.

Let’s Try →

Quasar Counter with Badge

<template>
<q-page class="flex flex-center">
  <q-badge color="primary" class="q-mb-md">{{ count }}</q-badge>
  <div>
    <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>

Counter value shown inside a Quasar badge.

Let’s Try →

Frequently Asked Questions about Quasar-framework

What is Quasar-framework?

What are the primary use cases for Quasar-framework?

Vue.js web applications (SPA and SSR). Progressive Web Apps (PWA). Mobile apps via Cordova or Capacitor. Desktop apps via Electron. Cross-platform apps from a single codebase

What are the strengths of Quasar-framework?

Multi-platform support from a single codebase. Comprehensive component library. Built-in CLI and development tooling. Responsive and mobile-first layouts. Strong community and active maintenance

What are the limitations of Quasar-framework?

How can I practice Quasar-framework typing speed?

CodeSpeedTest offers 10+ real Quasar-framework code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.