javascript vuejs typescript html5 component eslint css3 frontend-web prettier quasar vue-router html-css-javascript postcss bablejs pinia twitter scss github firebase pwa

twitter-meta

----------- A Quasar Framework app ----------

Preview

Demo beta latest verion

Feature and Plugin CLI

Quasar: strong tool for build web app & mobile app
Pinia: store & state management Plugin
Firebase and Firestore: realtime database using no-sql
Electron for Quasar: preview for desktop application
Cordova for Quasar: preview for mobile apllication
PWA: download preview to local like browser

Try it now!

Twitter-meta requires Node >=14

GitHub Template

This template should help get you started developing with Vue 3 in Quasar.

Create a quasar repo from this template on GitHub.

Customize the configuration

See Configuring quasar.conf.js.
Prefix size of electron browser.
Format the time using date formatter.
Get component style animation.
Style config editorconfig.
Download virtualbox.

Tutorial & Practice

you should follow step-by-step order clearly

Clone to local

# star this repo and open the terminal
git clone https//github.com/vue-core/twitter-meta.git

Install the dependencies

npm install
# you need globaly install through npm install -g @quasar/cli

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Build the app for production

quasar build

Install firebase

npm install firebase

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.
not PWA
- output: /dist/spa
- script: quasar build
PWA
- output: /dist/pwa
- script: quasar build -m pwa

Install boot file

quasar new boot firebase
------------------------
quasar.conf.js -> boot:['firebase']

Preview as Electron destop app on Window/Mac

In this scenerio, I resume that I buiding on main-opartion is MacOS & building on sub-operation by virtual machine

View in main-operation -> quasar dev -m electron
-> src-electron/electron-main.js
mainWindow = new BrowserWindow({
    width: 1024,
    minWidth: 1024,
    height: 600,
})
-------------------------------------------------
View in sub-operation -> quasar build -m electron
-> quasar.conf.js
electron: {
    packager: {
        platform: 'win32'
    },
}
open the path /dist/electron/Twitter.exe on virtual machine

Preview as iOS/Android mobile application with Cordova

npm install -g cordova
-----------------------
For iOS
require: xcodebuild
local build: quasar dev -m cordova -T ios

switching to iOS WkWebView (cd src-cordova):
# add ScrollEnabled-Preference to Config.xml
<platform name="ios">
  <preference name="ScrollEnabled" value="true" />
</platform>

# install Ionic-Webview-plugin
cordova plugin add cordova-plugin-ionic-webview
# check type_list
cordova run ios --list
cd ..
quasar dev -m cordova -T ios -e <type_list>
--------------------------------------------
For Android
require: android studio
config: AVD manager
connect: pixel 2, ect... (that available)
local build: quasar dev -m cordova -T android