@carrot/engine-vue

tsvue

Vue 3 composables for integrating the Carrot WebGL engine into Vue applications.

Usage

import { useEngine, useScene, useInput } from '@carrot/engine-vue';

<script setup lang="ts">
import { ref } from 'vue';
import { useEngine, useScene, useInput } from '@carrot/engine-vue';

const canvasRef = ref<HTMLCanvasElement>();
const { game, engine, fps, running, start, stop } = useEngine({ canvas: canvasRef });
const { scene, entities, switchTo } = useScene(game);
const { isGamepadActive, activeDevice } = useInput(engine);
</script>

<template>
  <canvas ref="canvasRef" />
</template>

Contents

Composables: useEngine · useScene · useInput

Types: UseEngineOptions · UseEngineReturn · UseSceneReturn · UseInputReturn

Composable	Purpose
useEngine(options)	Create and manage an engine instance bound to a canvas ref
useScene(game)	Reactive access to the current scene and its entities
useInput(engine)	Track active input device and gamepad state

Build

npm run build

Requires vue@^3.4.0 as a peer dependency.

---

@carrot/engine-vue - Contents

Import: import { ... } from '@carrot/engine-vue';

Composables

useEngine · useScene · useInput

---

useEngine

function useEngine(options: UseEngineOptions): UseEngineReturn;

Options - UseEngineOptions

Property	Type	Default	Description
canvas	Ref<HTMLCanvasElement | undefined>	-	Required. Ref to the canvas element
log	Log	undefined	Optional log instance
aspectRatio	AspectRatio	undefined	Optional aspect ratio enforcement
assetBasePath	string	'/assets/'	Asset base path
scene	Scene	undefined	Initial scene to start with
autoStart	boolean	true	Auto-start the engine on mount

Return - UseEngineReturn

Property	Type	Description
game	ShallowRef<Game | undefined>	The Game instance
engine	ShallowRef<Engine | undefined>	The Engine instance
fps	Ref<number>	Reactive FPS counter (updated every 500ms)
running	Ref<boolean>	Whether the engine is currently running
start	(scene?: Scene) => Promise<void>	Start the engine with an optional scene
stop	() => void	Stop the engine

---

useScene

function useScene(game: ShallowRef<Game | undefined>): UseSceneReturn;

Return - UseSceneReturn

Property	Type	Description
scene	ShallowRef<Scene | undefined>	The current active scene
entities	ShallowRef<readonly Entity[]>	Entities in the current scene
switchTo	(scene: Scene) => Promise<void>	Switch to a different scene

---

useInput

function useInput(engine: ShallowRef<Engine | undefined>): UseInputReturn;

Return - UseInputReturn

Property	Type	Description
input	ShallowRef<Input | undefined>	The Input system instance
isGamepadActive	Ref<boolean>	Whether the active input device is a gamepad
activeDevice	Ref<string>	Name of the active input device category (e.g. 'Keyboard', 'Gamepad')

---

Types

UseEngineOptions · UseEngineReturn · UseSceneReturn · UseInputReturn