Quasar makes use of the Web Page Visibility API which lets you know when a website/app is visible or in focus.
// quasar.config file
return {
framework: {
plugins: [
'AppVisibility'
]
}
}Usage
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 setup>
import { useQuasar } from 'quasar'
import { watch } from 'vue'
const $q = useQuasar()
watch(
() => $q.appVisible,
val => {
console.log(val ? 'App became visible' : 'App went in the background')
}
)
</script>