Nuxt.js: Error when use vuejs with vuefire, firebase: The client-side rendered virtual DOM tree is not matching server-rendered content

[lyquocnam]

hi everyone, when use firebase with vuefire normally, it will show error:

index.vue:

<template>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Cover</th>
                <th>Title</th>
                <th>Author</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="book in books">
                <td><img v-bind:src="book.imageUrl" v-bind:alt="book.title" height="150" width="100" /></td>
                <td>{{ book.title }}</td>
                <td>{{ book.author }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import Vue from 'vue';
    import VueFire from 'vuefire';
    import Firebase from 'firebase';

    Vue.use(VueFire);

    let app = null;
    if (Firebase.apps.length > 0)
        app = Firebase.app();
    else
        app = Firebase.initializeApp({
            apiKey: "AIzaSyBRdKK4mC-oYtSZj3g3UraiYjv4h3_E_yc",
            authDomain: "books-2af20.firebaseapp.com",
            databaseURL: "https://books-2af20.firebaseio.com",
            storageBucket: "books-2af20.appspot.com",
            messagingSenderId: "129775003419"
        });

    const db = app.database();
    const booksRef = db.ref('books');

    let result = {
        firebase: {
            books: booksRef
        },
    }


    export default result;

</script>

_{This question is available on Nuxt.js community (#c128)}

[Atinux]

Actually Vuefire is not compatible with Nuxt.js, you have to use the firebase API directly, see https://github.com/vuejs/vue-hackernews-2.0

[stursby]

@lyquocnam (cc @Atinux) You can however use the Firebase REST API to get Firebase & Nuxt working together, and use axios to fetch the data directly from https://books-2af20.firebaseio.com/.json.

Here's a DEMO --> https://nuxt-firebase-demo.now.sh

And you can see the SOURCE HERE --> https://nuxt-firebase-demo-bvrvkhbzlq.now.sh/_src

For reference, your pages/index.vue could look something like this:

<template>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Cover</th>
        <th>Title</th>
        <th>Author</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(book, key) in books">
        <td>
          <nuxt-link :to="{ path: `/books/${key}` }">
            <img v-bind:src="book.imageUrl" v-bind:alt="book.title" height="150" width="100" />
          </nuxt-link>
        </td>
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
        <td>
          <nuxt-link :to="{ path: `/books/${key}` }">Learn More &rarr;</nuxt-link>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from 'axios'

export default {
  async data() {
    const { data } = await axios.get('https://books-2af20.firebaseio.com/.json')
    console.log(data.books)
    return {
      books: data.books
    }
  }
}
</script>

Hope this helps! 🍻

[stursby]

@Atinux Maybe I'll make a "with-firebase" demo in the examples folder. I'm pretty sure the firebase npm package is isomorphic so we shouldn't have to only rely on the REST API (even though that seems to work just fine). Any specifics for submitting a PR?

[Atinux]

Would be nice to have a with-fire base example @stursby

You can stick with the REST API since it'/ easier to get started with :)

[mkharibalaji]

@Atinux
is this the problem with vuefire or firebase ? .I haven't kickstarted my project yet,just as a question is it good to go with firebase and nuxt.js without using vuefire and or rest api ?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.