I'm using Dexie for my vue project and I'm trying to give Dexie DB a name depending on the user name logged in;

I'm following this logic:

• Login component gets uid and save in local storage
• in db.js the new Dexie() takes the name from localstorage

in login.vue

async function submit() {
  const q = query(
    collection(remoteDb, "customers"),
    where("email", "==", user.value.email)
  );

  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    if (doc.data().password === user.value.password) {
      localStorage.setItem("isLoggedIn", true);
      localStorage.setItem("username", doc.name);
      router.push({ name: "ChooseProfile" });
    } else {
      $q.notify({ message: "incorrect password" });
    }
  });
}

in db.js

const db = new Dexie(`LocalDB-${localStorage.getItem("username")}`);

But every time Dexie creates a DB called LocalDB-null, like if it's creating the DB before the localstorage item is saved. I guess Dexie is creating a new DB even when DB is not imported in the component yet.

How to make it wait until the localstorage.getItem("username") !== null to create the db ?

thanks