Skip to content

Vue bindings

./vue needs the optional vue peer (3.5 or later) and imports nothing else of the framework family. It is the same stores through Vue’s reactivity:

import { QgisSdk, layersQuery } from "@archont561/qgis-sdk";
import { provideQgisSdk, useForm, useHostQuery, useOperation, useQgisSdk, useStream } from "@archont561/qgis-sdk/vue";
// In the root component's setup():
provideQgisSdk(QgisSdk.fromBridgeSchema(schema));
// In any descendant's setup():
const qgis = useQgisSdk<Operations, Streams>();
const summary = useOperation(qgis.sites.summary); // { state, run, abort, reset, store }
const watch = useStream(qgis.sites.watch, () => input.value, { onEvent }); // input: Ref<I | null>
const { state, form } = useForm(qgis, "buffer", { initial: { distance_metres: 500 } });
const { state: layers, query } = useHostQuery(layersQuery(qgis));

Every state is a read-only ShallowRef (useStore(store) gives one for any store); useStream takes a MaybeRefOrGetter<I | null> and follows it with watch(..., { immediate: true }); disposing the effect scope (unmounting) aborts the operations and closes the streams the component opened. provideQgisSdk outside setup() and useQgisSdk without a provider raise QgisSdkBridgeVueError ("vue_binding"). QGIS_SDK_KEY is the injection key, for a page that prefers provide/inject by hand.