PhoneGap/Cordova templates for VueJS with Framework7

Stop!
Before you read on, you might wanna check out the 2018-version of this article!


The following article is from January 15th, 2017 and is only kept for archiving reasons!

PhoneGap development with VueJS and Framework7 seems to gain more traction lately and there are 2 new templates that help you get started easily. One made by Adobe’s Holly Schinsky and the other one by Oğuz Özcan. In this post I want to introduce how to kick off a project with both templates easily.

Holly Schinsky’s template

To download, check her Github page.

This template is based on the official static template of the Framework7 + VueJS plugin project. To get started, make sure, you have PhoneGap/Cordova installed and run:

PhoneGap

$ phonegap create myVueApp --template https://github.com/hollyschinsky/phonegap-template-framework7-vue
$ cd myVueApp
$ phonegap serve

or

$ open www/index.html

Cordova

$ cordova create myVueApp --template https://github.com/hollyschinsky/phonegap-template-framework7-vue
$ cd myVueApp
$ open www/index.html

Oğuz Özcan’s template

To download, check his Github page.

This one is Cordova-only, so make sure you have it installed:

npm i cordova -g

To kick of the project, simply do:

cordova create  com.example.projectname ProjectClassName --template cordova-template-framework7-vue-webpack

Important: ProjectClassName should be written without spaces.

Do you have additional templates and boilerplates you can suggest? Let us know in the comment :D

Follow me on social media

7 thoughts on “PhoneGap/Cordova templates for VueJS with Framework7

  1. Hi,

    I’m trying to embed google maps inside the F7+Vuejs app to search an address and to get Longitude and Latitude.

    What will be the best way to go ahead?

    Thanks & Regards.

  2. the template “https://github.com/hollyschinsky/phonegap-template-framework7-vue” was not found

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.