https://github.com/ecj222/nuxt-page-visibility

Page visibility module for Nuxt.js
https://github.com/ecj222/nuxt-page-visibility

nuxt-module nuxtjs pagevisibilityapi

Last synced: 6 days ago
JSON representation

Page visibility module for Nuxt.js

• Host: GitHub
• URL: https://github.com/ecj222/nuxt-page-visibility
• Owner: ECJ222
• Created: 2021-06-07T08:57:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-11T07:29:41.000Z (over 3 years ago)
• Last Synced: 2023-12-19T17:14:15.676Z (10 months ago)
• Topics: nuxt-module, nuxtjs, pagevisibilityapi
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/nuxt-page-visibility
• Size: 3.67 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🌫️ nuxt-page-visibility

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![License][license-src]][license-href]

> A Nuxt.js module to detect page visibility

## Table of Contents

- [Requirements](#requirements)

- [Install](#install)

- [Getting Started](#getting-started)

- [Usage](#usage)

- [License](#license)

## Requirements

- npm

- NuxtJS

- NodeJS

## Install

```bash

# 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.

```js

{

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

}

```

## Usage

1. Inject the module in your `nuxt.config.js` file. See [Getting Started](#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.

```js

{

  ...

  watch: {

    $visibility: {

      handler (page) {

        if (page.isVisible) {

          // do something

        } else {

          // do something

        }

      },

      deep: true

    }

  }

  ...

}

```

## License

This project is licensed under [MIT](./LICENSE)

[npm-version-src]: https://img.shields.io/npm/v/nuxt-page-visibility/latest.svg

[npm-version-href]: https://npmjs.com/package/nuxt-page-visibility

[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-page-visibility.svg

[npm-downloads-href]: https://npmjs.com/package/nuxt-page-visibility

[license-src]: https://img.shields.io/npm/l/nuxt-page-visibility.svg

[license-href]: https://npmjs.com/package/nuxt-page-visibility