Capacitor APIs

Quasar CLI with Vite - @quasar/app-vite v3

Capacitor APIs

You can access native device features through Capacitor plugins.

A few examples include:

Camera
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 install the plugin in /src-capacitor, then synchronize the native projects:

cd src-capacitor
pnpm add @capacitor/geolocation
pnpm exec cap sync

Review the plugin’s installation and permission requirements for each target platform before using it.

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

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

<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import { Geolocation } from '@capacitor/geolocation'

  const position = ref('determining...')

  async function getCurrentPosition() {
    const newPosition = await Geolocation.getCurrentPosition()
    console.log('Current', newPosition)
    position.value = newPosition
  }

  let geoId

  onMounted(async () => {
    await getCurrentPosition()

    // we start listening
    geoId = await Geolocation.watchPosition({}, (newPosition, err) => {
      if (err) {
        console.error(err)
        return
      }

      console.log('New GPS position')
      position.value = newPosition
    })
  })

  onBeforeUnmount(async () => {
    // we do cleanup
    if (geoId !== void 0) {
      await Geolocation.clearWatch({ id: geoId })
    }
  })
</script>

Example: Camera

Install @capacitor/camera in /src-capacitor, run pnpm exec cap sync, and follow the Camera plugin’s platform setup before using it.

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

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

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

<script setup>
  import { ref } from 'vue'
  import { Camera, CameraResultType } from '@capacitor/camera'

  const imageSrc = ref('')

  async function captureImage() {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri
    })

    // The result will vary on the value of the resultType option.
    // CameraResultType.Uri - Get the result from image.webPath
    // CameraResultType.Base64 - Get the result from image.base64String
    // CameraResultType.DataUrl - Get the result from image.dataUrl
    imageSrc.value = image.webPath
  }
</script>

Some Capacitor plugins, such as Camera, have a web-based UI available when running in a browser. To enable these controls, add @ionic/pwa-elements to the main Quasar project:

pnpm add @ionic/pwa-elements

Then create a boot file to initialize them, for example /src/boot/capacitor.js:

import { defineBoot } from '#q-app'
import { defineCustomElements } from '@ionic/pwa-elements/loader'

export default defineBoot(() => {
  defineCustomElements(window)
})

Don’t forget to call the boot script in the quasar.config file:

boot: ['capacitor']

You can now use the Camera API in native Android and iOS builds as well as browser-based modes such as SPA and PWA, subject to the plugin’s platform support.

Example: Device

Install @capacitor/device in /src-capacitor, run pnpm exec cap sync, and review the Device plugin documentation before using it.

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

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

<script setup>
  import { ref, onMounted } from 'vue'
  import { Device } from '@capacitor/device'

  const model = ref('Please wait...')
  const manufacturer = ref('Please wait...')

  onMounted(() => {
    Device.getInfo().then(info => {
      model.value = info.model
      manufacturer.value = info.manufacturer
    })
  })
</script>

Caught a mistake?Edit this page in browser

1. Introduction

2. Capacitor APIs

3. Using a Capacitor API

3.1. Example: Geolocation

3.2. Example: Camera

3.3. Example: Device