Vue

@sheetwrite/vue wraps a Grid in a Vue component. It initializes WASM after the component mounts on the client.

Package

@sheetwrite/vue

Component

Sheetwrite

Grid access

Exposed grid and @ready

Change events

@grid-change

Install

$ npm install @sheetwrite/vue

Import @sheetwrite/vue/styles.css once in your app.

Mount a grid

The component accepts columns and default-rows. Templates use kebab-case event listeners.

<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>

Listen to changes

@grid-change reports committed Grid changes. The component exposes grid before it emits ready.

Resets and cleanup

A reset clears the old exposed handle, creates a new generation, and then publishes the replacement. Attach again any coordinator that subscribed to the old Grid. The lifecycle page lists which inputs update in place and which reset.

Server rendering

Importing or rendering the component on the server does not start WASM. In Nuxt or another server-rendered host, use a client-only boundary.