Hybrid app development is growing stronger day by day. It’s much simpler and easy to learn than native app development. Basically, hybrid app frameworks give the ability to develop multi-platform apps to front-end developers. With hybrid app frameworks, one code base can run on different kinds of devices. This great feature makes it a top choice for industry solutions. Hybrid apps make the task less time consuming and less expensive to build an app. In this post, I will explain how to create Vue js hybrid app with framework 7. In addition to creating, we will also learn how to build and use it in a real device.

What’s hybrid app development

First of all, I have already explained briefly about it. So let’s go a little further into it and explore the hybrid app world.

Native apps are used since from the invention of smartphones. Basically, Java or kotlin are used for Android app development. iOS developers are using Objective-C or Swift. As we know 75% of the active smartphones either running on Android or iOS. So everyone wants to capture these two OS first for their business app. But it becomes much costlier to hire different developers for different platforms. Hybrid app development is started to solve this issue. It becomes much popular within a short span of time. You can create your own multi-platform apps with just basic knowledge of HTML, CSS and JavaScript. However, technology is growing rapidly so with the use of a JavaScript framework the hybrid app development becomes much easier. Maybe you all are familiar with Vue js. Its one of the most popular javascript framework.

I have found many peoples who are preferring React or Angular for hybrid app dev over Vue. There may be possible two reasons either you are choosing them because they are popular or you have a lack of resource about Vue. Let me solve this issues for you. I have already written an article about the reasons to choose Vue. So follow that one first to make sure Vue is worth choosing. Now if you are looking for some frameworks to develop mobile apps with Vue then have a look at Vue js mobile app frameworks.

Now if you are still worried about the popularity then here’s one smart infographic for you.

most popular javascript frameworks

Why framework 7

framework 7 vueFramework 7 is one of the great hybrid app development framework. Basically, it provides styling components and based on Cordova. This way we can use the features of Cordova and styling components of Framework 7 to build awesome apps.

There are many other alternates available to create Vue js hybrid app but I am choosing it for two reasons. It is really easy to use and has perfectly organized docs. In addition to all its much popular and has a huge community.

Finally, let’s move to the main part and create our Vue js hybrid app.

Vue js hybrid app development

First of all, we will need Node and Vue-cli for our project. So if you haven’t yet installed it now follow this guide Vue js advantages. If you are new to Vue then follow Vue js tutorial for absolute beginners first. Now let’s move to the directory where you want to start the project.

Project directory set up

We can include framework 7 in many ways like directly into HTML file but I prefer to use a template. Framework 7 provides 4 different templates to get started. I am going to use the browserify template. Follow the steps to set up the project directory.

First, you will need to clone the template. You can do it in two either using git bash or by downloading the zip. If you have git bash installed on your pc then run the command below.

git clone https://github.com/nolimits4web/Framework7-Vue-Browserify-Template projectName

Now if you don’t have git bash just go to Github then download and extract. Therefore our template is ready now go into the project directory and run the following command.

npm install

The above command will download and install the required packages. Once the command is finished running start the development server as follows.

npm run dev

It will automatically open the browser and run the project. So we have learned how to setup our development environment. As you know there is a huge list of things we can do with framework 7 and Vue. So it will be much better if you try and follow framework 7 docs.

So once your app is ready its time to build it. The next section will help you out in building your app.

Build the app

There are many different ways to build the app. Basically, we can divide the approaches into two ways Online build and offline Build. The offline build needs the various different group of tools. Each group is capable of building the app on one platform. So the online approach is much easier and less time-consuming. There are 2 popular platforms to build hybrid apps online. One is Monaca and another is PhoneGap build.

Monaca cloud build

monaca cloud buildMonaca is a great platform for building hybrid apps in the cloud. Mainly its a family member of Onsen UI. Onsen is also another great hybrid app development framework. Monaca provides different pricing options and luckily it provides a free package also. You can use the free package to build maximum 3 apps in 24 hours. If you are a beginner then 3 apps a day will be enough. In addition to all Monaca provides online IDE with live reloading, a powerful CLI and many more awesome tools.

Monaca will build your app and you will get the output inside the local project folder. It will be in the specified format so transfer it to your mobile or tab and you are ready to use it.

PhoneGap build

phonegap buildPhoneGap is one of the most popular hybrid app development frameworks. It provides a platform to build hybrid apps online. It also provides a different range of pricing plans. They also provide a free plan but with different features.

After you have built one project from your git repo it will show 3 different platforms under the project name. Click on the device logo you want the output for. It will be downloaded locally on your device. So now transfer it to your desired device and explore the great features of Vue js hybrid app.

let’s make the task easier for you to choose the best cloud build platform for your Vue js hybrid app.

Monaca vs PhoneGap

I have made a comparison table of the features of Monaca and PhoneGap free packages.

FeaturesMonacaPhoneGap
Upload processVia Monaca cli from local folderVia GitHub repo
Max build per day3Unlimited
Max upload sizeLess than 250 mbLess than 50Mb
Max uploaded files3 online projects25 public and 1 private project
Max disk space250 Mb1300 Mb
build file sizeMuch bigger than PhoneGapMuch smaller than Monaca

So, guys, that’s the end of this guide. In this, we have learned how to get started with Vue js hybrid app development with Framework 7. I hope you have liked this post so don’t forget to share it with your friendlier Vue developers.


Subham Mitra

A coder who loves to solve real-world problems through coding.

1 Comment

Xmas wallpapers · December 12, 2017 at 2:59 pm

Hey there! I’ve been reading your blog for
some time now and finally got the bravery to go ahead
and give you a shout out from New Caney Tx! Just
wanted to say keep up the excellent job!

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.