Page Visibility

Page Visibility API (opens new window).

State

The usePageVisibility function exposes the following reactive state:

import { usePageVisibility } from "vue-composable";

const { visibility, hidden } = usePageVisibility();

State	Type	Description
visibility	Ref(VisibilityState)	Current document visibility state
hidden	Ref(Boolean)	document.hidden

Example

Hidden: false

State: visible

You can change the state by switching tab - Check console

Check this link

Code

<template>
  <div>
    <h4>
      Hidden: <b>{{ hidden }}</b>
    </h4>
    <h4>
      State: <b>{{ visibility }}</b>
    </h4>
    <p>You can change the state by switching tab - Check console</p>
    <p>
      <a
        href="https://sqa.stackexchange.com/a/32355"
        target="_blank"
        rel="noopener noreferrer"
        >Check this link</a
      >
    </p>
  </div>
</template>

<script>
import { usePageVisibility, unwrap } from "vue-composable";
import { watch, reactive } from "@vue/composition-api";
export default {
  setup() {
    const { visibility, hidden } = usePageVisibility();
    watch(visibility, () => {
      console.log("visibility changed", {
        visibility: visibility.value,
        hidden: hidden.value
      });
    });
    return { visibility, hidden };
  }
};
</script>