Creating an Application

Overview

A typical PtahJs app has three parts:

1. Register resources with createPtah()
2. Create a runtime with useRuntimeApp() or useDesignerApp()
3. Render with built-in components such as <Preview> or <DesignerRoot>

---

Register Resources

import { createApp } from 'vue';
import { createPtah, WebRenderer } from '@ptahjs/ui-vue';
import App from './App.vue';

const vueApp = createApp(App);

vueApp.use(createPtah({
    id: 've1',
    renderer: WebRenderer,
    modules: moduleTree,
    sceneConfig: sceneSchema,
    parameterComponents: editors,
}));

vueApp.mount('#app');

Registered Resources

• renderer: renderer template and install hook
• modules: module tree and schema definitions
• sceneConfig: scene-level schema definition
• parameterComponents: field editors used by <ParameterWidget>

---

Preview Mode

<template>
    <Preview :app="runtime" />
</template>

<script setup>
import { useRuntimeApp, Preview } from '@ptahjs/ui-vue';

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

fetch('/api/page-schema')
    .then((r) => r.json())
    .then((data) => runtime.schema(data));
</script>

Use this when you only need runtime rendering.

---

Designer Mode

<template>
    <DesignerRoot :app="runtime">
        <aside>
            <ScenesWidget />
            <ModulesWidget />
        </aside>
        <main>
            <WorkspaceWidget />
        </main>
        <aside>
            <ParameterWidget type="module" />
            <EventsWidget type="module" />
        </aside>
    </DesignerRoot>
</template>

<script setup>
import {
    useDesignerApp,
    DesignerRoot,
    ScenesWidget,
    ModulesWidget,
    WorkspaceWidget,
    ParameterWidget,
    EventsWidget,
} from '@ptahjs/ui-vue';

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

designer.addScene({ props: { title: 'Page 1' } });
</script>

Use this when you need editing, DnD, history, and schema export.

---

Multiple Instances

Use different id values to run multiple isolated PtahJs apps on the same page.

vueApp.use(createPtah([
    {
        id: 've1',
        renderer: WebRenderer,
        modules: moduleTree1,
        parameterComponents: editors1,
    },
    {
        id: 've2',
        renderer: WebRenderer,
        modules: moduleTree2,
        parameterComponents: editors2,
    },
]));

---

Exporting Page Data

const pageJson = runtime.designer.getPageSchema();