🔥 Firekit

🔥 Starter template for Vue 3, Vite, Tailwind CSS and Firebase

🧪 Working in Progress

🖥 Online Preview

App Features

• 🔐 Firebase Auth
• 🔥 Firebase Firestore
• 💾 Firebase Storage
• 👱 Profile Management
• 🗒️ CRUD for Private Notes

Project Features

• 💚 Vue 3 - Composition API, components auto importing, modules, etc.

• ⚡️ Vite - Instant HMR

• 🎨 TailwindCSS - Utility CSS Framework

• 😃 Use icons from any icon sets in HeroIcons

• 🔥 The <script setup> syntax

• 🍍 State Management via Pinia

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

• Histoire - for writing stories

Plugins

Vue Modules

• VueUse - collection of useful composition APIs
• Pinia - intuitive, type safe, light and flexible Store for Vue.
• VueFinalModal - tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
• Vue-toaster - toast notification plugin for vue 3
• Vee-validate - form validation for Vue
• yup - object schema validation
• Vitest - Vue 3 testing framework powered by Vite

Firebase 9 SDK

• firebase/auth - Firebase Auth
• firebase/firestore - Firestore
• firebase/storage - Storage

IDE

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

Try it now

Online

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit leighayanid/firekit-template <your-app-name>
cd <your-app-name>
npm i or yarn

Create a Firebase project. Copy and replace the configuration keys inside main.js

For Firestore security, paste the following into the console rules tab:

// Allow read/write access on all documents to any user signed in to the application
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

For storage, enable the storage feature in the Firebase console. Create a folder name 'profile'.

To secure the storage, paste the following into the console storage rules tab:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

That's it! You can now run the app and see it in action.

If you like it, please star the repo and share it with your friends.

Created by leighayanid ❤️

Readme template by antfu