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<Friend>;

  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

<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.

`<script setup>
import Dexie from 'dexie';

onMounted(async () => {

const db = new Dexie("MyDatabase");
db.version(1).stores({
    friends: '++id, name, age', // Primary key and indexed props
});

const id = await db.friends.add({
    name: 'John Smith__Mounted',
    age: '22',
});

console.log(`Friend successfully added. Got id ${id}`);

});

</script>`

Hope this helps.