Can you provide examples of using Dexie.js with Vue 3?

Can you provide examples of using Dexie.js with Vue 3?

Sure! Dexie.js is a wrapper for IndexedDB, making it easier to work with databases in web applications. Here’s a simple example of how to use it with Vue 3.

What does the basic setup look like?

First, you need to install Dexie.js. You can do this via npm: npm install dexie. Then, you can create a Dexie instance in your Vue component.

Can you show me a code snippet?

Absolutely! Here’s a basic example:

import Dexie from 'dexie';

const db = new Dexie('MyDatabase');
db.version(1).stores({ friends: '++id,name,age' });

export default {
  data() {
    return { friends: [] };
  },
  async created() {
    this.friends = await db.friends.toArray();
  }
};

How do I add data to the database?

You can add data using the add method. For example:

db.friends.add({ name: 'John Doe', age: 30 });