Composables

@qnx/vuetify provides composables for programmatic control of forms, tables, lists, and notifications.

---

Available Composables

Composable	Description	Link
useVqForm	Returns a form wrapper component and resetForm for programmatic control	→ Docs
useVqDataTable<T>	Type-safe wrapper for VqDataTable with typed item slot props	→ Docs
useVqList<T>	Type-safe wrapper for VqList with typed items slot prop	→ Docs
collectVqHeaders	Prepends a # serial column to a table headers array	→ Docs
useMessageInstance	Singleton for showing success/warning/error snackbars	→ Docs
useFormFilterRepository	Programmatically reload or reset a table/list from outside the filter form	→ Docs
useListRepository	Directly mutate list/table item data without a full reload	→ Docs

---

Import

All composables are available from the main package:

import {
  useVqForm,
  useVqDataTable,
  useVqList,
  collectVqHeaders,
  useMessageInstance,
  useFormFilterRepository,
  useListRepository,
  updateItemKeyValue,
  updateItemValue,
  deleteItemValue,
} from "@qnx/vuetify";

---

Quick Examples

useVqForm — Reset after submit

<script setup>
import { useVqForm, VqTextField, VqSubmitBtn } from "@qnx/vuetify";
import { object, string } from "yup";

const { wrapper: UserForm, resetForm } = useVqForm({
  formId: "create-user",
  validationSchema: object({ name: string().required() }),
});
</script>

<template>
  <UserForm action="users/create" @submited-success="resetForm">
    <VqTextField name="name" label="Name" />
    <VqSubmitBtn>Create</VqSubmitBtn>
  </UserForm>
</template>

useMessageInstance — Toast notifications

import { useMessageInstance } from "@qnx/vuetify";

const message = useMessageInstance();

message.success("Saved!");
message.warning("Check your input.");
message.error("Something went wrong.");

useFormFilterRepository — Reload table externally

import { useFormFilterRepository } from "@qnx/vuetify";

const { reload, reset } = useFormFilterRepository("users_filter");

reload(); // reload with current filters
reset();  // clear filters and reload from page 1

updateItemKeyValue — Update a row without reloading

import { updateItemKeyValue } from "@qnx/vuetify";

// After toggling a user's status:
updateItemKeyValue("users", String(userId), "status", "inactive");