Bitrix Framework

  Inetgration with Dexie

The UI module contains the extension ui.dexie, allowing to interact with local IndexedDB database.

Starting from version ui 22.500.0 you can use the Dexie integration with Vue 3.

You can learn more about this library at the official website.

Establishing a connection

Connect the extensions ui.dexie and ui.vue3 in your extension or at a PHP page.

Import into the extension the liveQuery from ui.dexie and useObservable from ui.vue3 respectively.

To work within a page and in scripts without compiling, use the namespaces BX.Dexie3 and BX.Vue3 for access to functions (for example, for liveQuery its BX.Dexie3.liveQuery).

  Example

In the example below, the Vue application shows the content of local database.

The variable items will actively store all items of the items table, with names starting with an English letter "A".

import {BitrixVue, useObservable} from 'ui.vue3';
import {Dexie, liveQuery} from 'ui.dexie';

const db = new Dexie("vuedbsample");
db.version(1).stores({
	items: "++id, name"
});

const DBItems = {
	data() {
		return {
			db,
			items: useObservable(
				liveQuery(() => db.items.where("name").startsWithAnyOf("A", "a").sortBy('id'))
			),
		}
	},
	methods: {
		addUser()
		{
			const name = prompt('Specify the element starting with the letter "A":')
			this.db.items.add({ name });
		},
		clear()
		{
			this.db.items.clear();
		}
	},
	template: `
		<h2>Dexie integration (IndexedDB)</h2>

		<!-- Mutation examples -->
		<button @click="addUser">Add item</button>
		<button @click="clear">Clear items</button>
		
		<!-- Render the result of the query -->
		<ul>
		  <li v-for="item in items" :key="item.id">
			{{ item.id }}, {{ item.name }}
		  </li>
		</ul>
	`
};

const application = BitrixVue.createApp({
	components: {
		DBItems
	},
	template: `
		<DBItems/>
	`
});
application.mount('#application');