VueBase Kit — A Vue 3 + Firebase starter I built because I was tired of setting up the same thing over and over.

Every new project. Same setup. Auth, admin panel, file uploads, database rules, routing, i18n. Two weeks gone before you’ve written anything that actually matters.

I got tired of it, so I built this once — properly — and packaged it up.

Live Demo

See it running before you spend a cent:

Frontend: https://vue-landing-page-944a4.firebaseapp.com

Admin Panel: https://vue-landing-page-944a4.firebaseapp.com/admin

Login:
Email: admin@lestarithreads.com
Password: Admin12345

The demo is open — create, edit, delete whatever you want. It resets periodically.

What it actually is

Two separate Vue 3 apps — a frontend and an admin panel — sharing one Firebase backend. Everything is already wired together and working.

The frontend has a landing page, product catalog, blog, workshops/events section, and a video gallery. The admin panel lets you manage all of it — add products, publish articles, schedule workshops, upload videos. Changes show up on the frontend in real time.

Auth is set up. Security rules are written. File uploads work. Multi-language (English + Indonesian) is built in.

You configure your Firebase project, run npm install, and you have a working app. That’s the whole point.

What you can actually do with it

Ship an MVP this week, not next month. If you’ve been sitting on an idea because setup takes too long — this cuts that down to an afternoon. The boilerplate is done. Go build the thing only you can build.

Show clients a live demo before they’ve signed anything. Walk into a pitch with a fully working site instead of a mockup. Product catalog, blog, admin panel — all live. That closes deals.

Stop rebuilding for every client project. This is a solid foundation you can clone, configure, and customize. The patterns are consistent so modifications are fast.

Study real production code. Not a tutorial app, not a toy project. Composition API throughout, proper Firebase integration, security rules that actually work. If you want to level up your Vue 3 skills, reading good code is the fastest way.

What’s included

Frontend

• Landing page
• Product catalog with filtering
• Blog / articles
• Workshops & events
• Video gallery
• Responsive on all screen sizes
• English + Indonesian, easily add more

Admin Panel

• Dashboard
• Product management (add, edit, delete, images)
• Article CMS
• Workshop manager
• Video manager
• All changes are live instantly on the frontend

Firebase backend

• Email/password auth — configured and working
• Firestore with security rules — public read, admin-only write
• Storage with security rules — public view, authenticated upload

Everything else

• Complete source code for both apps
• 6-page setup guide (every step, with screenshots)
• 6 months email support
• Free updates

The stack

• Vue 3 — Composition API throughout, no Options API leftovers
• Firebase 9 — modern SDK, not the legacy version
• TailwindCSS + DaisyUI — easy to restyle, no fighting with CSS files
• Vue Router, Vuefire, vue-i18n — all configured, all working

Nothing outdated. No deprecated APIs. I use this stack myself so I keep it current.

Setup

20 minutes if you’ve used Firebase before. 40 minutes if it’s your first time. The guide walks through every step — create your Firebase project, paste in credentials, enable auth, apply the security rules, run the app.

npm install npm run dev

That’s step 6. By step 6 you have a working app.

On Firebase costs

The free Spark plan covers Auth and Firestore — good enough for development and small production apps. Storage (image/video uploads) needs the Blaze plan, but it’s pay-as-you-go and the free tier is generous. Most small projects won’t hit charges. You control your spend.

Honest about who this is for

This is for Vue developers who are comfortable with npm and Git and just want a solid starting point. If you’ve never touched Vue or Firebase, you’ll have a steeper learning curve — but the docs and support are there.

It’s not a no-code tool. It’s not flexible enough if you need a heavily custom admin from day one. And it only works with Firebase — if you need Postgres or a different backend, this isn’t it.

If you’re a Vue developer who’s done this setup dance too many times and just wants to skip to the good part — that’s exactly who I built it for.

VueBase Kit vs. free templates

Free templates aren’t really free — you spend 15–20 hours stitching them together. At some point that’s just paying with your time instead of money.

FAQ

Do I need Firebase paid plan?
For Storage (image/video uploads), yes. For everything else, the free tier is fine. The Blaze plan is pay-as-you-go — most small projects won’t hit real charges.

Can I use this for client projects?
Yes. Regular license covers one client project.

Are the frontend and admin the same app?
No — they’re separate Vue projects sharing one Firebase backend. Keeps things clean.

Can I change the design?
Yes. TailwindCSS makes restyling fast. Change a CSS variable, the whole app updates.

I’ve never used Firebase. Will I be okay?
The guide covers everything step by step. Firebase’s own docs fill any gaps. You’ll be fine.

What do the security rules actually do?
Firestore: anyone can read content, only authenticated admins can write. Storage: anyone can view files, only authenticated users can upload. Sensible defaults for this type of app.

Do you do custom work?
Yes — reach out directly if you need something built or want hands-on setup help.

Questions?

Ask before buying if you’re not sure it fits your project. I’d rather you know what you’re getting.

Requirements

• Node.js 16+
• Basic Vue 3 knowledge
• Firebase account (free tier works)
• VS Code or similar
• 20–40 minutes for setup

If this sounds like what you need — grab it.

The demo is live. The code is clean. The docs are thorough. If it fits your project, it’ll save you a week minimum.

Click “Add to Cart.”

Changelog

v1.0 (Current)

• Initial release
• Vue 3 with Composition API
• Firebase 9 integration
• Multi-language (EN/ID)
• Complete admin panel
• Product, blog, workshop, video management
• TailwindCSS + DaisyUI styling
• Comprehensive documentation with security rules

Last Updated: November 2025