Sharing Top Content from the Angular-sphere.

Building a Mobile App with Cordova and Vue.js

  • This tutorial will show you how to create a simple mobile app which generates random words by using Cordova and Vue.js.
  • Modify the app info in config.xml to be about our random word generator: – – Like in any HTML file, add the Vue.js CDN to the bottom of www/index.
  • html: – – To allow the app to access the Vue.js library, we also need to add the following to the end of the Content Security Policy (CSP) tag in www/index.
  • js will now look like: – – Build it, plug-in your phone and run it: – – The app should look like this: – – Instead of picking a random word from a hard-coded list of words, the app can do a GET request to an API that generates random…
  • Get all the node modules for the dependencies defined in package.json: – – Add a hook to the bottom of config.xml to tell Cordova to bundle the random word component before building the rest of the app: – – Recall that scripts/vueify-build.

Learn how to build a random word generator using Cordova and Vue.js

Cordova is a framework that lets you create mobile apps using web technologies like HTML, Javascript and CSS. This allows you to target multiple platforms like Android and iOS using one code base. Although you still need platform-specific technologies like the Android SDK and XCode to build an app, you can create apps without having to write any Android or iOS code.

Since you can write code in HTML and Javascript, it’s very easy to use front-end Javascript libraries like Vue.js with Cordova.

This tutorial will show you how to create a simple mobile app which generates random words by using Cordova and Vue.js.

This will create the directory structure of a Cordova project:

This will add the Android platform library to the platforms directory (platforms/android).

It will also add the whitelist plugin which is used to specify which URLs the app can link to or open in the browser. The random word generator app will not need this functionality but you can read more about the whitelist plugin here.

The flag adds the platform engine to config.xml which is used by the cordova prepare command when initializing a Cordova project from a config.xml file.

Check if you have the requirements for building/running Android apps through Cordova:

If missing requirements,…

Building a Mobile App with Cordova and Vue.js