How to use — usePluginApi()

In any plugin Vue setup() (typically your *Widget.vue), call:

const { $data, $store, $i18n, $socket, $log, $user } = usePluginApi()

That is the normal way to reach your plugin’s runtime API. Deeper API options live in the FAQ guides; this page covers what you need in widgets day to day.

Requirements

• Call usePluginApi() only inside setup().
• The component must belong to a registered plugin (the build injects the plugin key).

$data

Operations usually come from frontend/generated-config.ts (when you have a backend). You can also declare operations in frontend/index.ts — see Consuming generated-config.

const { $data } = usePluginApi()

const { data, execute, isLoading, error } = $data.todo.getAll({
  options: { immediate: true },
})

• $data FAQ

$store

Widget and UI helpers (your plugin only):

getWidgetState, updateWidgetState, updateConfig, updatePublic, publishWorkingState, getSiblingWidgetStates, getUiState, …

• $store FAQ

$socket and $eventbus

Use the channel keys from generated-config (or your manual data definitions) so lists update after mutations.

• $socket FAQ · $eventbus FAQ

$i18n and $log

const { $i18n, $log } = usePluginApi()
const title = $i18n.t("myPlugin.title")
$log.info("loaded")

• i18n · $log FAQ

Another plugin: usePluginApi('author__plugin')

To call a different plugin’s generated operations:

const { $data, $socket, $i18n } = usePluginApi("pacifico__example-todo")

You get a limited API surface:

Included	Not included on foreign plugin
$data, $socket, $i18n, $log, $user, $eventbus	$store widget helpers
Custom keys from that plugin’s install	Sibling-widget helpers tied to your widget instance

Backend-side cross-plugin calls use plugin contracts.

Options object

usePluginApi({ pluginKey: "author__other", actionId: "my-stable-id" })

Use actionId when you need stable query-cache identity for $data.

See also

• Widgets
• Reading & writing URL state (advanced)