HomeMobile AppsExplore VueJs with Capacitor for cross platform mobile apps

Explore VueJs with Capacitor for cross platform mobile apps

In one of our projects we had to explore porting a vue web app to mobile ios/android app. The project budget was small and needed an option to export existing vue to app to mobile without too much overhead.

The client wanted to explore the mobile option briefly first before going for a full blown native app.

To solve this problem, we tried out https://capacitor.ionicframework.com/

Capacitor worked well in our inital tests and we will follow up with a full review later on.

These are the steps which we took,

https://capacitor.ionicframework.com/docs/getting-started/

Follow the above guide to install capacitor in your project.

Next for ios platform,  do the following https://capacitor.ionicframework.com/docs/ios/

after installing, we need to change the “www” folder for capacitor.

vue-cli produces build in “dist/” so we have to update in “capacitor.config.json”  the “webDir” path to “dist”

https://capacitor.ionicframework.com/docs/basics/configuring-your-app/

Rest all works well and when we launch the app, we were able to get the app running out of the box.

Here are few screens of vue start app running on ios and even electron!

 

 

Capacitor providers lot of native plugins which can be accessed via javascript like camera, push notification, geo location, network, share, etc

Capacitor is right now in beta stage, so there are many issues which can be faced during build.

e.g when i deployed the app on electron i got this issue

https://github.com/ionic-team/capacitor/issues/639

But since capacitor is maintained by ionic team, i have good hopes for this project in long run.

 

Leave a Reply

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

%d bloggers like this: