Web Push with Nuxt

• https://web-push-nuxt.vercel.app/

Project Structure

Web Push

• web-push

Frontend

Framework

• Nuxt

UI

• Vuetify
• vite-plugin-vuetify

PWA

• Vite PWA

Backend

Server

• Vercel

Runtime

• Node.js

Database

• PlanetScale
• MySQL

ORM

• Drizzle

Package Manager

• pnpm

Setup

pnpm i

Development Server

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

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Check out the deployment documentation for more information.

PWA

https://vite-pwa-org.netlify.app/assets-generator

Icon Generator

https://cthedot.de/icongen

Environment Variables

Using Vercel, you can set environment variables in the project settings.

• https://vercel.com/docs/projects/environment-variables

Variables

• VAPID_PUBLIC_KEY
• VAPID_PRIVATE_KEY
• VAPID_EMAIL
• DATABASE_URL

VAPID Keys

pnpx web-push generate-vapid-keys --json

Database URL

Using PlanetScale, you can get the database URL in the database settings.

https://planetscale.com/docs/concepts/connection-strings

Help

Bun Installation

brew tap oven-sh/bun
brew install bun

Reference: https://github.com/oven-sh/homebrew-bun