Learn QUASAR-FRAMEWORK with Real Code Examples

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

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

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

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

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

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

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

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

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

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