Dev.to Github Email

twitter-meta

———– A Quasar Framework app ———-

preview image

Feature and Plugin CLI

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

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

❤️ Support me

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

MOMO Buy Me a Coffee at ko-fi.com

? License