How Do I Properly Initialize RxDB in a Vue App with global - vue.js

Question

I'm trying out RxDB for the first time in a Vue 3 app, and getting started is a bit more tricky than I expected (and it's probably my fault).
I installed RxDB with NPM in my project ("rxdb": "^9.20.0"), then I did this in my main.js file:
import { createRxDatabase, RxDatabase } from 'rxdb'
const db = await createRxDatabase({
name: 'MyApp', adapter: 'idb'
})
console.dir(db)
I then get this error:
Uncaught ReferenceError: global is not defined
So I check the docs and found this that I need a global polyfill like this:
(window as any).global = window;
(window as any).process = {
env: { DEBUG: undefined },
};
That looks to be an example using Typescript from Angular. When I try it in Vue, I then get this error:
Invalid assignment target
3 | import { createRxDatabase, RxDatabase } from 'rxdb'
4 |
5 | const db = await createRxDatabase({
| ^
6 | name: 'Avid', adapter: 'idb'
7 | })
10 minutes in and I'm already a mess. 😅 Can someone show me how to properly start up RxDB in a Vue app?

Answer 1

You can't use await in root.
It must be inside async function.
let db
async function initDb() {
db = await createRxDatabase(...)
}
initDb()