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

Reference

• Relax with bee-music sound
• Learning front-end web full course at Front-end course.
• Learn Snake Game tutorial at Snake-Game-OOP
• Learn Java for new beginner at Java training
• Make flip card game at flip-card
• Learn computer architecture at architecture
• Pratice UI/UX at league-fo-legend

❤️ Support me

We are looking for sponsors to join us to have better community reach and impact.

? License

• This project is distributed under the MIT License.

• Copyright of @thuongtruong1009, 2022.