Vue — Sheetwrite

@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 { Sheetwrite, type GridReadyEvent, type SimpleColumn } from "@sheetwrite/vue";
import type { ChangeEvent } from "@sheetwrite/core";
import "@sheetwrite/vue/styles.css";

type Row = { name: string; amount: number };

const { columns, rows } = defineProps<{
  columns: readonly SimpleColumn<Row>[];
  rows: readonly Row[];
}>();
const emit = defineEmits<{
  gridChange: [event: ChangeEvent];
  ready: [event: GridReadyEvent];
}>();

const handleGridChange = (event: ChangeEvent) => emit("gridChange", event);
const handleReady = (event: GridReadyEvent) => emit("ready", event);
</script>

<template>
  <Sheetwrite
    :columns="columns"
    :default-rows="rows"
    :height="420"
    @grid-change="handleGridChange"
    @ready="handleReady"
  />
</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.

Loading documentation…