Nuxt 3 template - Firebase Version

A Firebase template for Nuxt 3. A few examples inside 🙌

Online Preview

More templates

Basic Version

What's included

• Tailwind CSS
• HeadlessUI
• Pinia
• VueUse
• Unlighthouse
• Nuxt Image
• Color Mode
• Uno CSS Icons
• VueFire
• Prettier (configured)
• ESLint (configured)
• Vite
• TypeScript

Nuxt 3 documentation

Highly recommended documentations

VueFire

Firestore

Auth

How to setup Firebase

Open nuxt.config.ts file and add your Firebase config.

vuefire: {
      // Add your config here ↓
      config: {
        apiKey: "...",
        authDomain: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "...",
        measurementId: "...",
        }
      // ...
    },

How to install more icon packages

Available collections here

yarn add --dev @iconify-json/[the-collection-you-want]

// example
yarn add --dev @iconify-json/mdi

// or install ALL of them
yarn add --dev @iconify/json

Setup

Make sure to install the dependencies:

You can use any package manager you want (yarn, npm, pnpm, etc.)

# yarn
yarn install

Development Server

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

# yarn
yarn dev

Check out the deployment documentation for more information.