Vue 3 provide / injection use example

[ricardolenzi]

Hello,

I'm trying to follow the VUE framework hook example :

<script lang="ts" setup>
import { PGlite } from '@electric-sql/pglite'
import { providePGlite } from '@electric-sql/pglite-vue'

const db = new PGlite()
providePGlite(db)
</script>
...

But it seens that pglite-vue doesn't export providePGlite:

SyntaxError: The requested module 'https://192.168.15.148:5173/node_modules/.vite/deps/@electric-sql_pglite-vue.js?v=a2b78ab6' doesn't provide an export named: 'providePGlite'

When looking the pglite-vue script tests source code repository, providePGlite and injectPGlite are returned by the makePGliteDependencyInjector, not imported, like this:

<script setup>
import { PGlite } from '@electric-sql/pglite'
import { makePGliteDependencyInjector } from '@electric-sql/pglite-vue'

const db = PGlite()
const { providePGlite, injectPGlite } = makePGliteDependencyInjector(db)
providePGlite(db)
</script>

Is it the documentation outdated?
Could someone give me a simple example using Composition API of how to use injectPGlite inside a component?

Many thanks,
Ricardo.

[ricardolenzi]

I found that I don't need the pglite-vue extension to inject the database for use in components. Just use the provide and inject from vue and it works very well:

Main script App.vue:

<script setup>
import { ref, provide } from "vue"
import { PGlite } from "@electric-sql/pglite"
import MyComponent from "./components/MyComponent.vue"

const db = new PGlite()
provide('db', db)
</script>

<template>
   <MyComponent />
</template>

MyComponent.vue:

<script setup>
import { ref, inject } from 'vue';

const db = inject('db')
db.query('select version()').then(ret => console.log(ret.rows[0].version))
</script>

Here a simple example of how it works:
https://stackblitz.com/edit/vitejs-vite-rta4bc

Maybe someone can explain what the purpose of the providePGlite and injectPGlite on the pglite-vueextension, since vue's native provide/inject do the job well.