Quasar Framework version 0.14 comes out of beta

Quasar v0.14.1

The official version 0.14.1 of Quasar has been released! Coming out of beta chock full of great improvements, reaching of 3k stars on GitHub. According to the latest post on the framework's blog, it's a big rewrite, aproximately 70%. Special details like 24 shadow levels to select from or a built-in transition component and an incredibly powerful yet simple to use layout system make Quasar one of the most extensive and impressive Vue component frameworks in the world.

The Quasar Framework helps you build simultaneously desktop,mobile, SPA websites and phone/tablet apps, with tools like Webpack, Vuex, & Cordova, powered by Vue.js. By Razvan Stoenescu creator of the framework.

If you haven't tried Quasar before, check the Demos: Material theme & iOS theme.

Highlights

In the following list are just few things that changed or improved in the latest version

  • Form components redone
  • Material Ripples
  • Completely new 12 points CSS Grid system (95% same syntax) - inspired by Bootstrap’s
  • Flexbox Lists
  • Card component - complete revamp from the previous CSS only version
  • Uploader component facelift
  • Layout revamp. Smarter header/footer/drawer. Eliminate the “mobile keyboard above input” issue. You’ll be able to configure header to hide/show based on user navigation through animation. Insanely easy to place header/footer/drawer(aside) on the viewport and configure where one starts and the other begins (many new possibilities).

These are just half of the main areas, there are many more enhancements. You can find out more on the release notes on GitHub.

v0.14 Upgrade Guide

There is not yet a complete guide by Razvan, but there’s a starting point for all the impatient dudes who want to port a 0.13.x app to 0.14, posted on the Quasar's Guide.

  1. npm update -g quasar-cli
  2. quasar init ‘default’ FOLDERNAME (will create a new folder with 0.14 basics)
  3. cd FOLDERNAME
  4. npm i
  5. Manually move your 0.13 code into that folder structure. Repeat step 4 once all your dependencies are set up.
  6. Check the beginners intro and the beta docs, and learn about using components and tree-shaking. Also you may want to run this script to find out what Quasar components your app uses:

find ./src -name *.vue -printf "list=\$(grep -oP \"<\\\\K(q-[^\\\\s>/]+)\" %p | sed -r 's/(-|^)(.)([^-]*)/\\\\U\\\\2\\\\L\\\\3/g; s/^/ /; s/$/,/' | sort | uniq); echo \"\\\n*** %p\\\n\\\nimport {\\\n\$list\\\n} from 'quasar';\\\n\\\ncomponents: {\\\n\$list\\\n},\\\n\";" | sh

  1. Go ahead and apply what you learned.
  2. quasar dev: check for any components still missing, adjust imports accordingly, rinse and repeat until your app starts and displays correctly.

If you have used animations in your code, take a look at this.

The Documentation of the Quasar Framework in on the official website. There is also a Community Forum where you can find announcements, ask for help etc.

Quasar related Repositories

The Quasar Play App can be used instead of using mobile emulators for testing Quasar Apps. You can develop apps directly on your phone/tablet (hot reload supported!), without even installing your app.

Currently only on Google Play. Requiring funding to pay fees on Apple Store and release the iOS counterpart too.

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.

News submitted by @Skooppadotcom.