2022-03-02
2307
#firebase#vue
Timothy Olaleke
17118
Mar 2, 2022 ⋅ 8 min read

How to build and deploy a Vue.js app with Cloud Firestore and Vuefire

Timothy Olaleke Tim is a software developer, DevOps enthusiast with a passion for automation, and open source hobbyist. In his free time, he writes Google Cloud-related tutorials, makes open contributions on GitHub, and participates in developer communities.

Recent posts:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 ⋅ 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 ⋅ 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 ⋅ 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 ⋅ 19 min read
View all posts

15 Replies to "How to build and deploy a Vue.js app with Cloud Firestore and Vuefire"

  1. Because the firebase connection is made client side, all of the firebase config values, such as the API key, are exposed. Is this correct? If so, firebase should be accessed from a backend where those credentials are kept private.

    1. Hello, thanks for your comment. Firebase in this case is used as the backend itself and needs those credentials to connect with a frontend, however, I’ll go ahead and replace the configurations to use an .env file to access the Firebase configurations.

  2. Won’t including your firebase config in the frontend create a security problem? I mean, in your online demo I can clearly see this:

    {apiKey:”AIzaSyC9J2hIQ1XQFx5NAD6pr37xBwNPQCTZZwY”,authDomain:”employee-crud-app-a3a32.firebaseapp.com”,databaseURL:”https://employee-crud-app-a3a32.firebaseio.com”,projectId:”employee-crud-app-a3a32″,storageBucket:”employee-crud-app-a3a32.appspot.com”,messagingSenderId:”87613015171″,appId:”1:87613015171:web:e60ee5139c56e5fc02c7b6″}

    That will give me full access to the database, won’t it?

  3. I have never written a line of Vue in my life so I am trespassing according to the first prerequisite of this article.

    However… I have OPINIONS! 😝

    FIRST OF ALL. Ahem. First of all, great intro.

    Second you don’t need to censor your Firebase api settings screenshots. They are not secret data. You use security rules and auth to keep your Firebase safe. And if you don’t have rules in place then the api details are easily accessed so you’re not safe.

    Third, look up ServerTimestamp(). It’s a field value and the stable way to create date values considering your users might be in different locations.

  4. No it’s fine. Your keys are public, they are really just urls of where to send the request. The way it keeps you safe is that you log in using Firebase Auth which gives an ID back that only the user and the server knows.

    Then when you send requests in, you have Firestore rules on the database (and also the old db and the file storage api), which validate that the user owns the document or is authorised to make a request to view something.

    It does mean that with a cleverly crafted bit of editing you could access the admin screens of any app or pwa but you wouldn’t be able to select or submit the data to be able to do anything with it.

  5. Hey Mathew, thanks for the comment.

    I would be integrating security rules and auth for future posts. I also agree that ServerTimestamp() would be a better way to get the timestamp.

    I would be making some updated to effect this changes. Cheers

  6. You created a file firebaseConfig.js for the config, but in the code it is referred to as firebaseInit.js

  7. Is there any way to avoid doing the ‘firebase init’ every time, not to delete the whole ‘dist’ directory ?

  8. how to update application when if i need to change something? I need to start again from firebase init or something else?

  9. Thank you, Tim!
    I get this error message – “Property or method “scope” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.”
    Can’t find where it’s defined at all.
    What am I doing wrong?

  10. Not sure what’s wrong but there seems to be a problem installing element-ui – reports error:
    warning in ./src/plugins/element.js
    export ‘default’ (imported as ‘Vue’) was not found in ‘vue’ when compiling (npm run serve)

    which I think is something to do with vue version. How would I best fix this?

Leave a Reply