einfach/excel

PRE-RELEASE FRAMEWORK REFERENCE

Vue adapter source

Render a caller-owned projection in a Vue component without creating a second spreadsheet store.

STATUS: REPOSITORY SOURCE ONLY

@einfach/vue-excel is a private workspace package at version 0.0.0. It is not published to npm, has no default Worker or WASM backend, and is not a complete spreadsheet application. Treat this as source to evaluate, not as a package to install.

1. Install the repository workspace

The Vue adapter is consumed from this repository today, so install the workspace once before running its fixture.

git clone https://github.com/allroad88888888/einfach-excel.git
cd einfach-excel
pnpm install

2. Run the verified Vue fixture

NO_PROXY=localhost,127.0.0.1 pnpm --filter @einfach/vue-excel run e2e

This command starts the repository's Vite fixture, opens Chromium, drags across controlled cells, and verifies the projected selection. A successful run reports one passing Vue adapter test.

3. Understand the available boundary

Controlled gridBind caller-owned cells and a finite range to a Vue grid view.
Provider hooksBridge UI-core selection, navigation, editing, clipboard, and history commands.
One source of truthVue reactivity manages subscriptions and cleanup; spreadsheet state remains in UI-core atoms.

4. Compose one controlled projection

This is a repository-source pattern. The Vue host owns the backend, cells, and range; the adapter only renders that projection.

<script setup lang="ts">
import type {
  CellRange,
  DisplayCell,
  SpreadsheetBackend,
} from '@einfach/spreadsheet-ui-core'
import {
  SpreadsheetGridView,
  SpreadsheetUiProvider,
} from '@einfach/vue-excel'

defineProps<{
  backend: SpreadsheetBackend
  cells: readonly DisplayCell[]
  range: CellRange
}>()
</script>

<template>
  <SpreadsheetUiProvider :backend="backend">
    <SpreadsheetGridView :cells="cells" :range="range" />
  </SpreadsheetUiProvider>
</template>

5. Keep these responsibilities in the host

  1. Keep the supplied backend stable while one workbook is mounted; a replacement intentionally creates a new UI core.
  2. Own the data query and pass the returned finite cells and range into the view.
  3. Use adapter hooks for interactions. Do not mirror spreadsheet product state into a second set of Vue refs.

6. Inspect the interactive reference

Run the Vue projection demoDrag across its fixed 4×4 grid and inspect the selected range. →Read the exact host sourceIt supplies the provider, deterministic backend, store, projection, and pointer selection. →Read the package boundarySee the supported primitives and the deliberate non-goals. →

What is not ready

There is no published Vue release, default Worker factory, WASM packaging, browser end-to-end promise, or turnkey shell. For a production integration today, use the supported Solid path or implement the backend port while the Vue adapter matures.