CODEWITHSUNDEEP
javascriptnode.jsfirebase-realtime-databasevue.js
Christopher L.Nash
Christopher L.Nash

Reputation: 82

initialize firebase 3.4.0 in Vue.js App

I'm having some trouble connecting firebase 3.4.0 to my Vue.js App. I am relatively new to Vue.js, and there is very little documentation out there for connecting to firebase 3.0. Here is my main.js file, and any insight would be greatly appreciated. 

import Vue from 'vue'
import App from './App'
import Firebase from 'firebase'

// Initialize Firebase
var config = {
  apiKey: 'AIzaSyBew0KrZus-fa1mtQ8KOCk-i7FFMvR0qHM',
  authDomain: 'gkeep-180a7.firebaseapp.com',
  databaseURL: 'https://gkeep-180a7.firebaseio.com',
  storageBucket: 'gkeep-180a7.appspot.com',
  messagingSenderId: '573966307891'
}
firebase.initializeApp(config)

firebase.database().ref('notes').set([
  {
    title: 'Hello World',
    content: 'Lorem Ipsum'
  }
])

firebase.database().ref('notes').on('value', (snapshot) => {
  let notes = snapshot.val()
  console.log(notes)
  window.alert(notes[0].title)
})
/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

Here are the two general errors I get in my NPM terminal when I try to run the webpack dev server:

ERROR in ./src/main.js

  ✘  http://eslint.org/docs/rules/no-unused-vars  'Firebase' is defined but       never used
  C:\Users\nash_\Documents\keepClone\keep-clone\src\main.js:3:8
  import Firebase from 'firebase'
          ^

  ✘  http://eslint.org/docs/rules/no-undef        'firebase' is not defined
  C:\Users\nash_\Documents\keepClone\keep-clone\src\main.js:13:1
  firebase.initializeApp(config)

Upvotes: 1

Views: 940

Answers (1)

SparK
SparK

Reputation: 5211

You imported Firebase but used firebase -- notice the capital F

Either change the import to: import firebase from 'firebase';

Or change all calls to Firebase.initializeApp or Firebase.database()

Upvotes: 2

Related Questions