Quasar

As Cross Platform As Possible

Meet Elad Cohen @ GoCode

Web developers mentoring that teaches you how to code in a simple language, focused on the most current technologies in market.

Telegram channel for Hebrew materials�http://t.me/gocodesderot

​

Full Fullstack Course in Hebrew

http://bit.ly/gocodefed

​

Official Site

http://www.gocode.co.il

​

Remember?

Native Cross-Platform

Hybrid �(WebView based)�Cross-Platform

Quasar

Ionic

So, Why Quasar?

"Write code once and simultaneously deploy it"

SPAs (Single Page App)

SSR (Server-side Rendered App)

PWAs (Progressive Web App)

Mobile Apps (Android, iOS, …) through Cordova or Capacitor

Multi-platform Desktop Apps (using Electron)

What else?

Vue.js based

Fast and responsive web components�https://quasar.dev/vue-components/

App extensions support�https://quasar.dev/app-extensions/discover

Full RTL Support �https://quasar.dev/options/rtl-support#Enabling-RTL-support

40 Language Packs Out of the box�https://quasar.dev/options/quasar-language-packs

Great Maintenance

SSR Mode (aka Universal / Isomorphic)

SSR Mode

Lifecycle Hooks

Only beforeCreate() and created() will be called during SSR.

​

Code inside beforeMount() or mounted() will only be executed on the client.

​

Because the destroy hooks will not be called during SSR, do side-effects like setInterval only on beforeMount() or mounted() and destroy it on beforeDestroy() and destroyed() to avoid memory leaks

SSR Mode

PreFetch

The PreFetch is a feature which allows the components picked up by Vue Router (defined in /src/router/routes.js) to:

• pre-fetch data
• validate the route
• redirect to another route, when some conditions aren’t met (like user isn’t logged in)

Can help in initializing the Store state

All the above will run before the actual route component is rendered.

​

SSR Mode

PreFetch

<!-- some .vue component used as route -->

<template>

<div>{{ item.title }}</div>

</template>

​

<script>

export default {

// our hook here

preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext }) {

return store.dispatch('fetchItem', currentRoute.params.id)

}, ...

</script>

Quasar Config - quasar.config.js

Quasar Config - quasar.config.js

No main.js. Use Boot files

A common use case for Quasar applications is to run code before the root Vue app instance is instantiated.

​

​

Since you won’t be having access to any /main.js file (so that Quasar CLI can seamlessly initialize and build same codebase for SPA/PWA/SSR/Cordova/Electron) Quasar provides an elegant solution to that problem by allowing users to define so-called boot files.

import Vue from 'vue'

import axios from 'axios'

​

// we add it to Vue prototype

// so we can reference it in Vue files

// without the need to import axios

Vue.prototype.$axios = axios

/boot/axios.js file

CSS Spacing Classes

q-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]

T D S

​

T - type

- values: p (padding), m (margin)

​

D - direction

- values:

t (top), r (right), b (bottom), l (left),

a (all), x (both left & right), y (both top & bottom)

​

S - size

- values:

none,

auto (ONLY for specific margins: q-ml-*, q-mr-*, q-mx-*),

xs (extra small),

sm (small),

md (medium),

lg (large),

xl (extra large)

https://quasar.dev/style/spacing

Layout Builder

https://quasar.dev/layout-builder

Getting Started - SPA, SSR & PWA

npx @quasar/cli create my-app

npx quasar dev

SPA Mode

npx quasar dev -m ssr

SSR Mode

npx quasar dev -m pwa

PWA Mode

Getting Started - Mobile Modes

npx quasar dev -m capacitor -T [ios|android]

Capacitor Mode

npm install -g cordova�npx quasar dev -m cordova -T [ios|android]

Cordova Mode

Getting Started - Electron Mode

npx quasar dev -m electron

Electron Mode

CodeSandBox Playground

https://codesandbox.io/s/quasar-framework-playground-grmbk

​

And live bootstrapping...