I am currently in the process of integrating Firebase (and Cloud Firestore) with my Vue 3 app. I have successfully installed the
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65030c170007041600255c4b554b57">[email protected]</a>Could someone please help me identify what I might be doing wrong?
firebase.js - contains my configuration and initialization settings
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
const firebaseApp = initializeApp({
// Firebase app configuration
})
const db = getFirestore(firebaseApp)
export default db
BooksService.js
import db from '../firebase'
import { collection } from 'firebase/firestore'
const books = collection(db, 'books')
class BooksService {
getAll () {
return books
}
// other methods
}
export default new BooksService()
HelloWorld.vue - a sample component to display a list of books from Firestore
<template>
<div>
<h1>All books</h1>
<ul>
<li v-for="book in books" :key="book">
{{ book }}
</li>
</ul>
</div>
</template>
<script>
import BooksService from '../services/BooksService'
export default {
data: () => ({
books: []
}),
mounted () {
this.books = BooksService.getAll()
}
}
</script>
Here are the warnings and errors I encountered:
[Vue warn]: Unhandled error during execution of render function
at <HelloWorld msg="Welcome to Your Vue.js App" >
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <HelloWorld msg="Welcome to Your Vue.js App" >
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'providers' -> object with constructor 'Object'
| property 'Map(8)' -> object with constructor 'Object'
| property 'platform-logger =>' -> object with constructor 'Object'
--- property 'container' closes the circle
at JSON.stringify (<anonymous>)
at toDisplayString (shared.esm-bundler.js?9ff4:434)
at eval (HelloWorld.vue?fdab:7)
at renderList (runtime-core.esm-bundler.js?5c40:5747)
at Proxy.render (HelloWorld.vue?fdab:3)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:424)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4257)
at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6656)
at flushJobs (runtime-core.esm-bundler.js?5c40:6895)