Accessing the Runtime Instance in Components

inject(PTAH_INSTANCE)

PtahJs provides the runtime instance through Vue dependency injection inside <DesignerRoot> and <Preview>.

import { inject } from 'vue';
import { PTAH_INSTANCE } from '@ptahjs/ui-vue';

const app = inject(PTAH_INSTANCE);

---

useRuntimeApp()

Creates a Runtime instance for preview or runtime mode.

import { useRuntimeApp } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });

• Parameters: { id: string }
• Returns: Runtime

---

useDesignerApp()

Creates a Runtime instance with runtime.designer.

import { useDesignerApp } from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 've1' });
const designer = runtime.designer;

• Parameters: { id: string }
• Returns: Runtime

---

Accessing app.$state

<script setup>
import { inject, computed } from 'vue';
import { PTAH_INSTANCE } from '@ptahjs/ui-vue';

const app = inject(PTAH_INSTANCE);
const currentScene = computed(() => app.$state.currentScene);
const currentModule = computed(() => app.$state.currentModule);
</script>

Available State Keys on app.$state

Key	Type	Description
scenesById	Map<string, Scene>	All scenes by ID
modulesById	Map<string, Module>	All modules by ID
eventsById	Map<string, Event>	All events by ID
childrenIdsByParentId	Map<string, string[]>	Children lookup
sceneIdOrder	string[]	Ordered scene IDs
currentSceneId	string	Active scene ID
currentModuleId	string	Selected module ID
currentScene	Scene | null	Active scene
currentModule	Module | null	Selected module

---

Example: Custom Module Component

<template>
    <div :id="id" class="ui-button">
        <button>{{ module?.props?.label }}</button>
    </div>
</template>

<script setup>
import { inject, computed } from 'vue';
import { PTAH_INSTANCE } from '@ptahjs/ui-vue';

const props = defineProps({ id: String });
const app = inject(PTAH_INSTANCE);
const module = computed(() => app.$state.modulesById.get(props.id));
</script>

---

Example: Custom Parameter Component

export default {
    name: 'PropString',
    props: {
        modelValue: String,
        node: Object,
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
        return () => (
            <input
                type="text"
                value={props.modelValue ?? props.node.defaultValue ?? ''}
                onInput={(e) => emit('update:modelValue', e.target.value)}
                placeholder={props.node.label}
            />
        );
    },
};