CODEWITHSUNDEEP
firebasefirebase-realtime-databasevue.js
Kira
Kira

Reputation: 1603

Vue.js with Firebase

I'm trying to create a simple read/write app with Vue.js, VueFire and Firebase.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>App</title>

  <!-- Vue -->
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <!-- VueFire -->
  <script src="https://cdn.jsdelivr.net/vuefire/1.1.0/vuefire.min.js"></script>
  <!-- Firebase -->
  <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>

</head>

<body>
  <div id="app">
    <ul>
      <li v-for="story in stories">
        {{ story.body }}
      </li>
    </ul>
  </div>

  <script type="text/javascript" src="app.js"></script>
</body>
</html>

And my .js file is:

// Initialize Firebase
var config = {
  apiKey: "*****************************",
  authDomain: "************.firebaseapp.com",
  databaseURL: "https://************.firebaseio.com",
  storageBucket: "",
  messagingSenderId: "***********"
};

var firebaseApp = firebase.initializeApp(config)
var db = firebaseApp.database()

var app = new Vue({
  el: '#app',
  props: ['stories']
  firebase: {
    anObject: {
      source: db,
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () {}
    }
  }
})

I get an error where firebase is not recognized. I don't get why is that. VueFire is imported so that should work, right?

Upvotes: 2

Views: 1185

Answers (1)

HowlingFantods
HowlingFantods

Reputation: 832

Change the order of the script tags so that anything your custom js depends on comes before it.

Using script tags in an html doc attaches all references to the global window object, but the order in which the tags appear is the order in which they are made available. You are referencing window.firebase before it exists.

Upvotes: 2

Related Questions