What it is
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.
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.
Installation
npm install -g @quasar/cli
quasar create my-appGetting started
The smallest useful thing you can do with it, and what each part means.
<template>
<q-btn label="Click Me" color="primary" @click="onClick"></q-btn>
</template>
<script setup>
function onClick() {
console.log('Button clicked');
}
</script><template>
<q-input v-model="text" label="Enter text"></q-input>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>Advanced usage
Where the library earns its place over a simpler alternative.
<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><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><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>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- 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.
Background
Why it exists, and what it was reacting to.
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.