@tesseron/vue

@tesseron/vue

Vue 3 adapter for Tesseron. Register actions, expose resources, and observe connection state from inside your components — no manual lifecycle wiring. Wraps @tesseron/web.

Install

npm install @tesseron/vue

Requires Vue ≥ 3. You also need the @tesseron/mcp gateway running locally — bundled inside the Claude Code plugin.

Quick start

<script setup lang="ts">
import { tesseron, tesseronAction, tesseronResource, tesseronConnection } from '@tesseron/vue';
import { ref } from 'vue';
import { z } from 'zod';

const todos = ref<{ id: string; text: string; done: boolean }[]>([]);

// 1. Identify your app
tesseron.app({ id: 'todo_app', name: 'Todo' });

// 2. Register actions — removed automatically on unmount
tesseronAction('addTodo', {
  input: z.object({ text: z.string().min(1) }),
  handler: ({ text }) => {
    todos.value = [...todos.value, { id: crypto.randomUUID(), text, done: false }];
  },
});

// 3. Expose readable state as a resource
tesseronResource('todoStats', {
  read: () => ({ total: todos.value.length, done: todos.value.filter((t) => t.done).length }),
});

// 4. Connect — returns a Ref with auto-unwrapping in templates
const connection = tesseronConnection();
</script>

<template>
  <p v-if="connection.status === 'open'">
    Claim code: <code>{{ connection.claimCode }}</code>
  </p>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
  </ul>
</template>

Every function registers with the active Tesseron client and cleans up on component unmount.

Functions

Subscribable resources

To push state to the agent on every change, wire a watcher using Vue's watch:

<script setup lang="ts">
import { tesseronResource } from '@tesseron/vue';
import { ref, watch } from 'vue';

const count = ref(0);
const subs = new Set<(n: number) => void>();

watch(count, (n) => subs.forEach((fn) => fn(n)));

tesseronResource('count', {
  read: () => count.value,
  subscribe: (emit) => { subs.add(emit); return () => subs.delete(emit); },
});
</script>

Pair with @tesseron/web

@tesseron/vue re-exports the public surface of @tesseron/web, so you can mix raw calls with the helper functions. See sdks/typescript/examples/vue-todo for a full app.

Docs

License

Reference implementation — Business Source License 1.1 (source-available). Each release auto-converts to Apache-2.0 four years after publication.

Built and maintained by Eigenwise.