phonegap / phonegap-template-vue-f7-blank

A blank PhoneGap template using Vue.js and Framework7

A Blank PhoneGap template using Vue.js and Framework7

Vue.js, Framework7, and Cordova / PhoneGap Template with Babel, Webpack and Hot Reloading

Getting Started

Prerequisites

To use this template, you'll need Node.js v6 or newer.

Installation

To use this as a template, use Cordova 6.0.0+ and create a new project:

cordova create MyAppName --template=phonegap-template-vue-f7-blank

or

phonegap create MyAppName --template phonegap-template-vue-f7-blank

then

cd MyAppName
npm install

Run the app in the browser / simulator

Run this to start the development webpack server:

npm run dev

You can then open the app in your browser by visiting localhost:8080

Open it in the iOS Simulator by running (in another terminal):

cordova platform add ios or phonegap platform add ios

then

npm run cordova-run-ios

Or in the Android emulator with:

cordova platform add android or phonegap platform add android

then

npm run cordova-run-android

(both of which are just calling cordova run ios and cordova run android)

Build the app for production

To build the app without the development hot module reloading server:

npm run build-prod

After that, the normal Cordova / PhoneGap commands can be used such as phonegap serve, or cordova run ios, etc.

phonegap-template-vue-f7-blank's Issues

update vue dependency to remove memory leak

Consider switching templates to using semistandard instead of airbnb for eslint

It might be that for newer users of es2015, etc... the airbnb eslint settings might be a tad too picky.

We might try semistandard instead to make the templates a bit more approachable.

Add PWA features to template

Ran Lighthouse against an app created with this template and it scored:

This issue is to track the improvement of the template adding PWA functionality.

eslint complains about global declaration for "f7"

https://github.com/phonegap/phonegap-template-vue-f7-blank/blob/master/template/src/main.js#L1

  ✘  http://eslint.org/docs/rules/no-unused-vars  'f7' is defined but never used  
  /* global window document f7 */

Wrong source path for static assets ?

Hello!

I think the line

cp('-R', 'static/*', assetsPath);

should change to

cp('-R', 'src/static/*', assetsPath);

In order to copy the static folder from the src dir to the www dir. Is that what is intended?

How to use this project in Android Studio

Hi,
Is there instructions for how to use this project template within Android Studio (based on intelliJ)?
I tried creating a new project using existing sources but it didn't work and there were errors. I will post them shortly, but if there are instructions already, I should try that first.

thank you

Move index.html into ./src

To avoid confusion, we should move the index.html file that is used to build the final index.html from the root of the project to the src folder. This file is a src file in that it is the one that can be edited, then is used to generate the one in the www folder for use in Cordova.

Move back button and deviceready handler code from main.js to App.vue

See changes in phonegap/phonegap-app-stockpile@7c03aa8

cordova emulate android/ios not work

are there anyway to emulate android and ios

Remove deprecated babel preset 2015

npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Replace karma phantom with karma chrome

Phantomjs is no longer being developed on so switch over to using https://www.npmjs.com/package/karma-chrome-launcher

Any plans to upgrade to Framework7 v3?

Any plans to upgrade to Framework7 v3?

[Android] Back button doesn't exit app

App ID falls afoul of corodva's latest restriction

Probably the -

Use Node 6

Let's just force Node 6 so we can use ES2015 style JS.

Missing viewport-fit=cover for iPhone X support

[Android] Splash and icon references in config.xml are incorrect

Entries in config.xml point to the wrong file locations in res

Add template project overview

Add details about the folders and project structure etc, like found in the Stockpile Project Overview docs into here.

Project Does not run per instructions

When running $ npm run dev

Numerous errors appear. In particular.

ERROR in ./src/main.js
Module not found: Error: Can't resolve './app' in '/home/darren/WebstormProjects/CordovaApps/TestApp/src'
@ ./src/main.js 16:0-24 25:9-12
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js

Three/Four finger tap not working

It appears in this and the other templates:

• phonegap-template-vue-f7-tabs
• phonegap-template-vue-f7-split-panel

The three/four finger tap doesn't work in the PhoneGap Developer App. Seems like framework or something else is intercepting the calls.

Support css url(/static/img/stuff.png)

In a recent project, I had a CSS rule (In the <style> section of a .vue file) that used background-image: url(/static/image.png).

This worked fine in DEV mode, but building and deploying to android (or double-clicking the www/index.html file) resulted in the image resolving to a 404.
Changing the css rule on-the-fly to remove the leading slash (url(static/image.png) made the image load. But removing the slash in the SOURCE make the build fail (MiniCssExtractPlugin threw "unable to resolve" errors).

My workaround is to REMOVE that rule from the <style> section of the file and inject it dynamically in mounted() as url(static/image.png). Thankfully I only have one background image I'm setting this way.

I'm reporting this here, as I think people using this template would expect url() to work with /static/ resources in their <style> section.

Thanks for all your hard work!

Turn off quote stripping in HTML minify

Related to this issue, I was having problems testing my app in the phonegap app, since it did not refresh automatically. The fix for me was to have the <script type="text/javascript" src="cordova.js"></script> as the last script in the document (it is strange).

As a fix for this I had to:

• change inject: true to inject: false in both build\webpack-dev.conf.js and build\webpack-prod.conf.js.
• Replace the script injection section in src\index.html with:

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
<script type="text/javascript" src="cordova.js"></script>

I can submit a PR with these changes if required :)