DEV Community

Luciano Federico Pereira
Luciano Federico Pereira

Posted on

Vapor Chamber — A Tiny Command Bus for Vue Vapor (~1KB)

Vapor Chamber Logo inspired in Vue

Source: github.com Package: npmjs.com

Vapor Chamber is a lightweight command bus built for Vue Vapor, Vue’s upcoming compilation mode that removes the Virtual DOM. Vapor compiles templates into direct DOM operations powered by signals, updating only what actually changed.

Vapor Chamber follows the same philosophy: minimal abstraction, direct updates, signal‑native reactivity.

Minimal Example

import { createCommandBus } from 'vapor-chamber';

const bus = createCommandBus();

bus.register('cart.add', (cmd) => {
  cart.items.push(cmd.target);
  return cart.items;
});

bus.dispatch('cart.add', { id: 1, name: 'Book' });
Enter fullscreen mode Exit fullscreen mode

Why a Command Bus?

Traditional event systems scatter logic across components. A command bus centralizes it:

  • Event-driven: components emit → others listen → logic spreads everywhere

  • Command bus: dispatch('cart.add', product) → one handler → plugins wrap behavior

Benefits

  • Clear, semantic actions (cart.add > emit('add'))

  • One handler per action → easier debugging & testing

  • Plugin pipeline for logging, validation, analytics, etc.

  • Natural undo/redo via command history

Top comments (0)