@nuxt/screensaver

Screensaver component for Nuxt 3 Apps. Dispalys a overlay after idle time. Use component slot to show whatever you want inside.

Features

• Screensaver component to show and do whatever you want after idle time

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @nuxt/screensaver

add to nuxt.config

  modules: ['@nuxt/screensaver'],

Add Component to app.vue with optional idleOptions

<Screensaver :idle-options="idleOptions">
  Whatever you want to show in the screensaver ...
</Screensaver>

const idleOptions = {
  // idle time in ms
  idle: 60000,
  // events that will trigger the idle resetter
  events: ["mousemove", "mousedown", "keydown", "touchstart"],
  // callback function to be executed after idle time
  onIdle: () => {
    console.log("idle");
    // do whatever you want here
  },
  // callback function to be executed after back form idleness
  onActive: () => {
    console.log("active");
    // do whatever you want here
  },
};

That's it! Screensaver-Component will appears after idle time ✨

Contribution

This module is based on idle-js.

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release