Vue Library

@webgui/vue provides Vue 3 composables and TypeScript types for SPAs running inside the WebGUI mod. It wraps the injected window.webgui API in Vue reactivity — refs that update as the game pushes data, no plugin required.

Same data, different framework

@webgui/vue, @webgui/react and @webgui/svelte expose the same data and actions — pick the one for your framework. The full WebGUIClient / WebGUIEntity shapes are documented on the React Library page.

Installation

npm install @webgui/vue

Requires Vue 3 as a peer dependency. The package version tracks the mod version (e.g. @webgui/vue@1.6.0 targets WebGUI 1.6.0).

Quick start

<script setup lang="ts">
import { useWebGUIClient, isInMod } from '@webgui/vue'

const client = useWebGUIClient()
</script>

<template>
  <p v-if="!isInMod()">Open this page inside Minecraft.</p>
  <p v-else-if="client">Hello, {{ client.username }}</p>
  <p v-else>Waiting for mod data…</p>
</template>

Composables

useWebGUIClient

function useWebGUIClient(): Readonly<Ref<WebGUIClient | null>>

A ref with the latest client snapshot (pushed at 20 TPS). null before the first push or outside the mod.

useWebGUIEntity

function useWebGUIEntity(): Readonly<Ref<WebGUIEntity | null>>

The entity the player right-clicked to open this GUI (via /webgui bind entity), or null if opened via command.

useWebGUISelector

function useWebGUISelector<T>(
  selector: (client: WebGUIClient) => T,
  equalFn?: (a: T, b: T) => boolean,
): ComputedRef<T | null>

Derives a value from the snapshot. The computed only changes when the selected value changes (per equalFn, default Object.is), so templates don't re-render on every tick.

const username = useWebGUISelector((c) => c.username)

usePostToGame

function usePostToGame(): (payload: PostToGamePayload) => void

Returns a function that sends a message to the game via the mod's CEF router.

const post = usePostToGame()
post({ channel: 'log', level: 'info', message: 'shop opened' })
post({ channel: 'shop:buy', itemId: 'minecraft:diamond', qty: 1 })

useCloseGui

function useCloseGui(): () => void

Closes the active GUI screen or HUD overlay.

useRunCommand

function useRunCommand(): (command: string) => void

Runs a command as the player, exactly as if they typed it in chat. Only works when the page is on a trustedCommandOrigins origin; otherwise the mod drops it.

<script setup lang="ts">
import { useRunCommand } from '@webgui/vue'
const run = useRunCommand()
</script>

<template>
  <button @click="run('spawn')">Teleport to spawn</button>
</template>

useWebGUIToken

function useWebGUIToken(paramName?: string): string | null

The signed token the mod appended to the page URL, or null when absent. Static for the page lifetime. See Backend Token Verification.

useWebGUIEvent

function useWebGUIEvent<T = unknown>(
  eventName: string,
  handler: (data: T) => void,
): void

Subscribes to a named event pushed from the server via WebviewApi.emitToPage. The listener is removed automatically when the component's scope is disposed. See Events.

useWebGUIEvent<{ balance: number }>('walletUpdate', ({ balance }) => {
  wallet.value = balance
})

Plain functions

Also exported for use outside setup(): postToGame, closeGui, runCommand, and the utils isInMod() / isReady(client).

TypeScript

All types are exported from the package root (WebGUIClient, WebGUIEntity, PostToGamePayload, …). The package augments window.webgui and the webgui:client / webgui:entity events globally — add "types": ["@webgui/vue"] to your tsconfig.json to use window.webgui directly.