Introduction to Quasar Framework

Quasar Framework is a high-performance Vue.js-based framework designed to help you build responsive websites, hybrid mobile applications using Cordova or Capacitor, and Electron apps with a single codebase. With Quasar, you can easily access dozens of useful APIs and components.

Quasar CLI

  
  // Install Quasar CLI
  npm install -g @quasar/cli

  // Create a Quasar project
  quasar create my-app
  

Button Component

  
  <template>
    <q-btn label="Click Me" @click="handleClick" />
  </template>

  <script>
  export default {
    methods: {
      handleClick() {
        this.$q.notify('Button Clicked!');
      }
    }
  }
  </script>
  

Quasar Layout

  
  <template>
    <q-layout view="hHh LpR fFf">
      <q-header elevated>
        <q-toolbar>
          <q-toolbar-title>My App</q-toolbar-title>
        </q-toolbar>
      </q-header>

      <q-drawer show-if-above v-model="leftDrawerOpen">
        <q-list>
          <q-item clickable v-ripple @click="menuClick('/home')" tag="router-link" :to="{name: 'home'}">
            <q-item-section>
              <q-item-label>Home</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-drawer>

      <q-page-container>
        <router-view />
      </q-page-container>
    </q-layout>
  </template>

  <script>
  export default {
    data () {
      return {
        leftDrawerOpen: false
      }
    },
    methods: {
      menuClick(route) {
        this.$router.push(route);
      }
    }
  }
  </script>
  

Example App

Here’s a simple example of an app using Quasar Framework:

  
  <template>
    <q-layout view="hHh LpR fFf">
      <q-header elevated>
        <q-toolbar>
          <q-toolbar-title>Example App</q-toolbar-title>
        </q-toolbar>
      </q-header>

      <q-page-container>
        <q-page padding>
          <q-btn label="Notify Me" @click="notifyMe" />
        </q-page>
      </q-page-container>
    </q-layout>
  </template>

  <script>
  export default {
    methods: {
      notifyMe() {
        this.$q.notify('This is a notification!');
      }
    }
  }
  </script>
  

By using Quasar Framework, you can create versatile applications with ease and efficiency. The examples above showcase just a few of the many possibilities available to you when leveraging Quasar APIs and components.

Hash: 24a86a184ecdd7e67fdb1d3d5e7624ee64a3264f110a0b3339039b64c3f3f866