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

Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.

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. If you'd like to join them, check out Quasar Framework's Patreon campaign.

Proudly sponsored by:

Partners

Documentation

Head on to the Quasar Framework official website: https://quasar-framework.org

Stay in Touch

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

Chat Support

Ask questions at the official community Discord server: http://chat.quasar-framework.org

Community Forum

Ask questions at the official community forum: https://forum.quasar-framework.org

Quasar Repositories

• Quasar Framework
• Quasar CLI
• Quasar Play App

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

Issue Reporting Guidelines

Please use the appropriate Github repo to report issues. See "Related Components" above. For example, a bug related to CLI should be reported to the CLI repo, one related to build issues to Quasar Framework Templates repo and so on.

• The issue list of the repository is exclusively for bug reports and feature requests. For anything else please use the Community Forum.

• Try to search for your issue, it may have already been fixed in the development branch or it may have a resolution.

• Check if the issue is reproducible with the latest stable version of Quasar. If you are using a pre-release, please indicate the specific version you are using.

• It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.

• If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

Read more here.

Semver

Until Quasar reaches a 1.0 release (soon), breaking changes will be released with a new minor version. For example 0.8.1, and 0.8.4 will have the same API, but 0.9.0 will have breaking changes.

License

Copyright (c) 2016-present Razvan Stoenescu

MIT License