Vue-библиотека

@webgui/vue предоставляет композаблы Vue 3 и TypeScript-типы для SPA, работающих внутри мода WebGUI. Оборачивает внедряемый window.webgui в реактивность Vue — рефы обновляются по мере того, как игра шлёт данные. Плагин не нужен.

Одни данные, разные фреймворки

@webgui/vue, @webgui/react и @webgui/svelte отдают одни и те же данные и действия — бери под свой фреймворк. Полные формы WebGUIClient / WebGUIEntity описаны на странице React-библиотека.

Установка

npm install @webgui/vue

Требует Vue 3 как peer-зависимость. Версия пакета совпадает с версией мода (например, @webgui/vue@1.6.0 — под WebGUI 1.6.0).

Быстрый старт

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

const client = useWebGUIClient()
</script>

<template>
  <p v-if="!isInMod()">Откройте страницу внутри Minecraft.</p>
  <p v-else-if="client">Привет, {{ client.username }}</p>
  <p v-else>Ждём данные от мода…</p>
</template>

Композаблы

useWebGUIClient

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

Реф с последним снимком клиента (пушится 20 раз/сек). null до первого пуша или вне мода.

useWebGUIEntity

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

Сущность, по которой игрок кликнул для открытия GUI (через /webgui bind entity), или null, если GUI открыт командой.

useWebGUISelector

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

Выводит значение из снимка. Computed меняется только когда меняется выбранное значение (по equalFn, по умолчанию Object.is), поэтому шаблон не перерисовывается на каждый тик.

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

usePostToGame

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

Возвращает функцию отправки сообщения в игру через CEF-роутер мода.

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

useCloseGui

function useCloseGui(): () => void

Закрывает активный GUI-экран или HUD-оверлей.

useRunCommand

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

Выполняет команду от лица игрока — как если бы он ввёл её в чат. Работает только если страница на доверенном origin (trustedCommandOrigins); иначе мод её отклоняет.

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

<template>
  <button @click="run('spawn')">На спавн</button>
</template>

useWebGUIToken

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

Подписанный токен, который мод добавил в URL страницы, или null. Статичен на время жизни страницы. См. Проверка токена.

useWebGUIEvent

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

Подписка на именованное событие с сервера (WebviewApi.emitToPage). Слушатель снимается автоматически при уничтожении scope компонента. См. События.

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

Обычные функции

Также экспортируются для использования вне setup(): postToGame, closeGui, runCommand, и утилиты isInMod() / isReady(client).

TypeScript

Все типы экспортируются из корня пакета (WebGUIClient, WebGUIEntity, PostToGamePayload, …). Пакет глобально дополняет window.webgui и события webgui:client / webgui:entity — добавьте "types": ["@webgui/vue"] в tsconfig.json, чтобы обращаться к window.webgui напрямую.