Widgets
Every public widget shipped by GomaPulse is documented here. Each page captures the element tag, config options, emitted events, theming, and embedding examples so consumers can integrate without reading the source.
Shipped widgets
| Widget | Package | Install |
|---|---|---|
| Events Horizontal | @gomagaming/events-horizontal | pnpm add @gomagaming/events-horizontal vue pinia vue-router vue-i18n @vueuse/core |
| Sports Navigation Horizontal | @gomagaming/sports-navigation-horizontal | pnpm add @gomagaming/sports-navigation-horizontal vue pinia vue-router vue-i18n @vueuse/core |
| Sports Navigation Dialog | @gomagaming/sports-navigation-dialog | pnpm add @gomagaming/sports-navigation-dialog vue pinia vue-router vue-i18n @vueuse/core |
| Betslip Floating | @gomagaming/betslip-floating | pnpm add @gomagaming/betslip-floating vue pinia vue-router vue-i18n @vueuse/core |
| Betslip Sidebar | @gomagaming/betslip-sidebar | pnpm add @gomagaming/betslip-sidebar vue pinia vue-router vue-i18n @vueuse/core |
| My Bets | @gomagaming/my-bets | pnpm add @gomagaming/my-bets vue pinia vue-router vue-i18n @vueuse/core |
| Game Details | @gomagaming/game-details | pnpm add @gomagaming/game-details vue pinia vue-router vue-i18n @vueuse/core |
| Hero Card | @gomagaming/hero-card | pnpm add @gomagaming/hero-card vue pinia vue-router vue-i18n @vueuse/core |
| Region Filter | @gomagaming/region-filter | pnpm add @gomagaming/region-filter vue pinia vue-router vue-i18n @vueuse/core |
| Search | @gomagaming/search | pnpm add @gomagaming/search vue pinia vue-router vue-i18n @vueuse/core |
| Competition Filter | @gomagaming/competition-filter | pnpm add @gomagaming/competition-filter vue pinia vue-router vue-i18n @vueuse/core |
| Time Filter | @gomagaming/time-filter | pnpm add @gomagaming/time-filter vue pinia vue-router vue-i18n @vueuse/core |
| Top Competitions | @gomagaming/top-competitions | pnpm add @gomagaming/top-competitions vue pinia vue-router vue-i18n @vueuse/core |
| Top Competitions Pills | @gomagaming/top-competitions-pills | pnpm add @gomagaming/top-competitions-pills vue pinia vue-router vue-i18n @vueuse/core |
| Competitions List | @gomagaming/competitions-list | pnpm add @gomagaming/competitions-list vue pinia vue-router vue-i18n @vueuse/core |
| Multi Banners | @gomagaming/multi-banners | pnpm add @gomagaming/multi-banners vue pinia vue-router vue-i18n @vueuse/core |
| Missions Hub | @gomagaming/missions-hub | pnpm add @gomagaming/missions-hub vue pinia vue-router vue-i18n @vueuse/core |
| Mission Details | @gomagaming/mission-details | pnpm add @gomagaming/mission-details vue pinia vue-router vue-i18n @vueuse/core |
| Suggested Bet | @gomagaming/suggested-bet | pnpm add @gomagaming/suggested-bet vue pinia vue-router vue-i18n @vueuse/core |
| Filters Settings | @gomagaming/filters-settings | pnpm add @gomagaming/filters-settings vue pinia vue-router vue-i18n @vueuse/core |
| Casino Games | @gomagaming/casino-games | pnpm add @gomagaming/casino-games vue pinia vue-router vue-i18n @vueuse/core |
| Favorites | @gomagaming/favorites | pnpm add @gomagaming/favorites vue pinia vue-router vue-i18n @vueuse/core |
| Highlight Card | @gomagaming/highlight-card | pnpm add @gomagaming/highlight-card vue pinia vue-router vue-i18n @vueuse/core autobahn-browser |
| Pros' Choice | @gomagaming/pros-choice | pnpm add @gomagaming/pros-choice vue pinia vue-router vue-i18n @vueuse/core autobahn-browser |
| Live Chat | @gomagaming/live-chat | pnpm add @gomagaming/live-chat vue pinia vue-router vue-i18n @vueuse/core |
| Messenger | @gomagaming/messenger | pnpm add @gomagaming/messenger vue pinia vue-router vue-i18n @vueuse/core |
goma-live-chat and goma-messenger both externalise vue, pinia, and vue-i18n for their own widget code, same as every other row. Both need the same full peer-dependency install regardless: both reach @gomagaming/my-bets for their share-screen bet picker, a declared dependency that installs and registers itself (live-chat imports it in the entry bundle; messenger loads it lazily with the share screen), and my-bets reaches @gomagaming/core, @gomagaming/sports-domain and @gomagaming/ui; core and sports-domain externalise vue-router and @vueuse/core. The two peers neither chat widget imports directly itself.
goma-events-horizontal is the reference implementation for all future widgets. Its patterns (element class, App.vue wrapper, theming, topic subscription, betslip integration, demo page, VitePress docs, custom-elements.json) serve as the template when building new widgets.
Chat widgets
The two chat surfaces in the table above are listed separately here because they differ from the sports widgets in one way that matters for integration: they do not speak to the sportsbook feed at all. Both need a GomaChat backend service of their own, over REST plus Socket.IO.
In every other respect they follow the same conventions as the rest of the registry: --goma-* theme tokens, the shared peer-dependency set, and configuration through either HTML attributes or a config object, which write the same state and compose. Their events are the one genuine exception: both use the gc:* namespace rather than goma:*.
Both take an opaque chat token and validate nothing: minting one is the host's job, via the chat service's pluggable identity-provider exchange. Start with Chat identity and the provider model, which covers the exchange contract, the EveryMatrix provider, and what changes if you run a different platform or your own backend. Building a chat backend rather than running ours? See the Chat backend specification.
<goma-live-chat> is a public room scoped to one match; <goma-messenger> is a social direct-message and group-chat dock. A host mounting both must exchange its operator session for a chat identity once and feed the result to both: a second exchange mints a second chat identity for the same player.
Cross-widget guides
| Topic | Read |
|---|---|
How widgets share Pinia-free state, the Shadow DOM/reactive-bridge model, and where @gomagaming/core / @gomagaming/sports-domain sit in the layering | Architecture |
The goma:* event catalogue and follow* auto-wiring between pickers and feeds | Cross-widget wiring |
The localStorage-backed envelopes (goma:betslip:v4, goma:favorites:v1, goma:session:v1, goma:filters-settings:v1): what's inside, who reads/writes | Shared state |
| Feeding a single widget instance host-owned event data with no socket connection | Host-fed data |
| Choosing between (or combining) the horizontal and dialog sports pickers | Sports navigation: deployment scenarios |
Authoring convention
Whenever a widget is added, changed, or removed, its page under docs/widgets/ must be updated in the same change. See the project CLAUDE.md for the full rule.