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:

Building a Full-Featured Laravel Admin Dashboard with Filament

Building a full-featured Laravel admin dashboard with Filament

Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.

Kayode Adeniyi
Dec 20, 2024 ⋅ 5 min read
Working With URLs In JavaScript

Working with URLs in JavaScript

Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.

Joe Attardi
Dec 19, 2024 ⋅ 6 min read
Lazy Loading Vs. Eager Loading

Lazy loading vs. Eager loading

In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.

Njong Emy
Dec 18, 2024 ⋅ 5 min read
Deno logo over an orange background

How to migrate your Node.js app to Deno 2.0

Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]

Yashodhan Joshi
Dec 17, 2024 ⋅ 7 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