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

Readme

Source

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

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.

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

MIT License

Keywords

FAQs

What is quasar?

Is quasar popular?

Is quasar well maintained?

Last updated on 31 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

quasar