Timothy Olaleke
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:

Qwik Adoption Guide Overview Examples And Alternatives

Qwik adoption guide: Overview, examples, and alternatives

Qwik’s focus on performance, innovative features, and commitment to DX make it a fantastic choice for building high-performance web apps.

Fimber Elemuwa
Jun 18, 2024 ⋅ 10 min read
Exploring The Css Display Property A Deep Dive

Exploring the CSS :display property: A deep dive

Understanding the CSS :display property and its values is important for creating well-organized and attractive websites.

Ibadehin Mojeed
Jun 18, 2024 ⋅ 12 min read
7 TUI Libraries For Creating Interactive Terminal Apps

7 TUI libraries for creating interactive terminal apps

When writing applications, a good user interface is just as important as the actual app’s functionality. A good user interface […]

Yashodhan Joshi
Jun 14, 2024 ⋅ 18 min read
Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 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:


    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