vue-cordova

Template by CloudCannon

Documentation

Getting Started

Add the NPM package to your project

npm install --save vue-cordova

Add the plugin to your Vue instance according to your setup

// CommonJS
var Vue = require('vue');
var VueCordova = require('vue-cordova');
Vue.use(VueCordova);

// import
import Vue from 'vue'
import VueCordova from 'vue-cordova'
Vue.use(VueCordova)

The package provides a global object Vue.cordova

console.log(Vue.cordova);

This object provides API to listen to Cordova events, and access plugins’ APIs.

Install

Make sure you have properly configured Cordova. As any other Cordova project, you need to :

  1. Include cordova.js in your index.html (see Troubleshooting below)
  2. Have any necessary plugin installed cordova plugin add <cordova-plugin-name-or-url>

If you are using Vue.js’s Webpack template, you can add the following code in main.js (code from vue-cordova-demo)

// add cordova.js only if serving the app through file://
if (window.location.protocol === 'file:' || window.location.port === '3000') {
  var cordovaScript = document.createElement('script')
  cordovaScript.setAttribute('type', 'text/javascript')
  cordovaScript.setAttribute('src', 'cordova.js')
  document.body.appendChild(cordovaScript)
}

Usage

Use Cordova events to run code at the right moment. Full list of events and compatibility table here.

// listen to Cordova event
Vue.cordova.on('deviceready', () => {
  console.log('Cordova : device is ready !');
});

Cordova plugins are also supported by vue-cordova. They will be made available in Vue.cordova.plugins array. Full supported plugins list below.

Most plugins will only be accessible after deviceready event has been triggered.

Demo

A repository with a full working demo is available to help you bootstrap a new project or cherry-pick working code.

Install the demo app
git clone git@github.com:kartsims/vue-cordova-demo.git

vue-cordova-demo

Troubleshooting

“My events don’t seem to be fired”

Cordova documentation isn’t obvious about it but you need to include the following script tag in your www/index.html.

<script src="cordova.js"></script>

“One of my plugins is not working properly”

Did you install the plugin in your Cordova project ?

cordova plugin add cordova-plugin-device

“The Vue.cordova.xxx object is null”

You probably need to wait for the deviceready event to fire. Keep calm and wrap your code in an event listener :

Vue.cordova.on('deviceready', () => {
  // your code here
});

Contribute

There are many Cordova plugins out there and you may help us getting them supported !

Add a new plugin

  1. Create a file named by the plugin in the plugins/ directory
  2. Add your plugin to the list in src/index.js
  3. Write a tiny doc in docs/_plugins/<plugin_name>.md
  4. PR ;)

Plugins

Camera

API to access the device's camera

Cordova Camera Plugin’s API is made available in Vue.cordova.camera, including methods and global options.

Sample code
Vue.cordova.camera.getPicture((imageURI) => {
  window.alert('Photo URI : ' + imageURI)
}, (message) => {
  window.alert('FAILED : ' + message)
}, {
  quality: 50,
  destinationType: Vue.cordova.camera.DestinationType.FILE_URI
})
Install
cordova plugin add cordova-plugin-camera
Source

cordova-plugin-camera

chrome-apps-sockets-tcp

This plugin provides TCP client sockets for Android and iOS.

chrome.sockets.tcp in Vue.cordova.chromeSocketsTcp. view https://developer.chrome.com/apps/sockets_tcp

Install
cordova plugin add cordova-plugin-chrome-apps-sockets-tcp
Source

cordova-plugin-chrome-apps-sockets-tcp

Contacts

Access the device's contact database

The contacts database is made available in Vue.cordova.contacts. You may then find a contact or create a new one.

Sample code
Vue.cordova.contacts.find(['displayName'], (contacts) => {
  window.alert('Contacts found : ' + contacts.length)
}, (error) => {
  window.alert('FAILED : ' + error.code)
})
Install
cordova plugin add cordova-plugin-contacts
Source

cordova-plugin-contacts

Device

Describes the device's hardware and software

Device information is made available in Vue.cordova.device.

Sample code
console.log(Vue.cordova.device)
/*
{
  "device": {
    "cordova": "4.2.1",
    "model": "x86_64",
    "platform": "iOS",
    "uuid": "XXX-XXX-XXX",
    "version": "9.3",
    "manufacturer": "Apple",
    "isVirtual": true,
    "serial": "unknown"
  }
}
*/
Install
cordova plugin add cordova-plugin-device
Source

cordova-plugin-device

Geolocation

Access the geolocation's GPS tracker

The GPS is made available in Vue.cordova.geolocation. You may then access the current device’s location or watch the current position.

Sample code
Vue.cordova.geolocation.getCurrentPosition((position) => {
  window.alert('Current position : ' + position.coords.latitude + ',' + position.coords.longitude)
}, (error) => {
  window.alert('FAILED Error #' + error.code + ' ' + error.message)
}, {
  timeout: 1000,
  enableHighAccuracy: true
})
Install
cordova plugin add cordova-plugin-geolocation
Source

cordova-plugin-geolocation

SMS

Send sms messages from the device

SMS is made available in Vue.cordova.sms. This is used only for sending SMS messages.

Sample code
let number = '1231231234'
let message = 'hello'
let options = {
  replaceLineBreaks: false,
  android: {
    intent: 'INTENT' // send SMS with native android SMS app
    // intent: '' // send SMS directly without opening another app
  }
}
let success = () => { console.log('success') }
let error = (e) => { console.log('error : ', e) }

Vue.cordova.sms.send(number, message, options, success, error)
Install
cordova plugin add cordova-sms-plugin
Source

cordova-sms-plugin