Vuetify - Webpack Cordova Template

You can start your new cordova project perfectly with this template.

This template uses:

• Vuetify.js
• Vue Js 2
• Webpack 2

Thanks to: centrual cordova-template-framework7-vue-webpack

Minimum Requirements

• Cordova: 7.0.0
• Node.js: 8.0.0 (Supports ES6)

Features

Hooks are smart. They can fix some problems for you. Fix list:

• npm install Automatically checks node js dependencies.
• package.json Renames name variable if it has a space characters and auto saves. (It needed for npm install)
• www Automatically manages www folder. You don't need to think about www folder. Your target is always src folder.
• static Static assets automatically sync on live reload!
• CordovaHtmlOutputPlugin Automatically adds cordova.js to html. You don't need to add to your file manually. It's helpful for webpack.
• manifest.json Some cordova plugins needs manifest.json in root folder. If you add manifest.json file to your src folder, our smart hooks automagically copy it to www folder!

Live Reload Related

• config.xml Live reload needs <allow-navigation href="*"/> in development mode. So our smart hooks manages this too. You don't need to think about it.
• live-reload Manages live-reload dependencies automatically. Just write your code, and don't think about dependencies.
• device_router.html Smart router in live-reload mode. It searches for best available ip for connect server. if it can't find, you can write ip:port manually.
• CordovaDeviceRouter.js In live-reload mode, you can connect to server from multiple devices. This file inject right cordova.js file to page. So you can connect to webpack-dev-server from multiple devices at same time.

Installation

This template need cordova or phonegap,

npm install -g phonegap

for more information, please check cordova installation or phonegap installation.

Our Magic words:

phonegap create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-vuetify-webpack
# or
cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-vuetify-webpack

Now you have your brand new cordova / phonegap project with Vuetify, Vue 2 and webpack 2!

Usage

You can use every cordova | phonegap commands. You just have one more command option: -- --lr to start live reload.

Example usage:

cd <project_create_dir>
npm i
phonegap platform add browser
phonegap run browser -- --lr
cordova platform add android
cordova run android -- --lr

And your first App is ready! Check your App in web browser http://localhost:8000 or http://localhost:8081.

build

phonegap build --release

The build outputs (.js, .css) are in /www directory. If you're using other Web Framework (Django, Flask, etc.), make sure to update their index.html to correctly refer these outputs.

You can check:

• hookers.js,
• beforedep.js,
• CordovaDeviceRouter.js,
• device_router.html

for more information.