danielwaltz / nuxt-push-notifications

A simple as possible example of how to use web push notifications using Nuxt 3

Nuxt Push Notifications

This is a simple example of how to use push notifications in a Nuxt 3 application. It uses the web-push package to send push notifications to the client and Nitro/Unstorage to save subscriptions.

To test, generate a VAPID key pair using the following command npx web-push@latest generate-vapid-keys and add the keys to an .env.local file:

NUXT_PUSH_VAPID_PRIVATE_KEY=<private_key>
NUXT_PUBLIC_PUSH_VAPID_PUBLIC_KEY=<public_key>

Then run the application and access http://localhost:3000. From there you are able to subscribe to push notifications and send a test notification.

Nuxt

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

npm i

Development Server

Start the development server on http://localhost:3000:

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.