Quasar

Language: JavaScript

UI Framework

Quasar was created to simplify the development of cross-platform applications with Vue.js. It emphasizes high performance, accessibility, and responsive design. Developers can build SPA, SSR, PWA, mobile apps, and desktop apps efficiently without maintaining separate codebases.

Quasar is a Vue.js framework that allows developers to build responsive websites, mobile apps (with Cordova or Capacitor), and Electron desktop apps using a single codebase. It provides a rich set of UI components, utilities, and build tools.

Installation

npm:

npm install -g @quasar/cli
quasar create my-app

yarn:

yarn global add @quasar/cli
quasar create my-app

manual: Install the Quasar CLI globally and initialize a new project using `quasar create`.

Usage

Quasar provides Vue components, directives, plugins, and CLI commands. Components include buttons, forms, dialogs, tables, layouts, and more. The framework supports responsive design, themes, and integration with mobile/desktop platforms.

Button usage

<template>
  <q-btn label="Click Me" color="primary" @click="onClick"></q-btn>
</template>

<script setup>
function onClick() {
  console.log('Button clicked');
}
</script>

A basic Quasar button with primary color and click handler.

Using QInput

<template>
  <q-input v-model="text" label="Enter text"></q-input>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

A simple Quasar input field with two-way binding.

Dialog component

<template>
  <q-btn label="Open Dialog" @click="show = true"></q-btn>
  <q-dialog v-model="show">
    <q-card>
      <q-card-section>Dialog Content</q-card-section>
      <q-card-actions>
        <q-btn flat label="Close" @click="show = false"></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

Opens a modal dialog with Quasar’s `q-dialog` and `q-card` components.

Table component

<template>
  <q-table :rows="rows" :columns="columns"></q-table>
</template>

<script setup>
const columns = [
  { name: 'name', label: 'Name', field: 'name' },
  { name: 'age', label: 'Age', field: 'age' }
]
const rows = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]
</script>

Displays tabular data using Quasar’s `q-table` component.

Layout with Drawer

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>Header</q-header>
    <q-drawer show-if-above v-model="drawer">Sidebar</q-drawer>
    <q-page-container>
      <q-page>Main content</q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
const drawer = ref(true)
</script>

Demonstrates a responsive layout with header, drawer, and page content.

Error Handling

Component not rendering: Ensure the Quasar plugin is properly installed and imported in your Vue project.

Styles not applied: Make sure Quasar CSS is included via the CLI project or `quasar.conf.js` configuration.

Build errors: Check Node.js version compatibility and update Quasar CLI if necessary.

Best Practices

Use Quasar CLI to manage project builds and platform targets.

Leverage Quasar’s responsive layout system for cross-platform apps.

Import only the components you need to reduce bundle size.

Use built-in plugins like Notify, Dialog, and Loading for common interactions.

Follow Quasar’s theming system for consistent UI design.

Official Docs Github