π₯ Firekit
π₯ Starter template for Vue 3, Vite, Tailwind CSS and Firebase
π§ͺ Working in Progress
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 -
π₯ 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