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 createcom.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
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.
Hi, I’ve never tried that before. Try to ask on http://forum.framework7.io there might be someone who has experience with this.
the template “https://github.com/hollyschinsky/phonegap-template-framework7-vue” was not found
@Anonymous If I follow the link it’s there
What dose open do ? Just open index file in browser?
@gabiluca It’s the same as if you’d double-click the file in Finder
Guys, please check out the latest 2018 version of this article with up-to-date templates list: https://wp.me/p6WYcX-13x