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 setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Geolocation } from '@capacitor/geolocation'
const position = ref('determining...')
function getCurrentPosition() {
Geolocation.getCurrentPosition().then(newPosition => {
console.log('Current', newPosition)
position.value = newPosition
})
}
let geoId
onMounted(() => {
getCurrentPosition()
// we start listening
geoId = Geolocation.watchPosition({}, (newPosition, err) => {
console.log('New GPS position')
position.value = newPosition
})
})
onBeforeUnmount(() => {
// we do cleanup
Geolocation.clearWatch(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 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 not running natively but in a standard web browser. To enable these controls, add @ionic/pwa-elements to your project:
npm install @ionic/pwa-elementsThen 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']Now you are able to use the Camera API not just in native Android or iOS, but also in web based projects like a SPA or PWA.
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 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>