🌫️ nuxt-page-visibility

A Nuxt.js module to detect page visibility

Table of Contents

• Requirements
• Install
• Getting Started
• Usage
• License

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