Capacitor APIs

You can hook into the native device APIs by using Capacitor APIs.

Capacitor APIs

A few examples of such APIs:

  • Background Task
  • Camera
  • Console
  • Device
  • Filesystem
  • Geolocation
  • Motion
  • Network
  • Push Notifications
  • Share
  • Splash Screen
  • Status Bar

Using a Capacitor API

Let’s learn by taking some examples, assuming you’ve added Capacitor mode to your Quasar project already.

Example: Geolocation

First step is to read the documentation of the Capacitor API that we want to use. We look at Capacitor’s Geolocation API.

Now let’s put this plugin to some good use. In one of your Quasar project’s pages/layouts/components Vue file, we write:

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<template>
  <div>
    GPS position: <strong>{{ position }}</strong>
  </div>
</template>

<script>
import { Plugins } from '@capacitor/core'

const { Geolocation } = Plugins

export default {
  data () {
    return {
      position: 'determining...'
    }
  },
  methods: {
    getCurrentPosition() {
      Geolocation.getCurrentPosition().then(position => {
        console.log('Current', position);
        this.position = position
      });
    }
  },
  mounted () {
    this.getCurrentPosition()

    // we start listening
    this.geoId = Geolocation.watchPosition({}, (position, err) => {
      console.log('New GPS position')
      this.position = position
    })
  },
  beforeDestroy () {
    // we do cleanup
    Geolocation.clearWatch(this.geoId)
  }
}
</script>

Example: Camera

First step is to read the documentation of the Capacitor API that we want to use. We look at Capacitor’s Camera API.

Now let’s put this API to some good use. In one of your Quasar project’s pages/layouts/components Vue file, we write:

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<template>
  <div>
    <q-btn color="primary" label="Get Picture" @click="captureImage" />

    <img :src="imageSrc">
  </div>
</template>

<script>
import { Plugins, CameraResultType } from '@capacitor/core'

const { Camera } = Plugins

export default {
  data () {
    return {
      imageSrc: ''
    }
  },
  methods: {
    captureImage () {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Uri
      })
      // image.webPath will contain a path that can be set as an image src.
      // You can access the original file using image.path, which can be
      // passed to the Filesystem API to read the raw data of the image,
      // if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
      this.imageSrc = image.webPath
    }
  }
}
</script>

Example: Device

First step is to read the documentation of the Capacitor API that we want to use. Look at the Capacitor’s Device API.

Now let’s put this API to some good use. In one of your Quasar project’s pages/layouts/components Vue file, we write:

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<template>
  <div>
    <div>Model: {{ model }}</div>
    <div>Manufacturer: {{ manufacturer }}</div>
  </div>
</template>

<script>
import { Plugins } from '@capacitor/core'

const { Device } = Plugins

export default {
  data () {
    return {
      model: 'Please wait...',
      manufacturer: 'Please wait...'
    }
  },
  mounted () {
    Device.getInfo().then(info => {
      this.model = info.model
      this.manufacturer = info.manufacturer
    })
  }
}
</script>