Skip to content

ECJ222/nuxt-page-visibility

Repository files navigation

🌫️ nuxt-page-visibility

npm version npm downloads License

A Nuxt.js module to detect page visibility

Table of Contents

Requirements

  • npm
  • NuxtJS
  • NodeJS

Install

# npm
$ npm install nuxt-page-visibility

# yarn
$ yarn add nuxt-page-visibility

Getting Started

Add 'nuxt-page-visibility' to the modules section of your nuxt.config.js file.

{
  modules: ["nuxt-page-visibility"];
}

Usage

  1. Inject the module in your nuxt.config.js file. See Getting Started.
  2. this.$visibility is now available in your components. Note that $visibility returns an object with two properties one is isVisible which we would use to check if a user is focused on a page or not, While the other isSupported is used to check if the browser supports the Page Visibility API.
{
  ...
  watch: {
    $visibility: {
      handler (page) {
        if (page.isVisible) {
          // do something
        } else {
          // do something
        }
      },
      deep: true
    }
  }
  ...
}

License

This project is licensed under MIT