Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
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.
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>
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 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 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.
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!
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.
Head on to the Quasar Framework official website: https://quasar.dev
For latest releases and announcements, follow on Twitter: @quasarframework
Ask questions at the official community Discord server: https://chat.quasar.dev
Ask questions at the official community forum: https://forum.quasar.dev
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.
Quasar is following Semantic Versioning 2.0.
Copyright (c) 2015-present Razvan Stoenescu
FAQs
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
The npm package quasar receives a total of 130,310 weekly downloads. As such, quasar popularity was classified as popular.
We found that quasar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.