CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-firestore
Sigmund
Sigmund

Reputation: 788

Vue.js Firestore save geopoint

there! I am very new to Vue.js and JavaScript at all. I am following some youtube guide to understand how it works, but I've faced with the problem when I can't add GeoPoint to my Firestore database.

Here's what I have:

firebaseInit.js

import firebase from 'firebase'
import 'firebase-admin'
import firebaseConfig from './firebaseConfig'
import { scrypt } from 'crypto';
const firebaseApp = firebase.initializeApp(firebaseConfig)
export default firebaseApp.firestore()

and script in related .vue file:

<script>
import db from "./firebaseInit";
 ...
 greet: function(event) {
  db.collection("events_test").add({
    name: this.name,
    ...
    location: new admin.firestore.GeoPoint(51.435454, 31.445456),
    phone: this.phone
    },
    originalUrl: this.originalUrl,
    createdAt: new Date(),
    updatedAt: new Date()
  })
  .then(docRef =>{
      alert(docRef.id)
  })
  .catch(error => {
       alert(error)
  });
  <script>

new admin.firestore.GeoPoint(51.435454, 31.445456) this initialization doesn't work for me. As well as new GeoPoint(lat,lng) and firebase.firestore.GeoPoint(lat,lng). I always get ReferenceError that it is not defined in Vue.Component. Please help.

Upvotes: 1

Views: 1215

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83191

By doing import 'firebase-admin' and location: new admin.firestore.GeoPoint(51.435454, 31.445456), you are trying to use the Admin SDK in a JavaScript/Web application (built with Vue.js).

This is not the goal of the Admin SDK which "lets you interact with Firebase from privileged environments", i.e. from a Server that you normally fully control. See the doc for more details: https://firebase.google.com/docs/admin/setup and https://firebase.google.com/docs/reference/admin/

In your case you should use the "standard" JavaScript SDK to create the GeoPoint (see https://firebase.google.com/docs/reference/js/firebase.firestore.GeoPoint) by doing:

<script>
import firebase from 'firebase/app'
import db from "./firebaseInit";
 ...
 greet: function(event) {
  db.collection("events_test").add({
    name: this.name,
    ...
    location: new firebase.firestore.GeoPoint(51.435454, 31.445456),
    phone: this.phone
    }
  ....

Note that you need to import firebase/app in your component.

Note that it seems there is an extra { in 

phone: this.phone
},
originalUrl: this.originalUrl,

Upvotes: 1

Related Questions