quasar

What is quasar?

Quasar is a powerful Vue.js framework that allows developers to create responsive websites, mobile apps, and Electron apps using a single codebase. It provides a wide range of components, utilities, and tools to streamline the development process.

What are quasar's main functionalities?

Responsive Layouts

Quasar provides a powerful layout system that allows you to create responsive and adaptive layouts with ease. The example demonstrates a basic layout with a header and a page container.

<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-page-container>
      <q-page>
        <div class="q-pa-md">
          <q-card>
            <q-card-section>
              Welcome to Quasar!
            </q-card-section>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>
<script>
export default {
  name: 'MyLayout'
}
</script>

Form Components

Quasar offers a wide range of form components that are easy to use and integrate. The example shows a simple form with input fields for name and email, and a submit button.

<template>
  <q-form @submit="onSubmit">
    <q-input filled v-model="formData.name" label="Name" />
    <q-input filled v-model="formData.email" label="Email" type="email" />
    <q-btn type="submit" label="Submit" color="primary" />
  </q-form>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.formData);
    }
  }
}
</script>

Dialogs and Notifications

Quasar provides built-in support for dialogs and notifications, making it easy to create interactive and user-friendly interfaces. The example demonstrates how to show a dialog with a title, message, and OK/Cancel buttons.

<template>
  <q-page>
    <q-btn @click="showDialog" label="Show Dialog" color="primary" />
  </q-page>
</template>
<script>
export default {
  methods: {
    showDialog() {
      this.$q.dialog({
        title: 'Dialog Title',
        message: 'This is a dialog message.',
        ok: 'OK',
        cancel: 'Cancel'
      }).onOk(() => {
        console.log('OK clicked');
      }).onCancel(() => {
        console.log('Cancel clicked');
      });
    }
  }
}
</script>

Other packages similar to quasar

vuetify

Vuetify is a popular Vue.js framework that provides a wide range of UI components and tools for building responsive and visually appealing applications. Compared to Quasar, Vuetify focuses more on Material Design principles and offers a rich set of components that adhere to these guidelines.

bootstrap-vue

Bootstrap-Vue is a Vue.js integration for Bootstrap, providing a comprehensive set of Bootstrap components and grid system for building responsive web applications. While Quasar offers more advanced features and tools for building mobile and Electron apps, Bootstrap-Vue is a great choice for developers who prefer the Bootstrap framework.

element-ui

Element UI is a Vue.js 2.0-based component library for developers, designers, and product managers. It provides a set of high-quality components and a customizable theme. Compared to Quasar, Element UI is more focused on desktop applications and offers a simpler, more straightforward API.

README

Quasar Framework UI Package

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Stay in Touch

For latest releases and announcements, follow on Twitter: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Ask questions at the official community forum: https://forum.quasar.dev

Contributing

I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature). Please read the Contributing Guide.

Semver

Quasar is following Semantic Versioning 2.0.

License

Copyright (c) 2015-present Razvan Stoenescu

MIT License