44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import PocketBase, { LocalAuthStore } from 'pocketbase'
|
|
import type { RecordModel } from 'pocketbase'
|
|
import type { TypedPocketBase } from '~/types/pocketbase.types'
|
|
|
|
/**
|
|
* Extends LocalAuthStore to make auth state reactive in Vue.
|
|
*
|
|
* PocketBase mutates its internal state directly on `this`, bypassing any
|
|
* reactive() proxy. Instead, `ref` holds a ShallowRef to the store instance,
|
|
* and triggerRef() manually notifies Vue after each state change — so consumers
|
|
* always read up-to-date values directly from the store without mirroring state.
|
|
*/
|
|
export class ReactiveAuthStore extends LocalAuthStore {
|
|
readonly ref = shallowRef(this)
|
|
|
|
override save(token: string, record: RecordModel | null) {
|
|
super.save(token, record)
|
|
triggerRef(this.ref)
|
|
}
|
|
|
|
override clear() {
|
|
super.clear()
|
|
triggerRef(this.ref)
|
|
}
|
|
}
|
|
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
const pocketbaseUrl = nuxtApp.$config.public.pocketbaseUrl
|
|
|
|
if (!pocketbaseUrl) {
|
|
throw new Error('Pocketbase config not set')
|
|
}
|
|
|
|
const pb = new PocketBase(pocketbaseUrl, new ReactiveAuthStore()) as TypedPocketBase
|
|
|
|
// Provide pocketbase client to the app
|
|
// Will be available eg. as `const { $pb } = useNuxtApp()`
|
|
return {
|
|
provide: {
|
|
pb
|
|
}
|
|
}
|
|
})
|