Stato del modello

Vue State & Methods — The reactive ch object and available template methods.

The waiting room template is powered by a single reactive Vue 3 object called ch. This object holds all queue state — position, estimated wait, countdown timers, form data, and feature flags — and updates automatically as the application polls the CrowdHandler API. You don't need to manage any of this state yourself; simply bind to its properties using standard Vue directives (v-if, v-else, {{ }} interpolation, :style, etc.) and your template will react to changes in real time. Think of ch as a read-only data API that describes the current state of the queue.

State Objects

Primary State: `ch`

Property	Type	Description
`ch.isLoaded`	boolean	`vero` when initial data is loaded
`ch.isActive`	boolean	`vero` when user is in active queue
`ch.isCountdown`	boolean	`vero` when queue hasn't opened yet
`ch.isBlocked`	boolean	`vero` when user is blocked
`ch.isRoomFull`	boolean	`vero` when queue is at capacity
`ch.isError`	boolean	`vero` when an error occurred
`ch.captchaRequired`	boolean	`vero` when captcha must be completed
`ch.position`	number \| null	Current queue position (1-based). `null` when checking in
`ch.estimate`	number \| null	Estimated wait in minutes
`ch.eta`	string \| null	Estimated time of arrival (formatted time string)
`ch.title`	string	Event/room title
`ch.message`	string	Custom message from room config
`ch.logo`	string	URL to logo image
`ch.stock`	number \| null	Available stock (if configured)
`ch.onsale`	string	ISO date when queue opens
`ch.requested`	string	Timestamp of last API request
`ch.sessionsExpire`	number	Whether sessions expire (non-zero = true)
`ch.sessionsTimeout`	number	Minutes until session timeout
`ch.emailAvailable`	number	Whether email notifications enabled (non-zero = true)
`ch.announcement`	string	Screen reader announcement text
`ch.progress`	number	Progress bar percentage (0–100)
`ch.nextPoll`	number	Seconds since last poll
`ch.pollTTL`	number	Current poll interval in seconds (default 60, variable)
`ch.css.title`	string	Dynamic title size class (`""`, `"ch-title-lg"`, or `"ch-title-xl"`)

Token State: `ch.token`

Property	Type	Description
`ch.token.value`	string \| null	Full token value
`ch.token.obfuscated`	string \| null	Partially hidden token for display
`ch.token.copied`	boolean	`vero` momentarily after user copies token
`ch.token.copy(event, ch)`	function	Copy token to clipboard

Email State: `ch.email`

Property	Type	Description
`ch.email.value`	string	Entered email address
`ch.email.valid`	boolean	Whether email format is valid
`ch.email.submitted`	boolean	Whether email was successfully submitted
`ch.email.submitting`	boolean	`vero` during submission
`ch.email.changing`	boolean	`vero` when user is changing a previously submitted email

Priority Code State: `ch.priority`

Property	Type	Description
`ch.priority.available`	number \| null	Whether priority codes enabled (non-zero = true)
`ch.priority.code`	string \| null	Entered priority code
`ch.priority.valid`	boolean \| null	Whether code format is valid
`ch.priority.submitted`	boolean	Whether code was submitted
`ch.priority.submitting`	boolean	`vero` during submission
`ch.priority.success`	boolean	`vero` if code was accepted
`ch.priority.error`	boolean	`vero` if code was rejected

Countdown State: `ch.countdown`

Available when ch.isCountdown is true.

Property	Type	Description
`ch.countdown.sHours`	string	Hours, zero-padded ("02") or "--" before init
`ch.countdown.sMinutes`	string	Minutes, zero-padded ("05") or "--" before init
`ch.countdown.sSeconds`	string	Seconds, zero-padded ("30") or "--" before init
`ch.countdown.hours`	number	Hours as number
`ch.countdown.minutes`	number	Minutes as number
`ch.countdown.seconds`	number	Seconds as number
`ch.countdown.totalseconds`	number	Total seconds remaining

Available Methods

Method	Description
`validateEmail()`	Validates email format, updates `ch.email.valid`
`submitEmail()`	Submits email for notifications
`changeEmail()`	Enters "changing email" state
`cancelChangeEmail()`	Cancels email change, returns to confirmation
`checkValidPriorityCode()`	Validates priority code format
`prioritySubmit()`	Submits priority code
`formatDate(date, format)`	Formats date string (see below)

formatDate Options

formatDate(ch.requested, 'toLocaleString')      // "1/27/2026, 2:30:00 PM"
formatDate(ch.requested, 'toLocaleDateString')   // "1/27/2026"
formatDate(ch.requested, 'toLocaleTimeString')   // "2:30:00 PM"
formatDate(ch.requested, 'dayMonth')             // "27 January"
formatDate(ch.requested, 'weekdayMonthDay')      // "Tuesday, Jan 27"
formatDate(ch.requested, 'iso')                  // "2026-01-27T14:30:00.000Z"
formatDate(ch.requested, 'YYYY-MM-dd HH:mm:ss') // "2026-01-27 14:30:00"

State Objects#

Primary State: ch#

Token State: ch.token#

Email State: ch.email#

Priority Code State: ch.priority#

Countdown State: ch.countdown#

Available Methods#

formatDate Options#