Nuxt3 minimal starter with Firebase Authentication integrated + PrimeVue

Authenticated server-side rendering with Nuxt 3 and Firebase 9

Features

• 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc. Are you new in Nuxt3? We recommend to look at the documentation.

• 🔥 The <script setup> syntax

• 🚠 Firebase v9 for Firebase Authentication services (client side authentication)

• 🚀 The PrimeVue for styled components

• 🚦 VeeValidate for input forms with i18n support

• 📥 APIs auto importing - for Composition API, VueUse and custom composables.

• 🦾 Mainly TypeScript

IDE

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

Setup

Make sure to install the dependencies

npm install

Firebase setup

First of all, you need to create Firebase acount and SDK setup. You need to create .env file with this content from Firebase project (security credentials should never be shared):

cp .env.example .env

Set service account environment variable:

FIREBASE_API_KEY=

Development

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

npm run dev

Preview

Delete .output folder and run below commands

npm run build
npx nuxi preview

Production

* Deploy nuxt with Firebase Hosting (Blaze Plan needed)

* Deploy nuxt with Vercel

* Deploy on others PaaS with Nitro

References

• Nuxt3 (Stable)
• Firebase 9
• Primevue
• VeeValidate 4