@sheetwrite/vue initializes WASM after client mount. The simple component accepts columns and defaultRows; Vue templates use kebab-case event listeners such as @grid-change and @ready.
The component exposes grid before emitting ready. A reset clears the old exposed handle, creates a new generation, and then publishes the replacement. Reattach any coordinator that subscribed to the old grid.
<script setup lang="ts">import { Sheetwriteconst Sheetwrite: SheetwriteComponentConstructor<SheetwriteProps<Record<string, CellScalar>, RowBridgeId>, SheetwriteGridEmits<RowBridgeId>, object>const Sheetwrite: SheetwriteComponentConstructor<
SheetwriteProps<Record<string, CellScalar>, RowBridgeId>,
SheetwriteGridEmits<RowBridgeId>,
object
>const Sheetwrite: SheetwriteComponentConstructor<
SheetwriteProps<
Record<string, CellScalar>,
RowBridgeId
>,
SheetwriteGridEmits<RowBridgeId>,
object
>Convenience component for local object rows with live option updates.API reference →, type GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →, type SimpleColumninterface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>Column definition accepted by the adapters’ simple row-object API.API reference → } from "@sheetwrite/vue";import type { ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference → } from "@sheetwrite/core";import "@sheetwrite/vue/styles.css";
type Rowtype Row = {
name: string;
amount: number;
}type Row = {
name: string;
amount: number;
};type Row = {
name: string;
amount: number;
}; = { namename: stringlet name: stringlet name: stringUser-facing sheet name shown in tabs and workbook exports.API reference →: string; amount: number };
const { columnsconst columns: readonly SimpleColumn<Row>[]const columns: readonly SimpleColumn<Row>[]const columns: readonly SimpleColumn<Row>[]Exact column runs represented by every returned row.API reference →, rowsconst rows: readonly Row[]const rows: readonly Row[]const rows: readonly Row[]end-exclusive row rangeAPI reference → } = definePropsconst defineProps: () => DefineProps<LooseRequired, never> (+2 overloads)const defineProps: () => DefineProps<LooseRequired, never> (+2 overloads)const defineProps: () => DefineProps<LooseRequired, never> (+2 overloads)Vue <script setup> compiler macro for declaring component props. The expected argument is the same as the component props option. Example runtime declaration: // using Array syntax const props = defineProps(['foo', 'bar']) // using Object syntax const props = defineProps({ foo: String, bar: { type: Number, required: true } }) Equivalent type-based declaration: // will be compiled into equivalent runtime declarations const props = defineProps<{ foo?: string bar: number }>()@see vuejs.org/api/sfc-script-setup.html#defineprops-defineemits This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.<{ columnscolumns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]Exact column runs represented by every returned row.API reference →: readonly SimpleColumninterface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>Column definition accepted by the adapters’ simple row-object API.API reference →<Rowtype Row = {
name: string;
amount: number;
}type Row = {
name: string;
amount: number;
};type Row = {
name: string;
amount: number;
};>[]; rowsrows: readonly Row[]let rows: readonly Row[]let rows: readonly Row[]end-exclusive row rangeAPI reference →: readonly Rowtype Row = {
name: string;
amount: number;
}type Row = {
name: string;
amount: number;
};type Row = {
name: string;
amount: number;
};[];}>();const emitconst emit: ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void)const emit: ((
evt: "gridChange",
event: ChangeEvent,
) => void) &
((evt: "ready", event: GridReadyEvent) => void)const emit: ((
evt: "gridChange",
event: ChangeEvent,
) => void) &
((
evt: "ready",
event: GridReadyEvent,
) => void) = defineEmitsconst defineEmits: () => ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void) (+2 overloads)const defineEmits: () => ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void) (+2 overloads)const defineEmits: () => ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void) (+2 overloads)Vue <script setup> compiler macro for declaring a component's emitted events. The expected argument is the same as the component emits option. Example runtime declaration: const emit = defineEmits(['change', 'update']) Example type-based declaration: const emit = defineEmits<{ // <eventName>: <expected arguments> change: [] update: [value: number] // named tuple syntax }>() emit('change') emit('update', 1) This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.@see vuejs.org/api/sfc-script-setup.html#defineprops-defineemits<{ gridChangegridChange: [event: ChangeEvent]let gridChange: [event: ChangeEvent]let gridChange: [
event: ChangeEvent,
]Receives every committed Grid change, including its applied transaction.API reference →: [eventChangeEventChangeEvent;ChangeEvent;Payload of the change event; flows OUT for API submission/reconcile.API reference →: ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference →]; readyready: [event: GridReadyEvent]let ready: [event: GridReadyEvent]let ready: [
event: GridReadyEvent,
]Resolves after durable work is restored and every startup commit is visible locally.API reference →: [eventGridReadyEventGridReadyEvent;GridReadyEvent;Grid handle, generation, and reason published after adapter initialization.API reference →: GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →];}>();
const handleGridChangeconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (
event: ChangeEvent,
) => voidAPI reference → = (event: ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference →) => emitconst emit: (evt: "gridChange", event: ChangeEvent) => void (+1 overload)const emit: (evt: "gridChange", event: ChangeEvent) => void (+1 overload)const emit: (evt: "gridChange", event: ChangeEvent) => void (+1 overload)API reference →("gridChange", event);const handleReadyconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (
event: GridReadyEvent,
) => voidAPI reference → = (event: GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →) => emitconst emit: (evt: "ready", event: GridReadyEvent) => void (+1 overload)const emit: (evt: "ready", event: GridReadyEvent) => void (+1 overload)const emit: (evt: "ready", event: GridReadyEvent) => void (+1 overload)API reference →("ready", event);</script>
<template> <Sheetwriteconst Sheetwrite: SheetwriteComponentConstructor<SheetwriteProps<Record<string, CellScalar>, RowBridgeId>, SheetwriteGridEmits<RowBridgeId>, object>const Sheetwrite: SheetwriteComponentConstructor<
SheetwriteProps<Record<string, CellScalar>, RowBridgeId>,
SheetwriteGridEmits<RowBridgeId>,
object
>const Sheetwrite: SheetwriteComponentConstructor<
SheetwriteProps<
Record<string, CellScalar>,
RowBridgeId
>,
SheetwriteGridEmits<RowBridgeId>,
object
>Convenience component for local object rows with live option updates.API reference → :columnsSheetwriteProps<Record<string, CellScalar>, RowBridgeId>.columns: readonly SimpleColumn<Record<string, CellScalar>>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.columns: readonly SimpleColumn<Record<string, CellScalar>>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.columns: readonly SimpleColumn<Record<string, CellScalar>>[]Ordered schema used to derive the component-owned sheet.="columnsconst columns: readonly SimpleColumn<Record<string, CellScalar>>[]const columns: readonly SimpleColumn<
Record<string, CellScalar>
>[]const columns: readonly SimpleColumn<
Record<string, CellScalar>
>[]Exact column runs represented by every returned row.API reference →" :default-rowsSheetwriteProps<Record<string, CellScalar>, RowBridgeId>.defaultRows: readonly Record<string, CellScalar>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.defaultRows: readonly Record<string, CellScalar>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.defaultRows: readonly Record<string, CellScalar>[]Rows converted to initial columnar data; missing keys become null.="rowsconst rows: readonly Record<string, CellScalar>[]const rows: readonly Record<string, CellScalar>[]const rows: readonly Record<
string,
CellScalar
>[]end-exclusive row rangeAPI reference →" @grid-changeonGridChange: (event: ChangeEvent) => voidlet onGridChange: (event: ChangeEvent) => voidlet onGridChange: (
event: ChangeEvent,
) => voidCommitted Grid change, including its applied transaction.API reference →="handleGridChangeconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (
event: ChangeEvent,
) => voidAPI reference →" @readyonReady?: ((payload: GridReadyEvent) => void) | undefinedonReady?: ((payload: GridReadyEvent) => void) | undefinedonReady?: ((payload: GridReadyEvent) => void) | undefinedResolves after durable work is restored and every startup commit is visible locally.API reference →="handleReadyconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (
event: GridReadyEvent,
) => voidAPI reference →" /></template>Use a client-only boundary in Nuxt or another server-rendered host; importing or rendering the component on the server does not start WASM.