PhoneGap/Cordova templates for VueJS with Framework7

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

Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap

In my last post I showed you how to kick-off a new project with Framework7, VueJS and Webpack. So, I thought in the next video I could show you a real-world example on how to create an app based on these technologies.

In this screencast we will create a Twitter client for iOS and Android that will let you search for tweets through the official Twitter REST API.

Keep in mind that this is the first episode of a series since we won’t be able to create a full Twitter app in only one episode. Instead, we will cover one topic in each video. The series topics will probably look something like this:

  1. Setup project + Call Twitter search API methods (This video)
  2. Authenticate users using oauth + Render personal timeline
  3. Post tweets, retweet and replies
  4. Deploy as native app using Phonegap/Cordova

Enjoy the video series! :-)

Source code

How to get started with Framework7, VueJS and Webpack

TL;DR

$ npm install -g vue-cli
$ vue init valnub/vue-framework7-webpack-template my-project
$ cd my-project
$ npm install
$ npm run dev

Note: Replace my-project with the name of your project.

Check out my Github repo for template source code:
https://github.com/valnub/vue-framework7-webpack-template

In the following video I explain how to get started quick and easily with this Framework7 and VueJS template.

Video tutorial