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.
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.
Why framework 7
Framework 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.
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 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 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.
|Upload process||Via Monaca cli from local folder||Via GitHub repo|
|Max build per day||3||Unlimited|
|Max upload size||Less than 250 mb||Less than 50Mb|
|Max uploaded files||3 online projects||25 public and 1 private project|
|Max disk space||250 Mb||1300 Mb|
|build file size||Much bigger than PhoneGap||Much 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.