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:

Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 ⋅ 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 ⋅ 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 ⋅ 8 min read
Exploring Tailwind Oxide

Exploring Tailwind Oxide

Tailwind Oxide was introduced to address common issues that exist with Tailwind CSS, such as the complex setup process.

Marie Starck
Mar 22, 2024 ⋅ 5 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