Create a Module

Registering Modules

Modules are registered by passing a module tree to createPtah.

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

app.use(createPtah({
    id: 've1',
    renderer: WebRenderer,
    modules: [
        {
            title: 'Web Modules',
            children: [
                {
                    title: 'Common',
                    children: [UiButton, UiBox],
                },
            ],
        },
    ],
    parameterComponents: editors,
}));

---

Module Structure

Each module usually lives in its own directory:

UiButton/
  index.js
  component.jsx

index.js exports the module definition. component.jsx exports the rendered component.

index.js

import component from './component.jsx';

export default {
    type: 'UiButton',
    title: 'Button',
    visible: true,
    engineVersion: '0.0.1',
    latestVersion: '1.0.0',
    versions: {
        '1.0.0': {
            component,
            schema: {
                propsSchema: [],
                eventSchema: [
                    { type: 'click', title: 'Click' },
                    { type: 'onload', title: 'Load' },
                ],
                slotSchema: [],
            },
        },
    },
};

component.jsx

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

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

const props = defineProps({
    id: { type: String, default: '' },
});

const app = inject(PTAH_INSTANCE);
const module = computed(() => app.$state.modulesById.get(props.id));
const moduleProps = computed(() => module.value?.props || {});
</script>

---

Prop Schema Helpers

Import helpers from @ptahjs/ui-vue:

import {
    stringProp,
    numberProp,
    booleanProp,
    selectProp,
    objectProp,
    arrayProp,
    groupProp,
} from '@ptahjs/ui-vue';

Function	Description
stringProp(options)	String field
numberProp(options)	Number field
booleanProp(options)	Boolean toggle
selectProp(options)	Select field
objectProp(options)	Nested object field
arrayProp(options)	Array field
groupProp(options)	Visual grouping

propsSchema Example

propsSchema: [
    stringProp({
        component: 'PropString',
        field: 'label',
        label: 'Label',
        defaultValue: 'Button',
    }),
    numberProp({
        component: 'PropNumber',
        field: 'width',
        label: 'Width',
        defaultValue: 100,
    }),
    booleanProp({
        component: 'PropBoolean',
        field: 'disabled',
        label: 'Disabled',
        defaultValue: false,
    }),
]

slotSchema Example

slotSchema: [
    {
        key: 'default',
        title: 'Default Slot',
        propsSchema: [],
        allow: [],
        deny: [],
    },
]

See Creating Module Configuration for parameter component development.