How to use dexie in nuxt3?

[gusdn0828]

I wrote db.ts and inserted it in composables folder. and, I adjusted the dexie in nuxt3, but i got the error like this.

I imported the module itself. it worked well. I think that composable way is bug or something wrong.

Below is source code of composable way. Please help me!

Uncaught (in promise) SyntaxError: Identifier 'MySubClassedDexie' has already been declared

• db.ts

  
  // db.ts
  import Dexie, { Table } from "dexie";

export interface Friend { id?: number; name: string; age: number; }

export class MySubClassedDexie extends Dexie { // 'friends' is added by dexie when declaring the stores() // We just tell the typing system this is the case friends!: Table;

constructor() { super("myDatabase"); this.version(1).stores({ friends: "++id, name, age", // Primary key and indexed props }); } }

const db = new MySubClassedDexie(); export default db;

- App.vue
```javascript
<template>
  <fieldset>
    <legend>Add new friend</legend>
    <label>
      Name:
      <input v-model="friendName" type="text" />
    </label>
    <br />
    <label>
      Age:
      <input v-model="friendAge" type="number" />
    </label>
    <br />
    <button @click="addFriend">Add Friend</button>
    <p>{{ status }}</p>
  </fieldset>
</template>
<script setup lang="ts">
import { ref } from "vue";

const status = ref("");
const friendName = ref("");
const friendAge = ref(20);
const addFriend = async () => {
  try {
    // Add the new friend!
    const id = await db.friends.add({
      name: friendName.value,
      age: friendAge.value,
    });

    status.value = `Friend ${friendName.value}
          successfully added. Got id ${id}`;

    // Reset form:
    friendName.value = "";
    friendAge.value = 10;
  } catch (error) {
    status.value = `Failed to add
          ${friendName.value}: ${error}`;
  }
};
</script>

[asadmalik]

Use Dexie related code in onMounted callback.

``

Hope this helps.