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.
Look at the Nuxt 3 documentation to learn more.
Make sure to install the dependencies:
npm i
Start the development server on http://localhost:3000
:
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Check out the deployment documentation for more information.