This page looks best with JavaScript enabled

Building Mobile Apps using VueJS. Also Cordova vs. Capacitor

 ·   ·  ☕ 6 min read

If given a choice to develop mobile apps, what is it going to be Capacitor, Cordova or something else altogether? Here are my glorious opinions on the matter.

The World of Mobile Apps - with VueJS

As fans of VueJS, we have more than few options for mobile app development. A few popular ones are -

  • Vue Native - based on React Native but enables on Vue
  • Native Script - has VueJS development option
  • Capacitor - based on web view and Cordova
  • Cordova - the age-old framework that is showing its age :)

All of these technologies bring the ease of Javascript and the power of familiarity / developer experience of developing on Vue for creating mobile applications.

I have built only a few mobile apps in my life time and supervised development of a few more, so my experience is somewhat limited. But, I have never let my maturity, or the lack thereof, come in the way of giving out advise, feedback and comments. Hence this post.

My Limited World View: The Native Experience

My exposure to Vue Native and Native Script is somewhat hazy.

Both platforms allow us to create actual, natively native applications.

  • Vue Native leverages React Native and builds a layer on top to provide development experience with Vue.
  • Nativescript Vue enables Vue layer to create apps using Nativescript - a layer that compiles Javascript applications to native apps. It acts very much like React Native

The resulting apps behave more or less like their counterparts developed on Java or Shift. So, they are uber cool.

Since both the platforms are somewhat mobile friendly - they are developed in a different thread as compared to a web app. They may or may not apply similar stylings and although promote reuse, they are a bit different and need some work to get them right. That additional work yields a superior end-product that loves mobile devices.

And, I really want my apps to love mobile devices.

I have tried, and tried hard to build apps that can pass all (user) tests with flying colors. But, each and every instance has been pretty disastrous for me -

  1. Problems with node versions
  2. Bugs that I could not track down and had to start stuff from scratch / rollback things
  3. My horrible tastes in styling
  4. The lack of time and resources for developing mobile apps
  5. My lack of interest in providing a superior user experience on mobile apps with animations, super performance, and such. I think this stems from the fall-back options that I describe below

I think I may have been spoilt more than I like to admit from my development experiences on Salesforce, Siebel and such COTS products.

My Limited World View: The Nowhere-Near-Native Experience That Works (TM)

Anyhow, we now transition to the latter two choices - Capacitor and its dad (older brother?), Cordova.

Two platforms that have made me a hero for my clients, a reliable partner for people who want to port their apps quickly to mobile apps at low costs - in short, a very lazy developer.

The platforms are amazing to say the least. The way they work is by enabling a web view that runs your web app but as an app.

Your app is like a mini browser that has access to pre-defined app functions like camera, calls, SMS etc. through the bridge provided by core Cordova/Capacitor or plugins.

The resulting app -

  1. Is slow
  2. Is typically heavier in resource usage as compared to native apps - disk space, memory, etc.
  3. Has limited options to work with device-native functions

But, these apps are also -

  1. Super fast to develop. We will get back to this point
  2. Easy to build consistent UI / experience across web/app (if you have such use cases)

What leads to my limited view: My Use Cases for Apps

I am not an Android/iOS apps guy. In fact the less I talk about my frontend/app design skills, the better.

I don’t build anything fancy as part of my current work or for hobby projects - these are just mobile apps that quickly bring “web apps” to the mobile device. My typical cycle will go like this -

  1. Receive requirement from client / think of an idea
  2. Discuss specifics on functions - user stories, epics and such
  3. Push out MVP/MSP as fast as possible - often in a matter of days or weeks
  4. Tune user experience and supporting processes to make the app even more awesome

I can carry on adventuring, go through a dance-routine with SMEs, get user acceptance and so forth - until we are actually ready to start discussing specifics of UX on mobile devices. Most of my projects are typically for businesses and enterprises, and so, I have exploited that opportunity to play safe to my weaknesses.

The life cycle fits in quite nicely with the Cordova/Capacitor experience because I don’t quite do mobile-first development in the true sense.

So, Vue + Cordova eh?

Yes, indeed.

Starting on a mobile project using Vue + Cordova (or Capacitor for that matter) is quite easy.

  1. vue create my-awesome-project more details here
  2. Add favourite styling libraries [well, add Vuetify, Buefy or use Quasar]
  3. Develop
  4. Develop some more
  5. vue add cordova
  6. Fine tune
  7. Jump to the next project

You follow a similar cycle for Capacitor, which is an awesome project built on top of Cordova and adds flexibility & even more features.

So.. Cordova vs. Capacitor?

I don’t quite have strong opinions on choosing one of the two frameworks.

I prefer Cordova since I find it easier to implement that in my development cycle and there are way more plugins in Cordova.

  • Easy to debug. No fidgeting around Android Studio - ‘the heaviest IDE of them all’
  • Faster to compile, recompile and re-re-compile. No Android studio = better performance
  • You can be sure that no one will have a fit with the generated icons (There are plugins like Quasar Icon Genie that make the process even more easier)
  • In general, Cordova seemed to me as more stable. Lesser errors when you change the application for the hundredth time, builds do not have surprises - no null exceptions in odd places or for specific devices :)
  • Easily target older releases. Capacitor needs API v25+
  • Better plugin support. Quite a few plugins are quite old (some ‘somewhat’ maintained).
  • Almost same feature set and debugging capabilities (yes, there are a few features in Capacitor that have no equivalent capabilities in Cordova)

What other options do I have?

If you are starting on mobile app development today, you should definitely try Flutter. It seems to be where all the “let’s change the world” guys are migrating to.

Hey, this post is not practical

Stay tuned for a few tutorials based on Vue + Cordova.

Stay in touch!
Share on

Prashanth Krishnamurthy
Prashanth Krishnamurthy
Technologist | Creator of Things