Vuetify - Webpack Cordova Template

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

This template uses:

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:

for more information.