Vue Seating Chart Component for Reserved Seating

Install @seatlayer/vue, render an interactive Vue 3 seating chart with live availability and seat selection, create holds, and hand booking to a trusted server.

The official SeatLayer Vue seating chart component adds an interactive seat map and seat picker to reserved-seating apps built with Vue 3. The @seatlayer/vue package renders a real DOM component — not an iframe — with typed props, emits, and an imperative handle for live availability, seat selection, temporary holds, and best-available seating. TypeScript definitions ship in the package.

Inspect the Vue source, learn about the SeatLayer reserved-seating platform, or try the browser seat-map demo.

Install the package

npm install @seatlayer/vue

Vue 3 is supported, with ESM and CommonJS builds and bundled TypeScript types.

Render a seating chart

<script setup>
import { SeatingChart } from '@seatlayer/vue';

function onSelectionChanged(seats) {
  updateBasket(seats);
}
</script>

<template>
  <SeatingChart
    event="ev_your_event_key"
    currency="USD"
    @selection-changed="onSelectionChanged"
    @hold-expired="returnBuyerToMap"
  />
</template>

The component owns its container and live updates; identity props such as the event key rebuild the chart cleanly, and calling a handle method before the chart exists returns an empty answer rather than throwing.

Select, hold, and hand off checkout

Keep the security boundary explicit:

The browser selects seats and creates a temporary hold.
Your backend inspects the hold and derives the amount to charge.
Your payment and order workflow stays on your server.
Your backend books with a stable bookingRef so retries are safe.

Continue with holds and checkout before connecting a production order flow.

Frequently asked questions

Is this a real Vue component or an iframe?

SeatingChart renders a plain div in your DOM and drives the buyer renderer directly — no iframe. Props, emits, and the imperative handle are all typed.

How do temporary seat holds work?

Selecting seats creates a temporary hold that reserves inventory against concurrent buyers for a limited window. The hold expires automatically if checkout does not complete — the hold-expired emit tells the app to return the buyer to the map — and holds can be extended or resumed for longer checkouts.

Can I use my own payment provider?

Yes. SeatLayer never processes payment inside the seat map. The browser hands the hold id to your backend, and your backend charges through any payment provider you already use before booking the hold.

Is there a React or Angular version?

Yes — @seatlayer/react and @seatlayer/angular share the same typed contract, and @seatlayer/js covers any framework or none.