Preview

<Preview>

<Preview> is a built-in component used to render production data. You can use it in a Vue component to see the actual effect of the module:

<template>
    <Preview id="ptah1" :schema="schemaData"></Preview>
</template>

<script>
import { defineComponent } from 'vue';
import { Preview } from '@ptahjs/creative-vue';

export default defineComponent({
    components: {
        Preview
    },
    setup() {
        const schemaData = shallowRef({});

        // Simulate API response data
        setTimeout(() => {
            schemaData.value = pageJson;
        }, 5000);

        return { schemaData };
    }
});
</script>

usePtah

usePtah is a hook function that takes id, isProd, and schema as parameters and returns the instance corresponding to the id. It is used to initialize and fetch preview data:

import { usePtah } from '@ptahjs/creative-vue';

const ptahInstance = usePtah({
    id: 've1',
    isProd: true,
    schema: pageJson
});

Parameter Explanation

• id: The unique identifier of the module, used to distinguish between different module instances.
• isProd: A boolean value indicating whether the module is running in a production environment. If true, the module will be rendered in the production environment.
• data: Page data (usually in JSON format), used to initialize the module's state and content.

Example

Here is a complete Vue component example that demonstrates how to use usePtah and the <Preview> component:

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

<script>
import { defineComponent } from 'vue';
import { usePtah, Preview } from '@ptahjs/creative-vue';

export default defineComponent({
    components: {
        Preview
    },
    setup() {
        const ptahInstance = usePtah({
            id: 've1',
            isProd: true,
            schema: pageJson
        });

        return { ptahInstance };
    }
});
</script>

This example shows how to use usePtah in combination with the <Preview> component to achieve module preview functionality.