Installation

@gomagaming/* packages are published as scoped private packages on npmjs.com. Access is controlled by a per-client npm token issued by Goma Gaming. This page walks through getting set up.

Try it live

Before installing anything, open the Playground — a working sandbox that mounts the same @gomagaming/* widget source you'll install. Toggle the widget rail to mount one or several widgets, edit their config in the inspector's Form / JSON tabs, then click Share setup in the TopBar to capture a ?s=… URL that round-trips the same state on any machine. The Snippet tab outputs vanilla / React / Vue 3 embed code with your chosen config inlined — copy that snippet straight into the install steps below.

The playground tracks the same widget source that ships to npm at every release, so if a widget renders cleanly there it'll render cleanly in your app once the install steps below are done.

What you need

• An npm automation token issued to your team. Ask your Goma Gaming contact; tokens are bound to a specific organization.
• Node 22 or newer.
• Any modern bundler that respects peerDependencies (Vite, webpack, Rollup, esbuild — all fine).
• Vue 3, Pinia, vue-router, vue-i18n, and @vueuse/core already installed at the host-app level (these are peer dependencies of the widgets — your bundler dedupes them across however many widgets you install).

1. Configure .npmrc

Create or edit .npmrc in your project root:

//registry.npmjs.org/:_authToken=${NPM_TOKEN}
@gomagaming:registry=https://registry.npmjs.org/

Set the NPM_TOKEN environment variable to the token you were issued:

export NPM_TOKEN=<your-token>

Do not commit your token. Use ${NPM_TOKEN} interpolation as shown above so the literal token never appears in your repo. Most CI systems support setting NPM_TOKEN as a secret.

If you skip this step, npm install @gomagaming/... fails with:

npm error code E401
npm error 401 Unauthorized - GET https://registry.npmjs.org/@gomagaming%2fevents-horizontal - Unable to authenticate, your authentication token seems to be invalid.

(The exact wording may vary by npm version.)

2. Install the widgets

Pick the widgets you need:

npm install @gomagaming/events-horizontal
npm install @gomagaming/sports-navigation-horizontal
npm install @gomagaming/sports-navigation-dialog
npm install @gomagaming/betslip-floating
npm install @gomagaming/betslip-sidebar
npm install @gomagaming/game-details

You should see @gomagaming/core and @gomagaming/sports-domain appear in your node_modules/ as transitive dependencies — these are the shared spine that gets deduplicated across all @gomagaming/* widgets you install.

If you have not already added the peer deps:

npm install vue pinia vue-router vue-i18n @vueuse/core

For widgets that talk to a live WAMP feed, also install:

npm install autobahn-browser vue-toastification

Check each widget's docs page for its specific peer requirements.

3. Embed in vanilla HTML

<goma-events-horizontal id="ev"></goma-events-horizontal>
<script type="module">
  import '@gomagaming/events-horizontal'

  document.getElementById('ev').config = {
    apiBaseUrl: 'https://api.example.com',
    locale: 'en',
  }
</script>

4. Embed in React 18

Custom elements work in React 18+. Use a ref to set the config property (since it's an object, not a string attribute):

import { useEffect, useRef } from 'react'
import '@gomagaming/events-horizontal'

function MyEventsWidget({ config }) {
  const ref = useRef(null)
  useEffect(() => {
    if (ref.current) ref.current.config = config
  }, [config])
  return <goma-events-horizontal ref={ref} />
}

Bundler dedup

When you install several widgets, your bundler sees Vue listed as a peerDependency of each one and collapses it down to a single shared copy in your final bundle. This is the load-bearing reason the widgets are split into multiple packages instead of one giant bundle: paying customers who use one widget pay only for that widget's code, and customers who use many widgets share the runtime once.

Verify dedup in DevTools → Network tab: a single vue.runtime.*.js, a single pinia.*.js, a single autobahn.min-*.js. Multiple copies indicate your bundler isn't dedup-ing — make sure Vue, Pinia, vue-router, vue-i18n, and @vueuse/core are top-level dependencies in your package.json.

Every widget bundle externalises its peer dependencies (vue, pinia, vue-router, vue-i18n, @vueuse/core, autobahn-browser, swiper) and the workspace libraries (@gomagaming/core, @gomagaming/sports-domain), so your bundler resolves each of those once across all the widgets you install.

Stay current: versions before 0.2.0 did not externalise peer deps and are deprecated on npm. Always install the latest published version.

Reference

• Widget docs — per-widget configuration, props, events.
• Introduction — gomawt's mental model end-to-end.
• Publishing guide — for Goma Gaming maintainers.