[{"data":1,"prerenderedAt":202},["ShallowReactive",2],{"blog-blueprints/vue-firebase":3},{"id":4,"title":5,"body":6,"category":182,"date":183,"dateModified":183,"description":184,"draft":185,"extension":186,"faq":187,"featured":185,"headerVariant":188,"image":187,"keywords":187,"meta":189,"navigation":190,"ogDescription":191,"ogTitle":187,"path":192,"readTime":193,"schemaOrg":194,"schemaType":195,"seo":196,"sitemap":197,"stem":198,"tags":199,"twitterCard":200,"__hash__":201},"blog/blog/blueprints/vue-firebase.md","Vue + Firebase Security Blueprint",{"type":7,"value":8,"toc":171},"minimark",[9,20,23,29,34,49,53,62,66,75,84,88,93,96,99,102,105,108,122,159],[10,11,12],"blueprint-summary",{},[13,14,15,19],"p",{},[16,17,18],"strong",{},"To secure a Vue + Firebase SPA,"," you need to: (1) replace test-mode Firestore rules with production security rules, (2) use VueFire for reactive auth state management, (3) configure Storage rules for file uploads, (4) add production domains to authorized domains, and (5) understand that vue-router guards are UX-only-Firestore rules are your security. This blueprint covers Vue 3 patterns with VueFire integration.",[21,22],"blueprint-meta",{},[24,25,26],"tldr",{},[13,27,28],{},"Vue SPAs with Firebase depend on Firestore Security Rules for protection. Key tasks: replace test-mode rules with production rules, use VueFire for reactive auth state, configure Storage rules, and remember that vue-router guards are UX-only-rules are your security.",[30,31,33],"h2",{"id":32},"firestore-rules-firebase","Firestore Rules Firebase",[35,36,38],"code-block",{"label":37},"firestore.rules",[39,40,45],"pre",{"className":41,"code":43,"language":44},[42],"language-text","rules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    match /users/{userId} {\n      allow read, update: if request.auth != null\n        && request.auth.uid == userId;\n    }\n    match /posts/{postId} {\n      allow read: if true;\n      allow write: if request.auth != null\n        && request.resource.data.authorId == request.auth.uid;\n    }\n  }\n}\n","text",[46,47,43],"code",{"__ignoreMap":48},"",[30,50,52],{"id":51},"vuefire-auth-vue","VueFire Auth Vue",[35,54,56],{"label":55},"composables/useAuth.ts",[39,57,60],{"className":58,"code":59,"language":44},[42],"import { useCurrentUser, useFirebaseAuth } from 'vuefire'\nimport { signInWithPopup, GoogleAuthProvider, signOut } from 'firebase/auth'\n\nexport function useAuth() {\n  const user = useCurrentUser()\n  const auth = useFirebaseAuth()\n\n  const login = () => signInWithPopup(auth!, new GoogleAuthProvider())\n  const logout = () => signOut(auth!)\n\n  return { user, login, logout }\n}\n",[46,61,59],{"__ignoreMap":48},[30,63,65],{"id":64},"router-guards-vue","Router Guards Vue",[35,67,69],{"label":68},"router/index.ts - UX only",[39,70,73],{"className":71,"code":72,"language":44},[42],"import { getCurrentUser } from 'vuefire'\n\nrouter.beforeEach(async (to) => {\n  if (to.meta.requiresAuth) {\n    const currentUser = await getCurrentUser()\n    if (!currentUser) {\n      return { path: '/login', query: { redirect: to.fullPath } }\n    }\n  }\n})\n",[46,74,72],{"__ignoreMap":48},[76,77,78],"warning-box",{},[13,79,80,83],{},[16,81,82],{},"Rules are your security."," In a Vue SPA, there's no server. Your Firestore rules are the only thing preventing unauthorized access.",[30,85,87],{"id":86},"security-checklist","Security Checklist",[89,90,92],"h4",{"id":91},"pre-launch-checklist","Pre-Launch Checklist",[13,94,95],{},"Firestore rules updated from test mode",[13,97,98],{},"Storage rules configured",[13,100,101],{},"Auth state managed with VueFire",[13,103,104],{},"Auth domains include production URL",[13,106,107],{},"Rules tested with emulator",[109,110,111,117],"related-articles",{},[112,113],"related-card",{"description":114,"href":115,"title":116},"With server-side rendering","/blog/blueprints/cursor-firebase-vercel","Nuxt + Firebase",[112,118],{"description":119,"href":120,"title":121},"Deep dive","/blog/guides/firebase","Firebase Security Guide",[123,124,125,130,133],"stack-comparison",{},[126,127,129],"h3",{"id":128},"alternative-stacks","Alternative Stacks",[13,131,132],{},"Consider these related blueprints:",[134,135,136,145,152],"ul",{},[137,138,139,144],"li",{},[140,141,143],"a",{"href":142},"/blog/blueprints/nextjs-firebase","Next.js + Firebase"," - With server-side rendering",[137,146,147,151],{},[140,148,150],{"href":149},"/blog/blueprints/vue-supabase","Vue + Supabase"," - Supabase/PostgreSQL alternative",[137,153,154,158],{},[140,155,157],{"href":156},"/blog/blueprints/react-firebase","React + Firebase"," - React framework alternative",[160,161,164,168],"cta-box",{"href":162,"label":163},"/","Start Free Scan",[30,165,167],{"id":166},"building-with-this-stack","Building with this stack?",[13,169,170],{},"Scan for rule issues.",{"title":48,"searchDepth":172,"depth":172,"links":173},2,[174,175,176,177,181],{"id":32,"depth":172,"text":33},{"id":51,"depth":172,"text":52},{"id":64,"depth":172,"text":65},{"id":86,"depth":172,"text":87,"children":178},[179],{"id":128,"depth":180,"text":129},3,{"id":166,"depth":172,"text":167},"blueprints","2026-02-13","Security guide for Vue + Firebase stack. Configure Firestore rules, handle authentication with VueFire, protect routes, and secure your Vue SPA.",false,"md",null,"purple",{"noindex":190},true,"Complete security configuration for Vue apps with Firebase.","/blog/blueprints/vue-firebase","9 min read","[object Object]","Article",{"title":5,"description":184},{"loc":192},"blog/blueprints/vue-firebase",[],"summary_large_image","cqb71eWhpiu9YdClqSSw_4Bdh_RiEr5z1AefhZYkjd8",1775843931982]