App Visibility | Quasar Framework

Why donate

API Explorer

How to contribute

Options & Helpers

Style & Identity

Layout and Grid

Vue Directives

Quasar Plugins

Local/Session Storage

Meta

Notify

Vue Composables

Security

Quasar CLI (with Vite)

Quasar CLI (with Webpack)

Icon Genie CLI

App Extensions

Quasar Utils

App Visibility

Quasar makes use of the Web Page Visibility API which lets you know when a website/app is visible or in focus.

Quasar CLI

Vite plugin / Vue CLI

UMD

// 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>
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>

Caught a mistake?Edit this page in browser

1. Introduction

2. AppVisibility API

3. Installation

4. Usage

5. Watching for status change