Vue Godot

Write native apps and Godot game UI using Vue.js.

<template>
  <HBoxContainer>
    <Button text="Add one" @pressed="increment"></Button>
    <Label :text="`Count: ${count}`"></Label>
  </HBoxContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value += 1
}
</script>

Vue Godot renders Vue Single File Components into Godot's native scene tree. Use Godot nodes directly or use HTML-like components backed by Godot controls.

Create a native app:

npx vue-godot create app my-app

Create game UI:

npx vue-godot create game-ui my-hud

Both profiles scaffold the same Vue + Godot foundation: app starts with application-oriented UI that demonstrates storage, network state, and native capability adapters, while game-ui starts with a HUD-oriented screen of health, actions, and session controls. Choose either as a starting point—the difference is the starter content, not a runtime limitation.

Install GodotJS, then install the Vue packages and start the build:

1. Download godotjs-v<version>.zip from the latest GodotJS GitHub release.
2. Extract it at the project root. The result must include addons/godotjs/godotjs.gdextension.
3. Run:

cd my-app # or my-hud
npm install
npm run dev

Open project.godot in an official Godot editor and press F5. Use npm run build for a one-time build. GodotJS is a native add-on, not an npm package; Vue Godot never downloads, upgrades, or removes it.

The app profile includes HTML-like components, browser APIs, and native capability adapters. Add only the starters you need:

npx vue-godot create app my-app --router --storage --network --device-api

For a minimal project using Godot nodes directly, run:

npx vue-godot create my-game

Add --html to include components such as <Div>, <Img>, <Button>, and <Input>.

cd my-existing-godot-project
npx vue-godot integrate --html
npm install
npm run gen:types
npm run dev

Godot node classes work as Vue component tags:

<template>
  <HBoxContainer>
    <Button text="Add one" @pressed="increment"></Button>
    <Label :text="`Count: ${count}`"></Label>
  </HBoxContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value += 1
}
</script>

With --html, familiar HTML-like components render to Godot nodes too:

<Div :style="{ flexDirection: 'row', gap: 12 }">
  <Span>Count: {{ count }}</Span>
  <Button @click="increment">Add one</Button>
</Div>

Both styles can be used in the same template.

GodotJS is the standalone JavaScript GDExtension for unmodified official Godot. It is a Godot product in its own right; Vue Godot is a separate, optional npm framework that runs on it.

Download the universal godotjs-v*.zip from GitHub Releases and extract it at the project root:

your-project/
├── addons/
│   └── godotjs/
│       ├── godotjs.gdextension
│       ├── bin/                 # all supported platform libraries
│       └── typings/             # standalone TypeScript declarations
└── project.godot

Commit the complete addons/godotjs directory. Do not install GodotJS with npm, and do not copy only the current desktop library: the same add-on bundle contains debug and release binaries for macOS, Windows, Linux, Android, iOS, and Web. Standalone TypeScript projects include addons/godotjs/typings/index.d.ts; Vue projects run npm run gen:types for project declarations.

Godot 4.4.1 is the minimum compatibility floor. Release integration tracks the latest official stable Godot (currently 4.7.1): a daily workflow discovers official checksummed editor and export-template assets, runs stock-engine smoke tests plus the complete six-platform debug/release export matrix, and publishes a versioned universal GDExtension ZIP only when every gate passes. See the GodotJS developer guide for native builds, exports, and platform constraints.

• apps/godotjs-demo — standalone TypeScript on official Godot, with no Vue dependency
• apps/native-app-demo — routing, storage, network, permissions, and device APIs
• apps/game-ui-demo — HUD, input, media, settings, and inventory
• apps/html-demo — HTML-like components and browser APIs

Smaller examples cover Vue events, v-model, template refs, lifecycle hooks, and node ordering under apps. See the example app criteria for maintained coverage.

• Node.js 20 or newer
• Official Godot 4.4.1 or newer
• GodotJS extracted under addons/godotjs

• Compatibility and runtime behavior
• Permissions and exports and native plugins
• Routing and migration
• Platform guides for desktop, Android, and iOS
• Troubleshooting
• Roadmap

npm install
npm run build
npm run test
npm run check

npm run check runs the full local quality gate. Godot smoke tests can use a specific executable with GODOT_BIN=/path/to/godot npm run smoke:godot.

MIT