0

Estoy intentando configurar vuejs y firebase realtime en codesanbox pero me esta generando el siguiente error.

el proyecto en firebase ya esta configurado y he copiado la configuración de firebase realtime siguiendo los pasos de los diferentes post pero aun no consigo la conexion de firebase con vuejs usando la libreria vuefire.

Soy nuevo en este ambiente de programación con vue y firebase agradezco cualquier colaboración de parte de la comunidad stack.

import Vue from "vue";
import { firestorePlugin } from "vuefire";
import toastr from "vue-toasted";
import app from "./App";
import Firebase from "firebase/app";

Vue.use(firestorePlugin);
Vue.config.productionTip = true;
let config = {
  //Datos de configuración
  apiKey: "AIzaSyDeFXqd_3gcFp7JVlzYiYzWukj76fZFgyo",
  authDomain: "vue-js-firebase-final.firebaseapp.com",
  databaseURL: "https://vue-js-firebase-final.firebaseio.com",
  projectId: "vue-js-firebase-final",
  storageBucket: "vue-js-firebase-final.appspot.com",
  messagingSenderId: "593435890388",
  appId: "1:593435890388:web:56294860e8c9964610a141"
};

app = Firebase.initializeApp(config);
let db = app.database();
let compras = db.ref("compras");

export default {
  name: "app",
  firebase: {
    compras: compras
  },
  data() {
    return {
      compra_nueva: {
        nombre: "",
        cantidad: ""
      }
    };
  }
};

[error de conexión firebase-realtime con vuejs

1
  • No estoy seguro porque no uso codesandbox, pero asumo que el problema es por ahí. Has probado creando el proyecto desde el CLI de Vue? el 13 may. 2020 a las 2:35

1 respuesta 1

0

El error que te sale en la consola, es porque estás reescribiendo el valor app y por ser un nombre de importación no te permite.

Como estas usando Realtime Database tendrías que usar el plugin de rtdbPlugin en vez del firestorePlugin.

Teniendo en cuenta eso, podrías hacerlo de la siguiente manera:

import Vue from "vue";
import { rtdbPlugin } from "vuefire";
import firebase from "firebase/app";
import "firebase/database";

Vue.use(rtdbPlugin);

Vue.config.productionTip = true;

// Reemplazar datos de tu proyecto en Firebase 
firebase.initializeApp({
  apiKey: "<apikey>",
  authDomain: "<authDomain>",
  databaseURL: "<databaseURL>",
  projectId: "<projectId>",
  storageBucket: "<storageBucket>",
  messagingSenderId: "<messagingSenderId>",
  appId: "<appId>",
});

let db = firebase.database();
let compras = db.ref("compras");

new Vue({
  // ...
 
  data() {
    return {
      compra_nueva: {
        nombre: "",
        cantidad: ""
      }
    };
  },

  firebase: {
     compras: compras
  },
});

Aquí te dejo la documentación https://vuefire.vuejs.org/vuefire por si quieres darle una chequeada 😃

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.