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:

Exploring the new Chakra UI MCP Server

Discover how the Chakra UI MCP server integrates AI into your editor, reducing context switching and accelerating development by fetching real-time documentation, component data, and code insights directly in-app.

Emmanuel John
Oct 9, 2025 ⋅ 6 min read
Build AI Agent Without Langchain JS

LangChain.js is overrated; Build your AI agent with a simple fetch call

Skip the LangChain.js overhead: How to build a Retrieval-Augmented Generation (RAG) AI agent from scratch using just the native `fetch()` API.

Ikeh Akinyemi
Oct 9, 2025 ⋅ 3 min read
the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 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