Nuxt•5mo ago

How to share an indexedDb

Hello friends, pretty new to nuxt and js/ts, so maybe a trivial question there, forgive me. How do I instantiate an indexedb and access it through all of my nuxt app ? Many thanks

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
    isHydrated.value = true

    const db_open_request = window.indexedDB.open("app");
    db_open_request.onerror = (event) => {
      let indexedDb = false
    };
    db_open_request.onupgradeneeded = (event) => {
      const db = event.target!.result
      const objectStore = db.createObjectStore("data");
    }
    db_open_request.onsuccess = (event) => {
      let ddb = event.target!.result // how do I share this
      let indexedDb = true // and maybe this too

      ddb.onerror = (event: Event) => {
        console.error(`Database error: ${event.target!.errorCode}`);
      };
    };

  })
})

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
    isHydrated.value = true

    const db_open_request = window.indexedDB.open("app");
    db_open_request.onerror = (event) => {
      let indexedDb = false
    };
    db_open_request.onupgradeneeded = (event) => {
      const db = event.target!.result
      const objectStore = db.createObjectStore("data");
    }
    db_open_request.onsuccess = (event) => {
      let ddb = event.target!.result // how do I share this
      let indexedDb = true // and maybe this too

      ddb.onerror = (event: Event) => {
        console.error(`Database error: ${event.target!.errorCode}`);
      };
    };

  })
})

30 Replies

pyplacca•5mo ago

Check out localforage. Makes working with IndexedDB a breeze. Pair it with a composable - or a plugin as you have - to achieve your desired result. here's a modified version using useState

export default defineNuxtPlugin((nuxtApp) => {
  const idb = useState<{
    ddb: IDBDatabase | undefined,
    indexedDB: boolean
  }>('idb', () => ({
    ddb: undefined,
    indexedDB: false,
  }))

  nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
    // isHydrated.value = true

    const db_open_request = window.indexedDB.open('app')
    db_open_request.onerror = (event) => {
      idb.value.indexedDB = false
    }
    db_open_request.onupgradeneeded = (event) => {
      const db = event.target!.result
      const objectStore = db.createObjectStore('data')
    }
    db_open_request.onsuccess = (event) => {
      const ddb = event.target!.result
      idb.value.ddb = ddb
      idb.value.indexedDB = true

      ddb.onerror = (event: Event) => {
        console.error(`Database error: ${event.target!.errorCode}`)
      }
    }
  })

  return {
    provide: {
      idb,
    },
  }
})

export default defineNuxtPlugin((nuxtApp) => {
  const idb = useState<{
    ddb: IDBDatabase | undefined,
    indexedDB: boolean
  }>('idb', () => ({
    ddb: undefined,
    indexedDB: false,
  }))

  nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
    // isHydrated.value = true

    const db_open_request = window.indexedDB.open('app')
    db_open_request.onerror = (event) => {
      idb.value.indexedDB = false
    }
    db_open_request.onupgradeneeded = (event) => {
      const db = event.target!.result
      const objectStore = db.createObjectStore('data')
    }
    db_open_request.onsuccess = (event) => {
      const ddb = event.target!.result
      idb.value.ddb = ddb
      idb.value.indexedDB = true

      ddb.onerror = (event: Event) => {
        console.error(`Database error: ${event.target!.errorCode}`)
      }
    }
  })

  return {
    provide: {
      idb,
    },
  }
})

Wild•5mo ago

Thanks you very much, I'll try that ! I didn't know of this return provide syntax I couldn't use idb in my stores (not found), so I used a composable and it seems to work fine ! Thanks mate

pyplacca•5mo ago

make sure the idb plugin is registered before the store

Wild•5mo ago

Sorry I don't know how to check that ^^

pyplacca•5mo ago

you can rename the plugin to 1.{name}.ts the number prefix dictates the order in which the plugins are registered. if no numbers is specified, the plugins will be registered in alphabetical order. https://nuxt.com/docs/guide/directory-structure/plugins#registration-order

Wild•5mo ago

I saw that, but the stores are in their own folder

pyplacca•5mo ago

can you share a screenshot of your directory structure?

Wild•5mo ago

sure !

pyplacca•5mo ago

how are the stores registered? Pinia?

Wild•5mo ago

yes

pyplacca•5mo ago

wait, are you in ssr mode?

Wild•5mo ago

probably so

pyplacca•5mo ago

or is it a SSG site?

Wild•5mo ago

I have an hydration stuff to fill the store only on the client

pyplacca•5mo ago

hmmm. since Pinia runs on the server side as well I'm thinking the plugin won't work because you're only registering it on the client side. I'm not sure how the hydration stuff you've got affects Pinia's ssr capabilities but I get idb.client.ts makes sense because it's a browser API

Gaming

Programming

How to share an indexedDb