Quasar makes use of the Web Page Visibility API which lets you know when a website/app is visible or in focus.
AppVisibility API
Installation
// quasar.config.js
return {
framework: {
plugins: [
'AppVisibility'
]
}
}
Usage
// outside of a Vue file
import { AppVisibility } from 'quasar'
AppVisibility.appVisible // Boolean
// inside of a Vue file
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
// now use $q.appVisible (Boolean)
}
Watching for status change
<template>...</template>
<script>
import { useQuasar } from 'quasar'
import { watch } from 'vue'
export default {
setup () {
const $q = useQuasar()
watch(() => $q.appVisible, val => {
console.log(val ? 'App became visible' : 'App went in the background')
})
}
}
</script>