<Provider>

The <Provider> component is used to provide Ptah engine functionality to your application, ensuring the proper operation of Ptah-related features. It must inject a Ptah instance via the app property, and is typically used in the root component of the application (e.g., App.vue) to provide global access to Ptah functionality for child components.

Parameters

• app (Object):
  • An initialized Ptah instance. This instance provides the Ptah engine features required by the application, such as dynamic module rendering, content management, etc.
  • Example: const app = usePtah();

Usage Example

Basic Example

In the App.vue or another root component, you can pass the Ptah instance to the <Provider> component via the app property:

<template>
    <Provider :app="app">
        <!-- Your Ptah application -->
    </Provider>
</template>

<script>
export default {
    data() {
        return {
            app: usePtah() // Create and initialize Ptah instance
        };
    }
};
</script>

In this example, usePtah() is the function used to create the Ptah instance, which is then passed to the <Provider> component. Child components can access Ptah's functionality within this context.

Configuration and Customization

The <Provider> component itself does not require additional custom configuration. The only requirement is to ensure that the Ptah instance is correctly passed as the app property. This allows child components to access Ptah's features via the context.

Notes

• app property: Ensure that the app passed is a valid and initialized Ptah instance. If app is not correctly passed or initialized, child components will not be able to access Ptah's functionality.
• Global Access: By passing the Ptah instance to the <Provider>, it provides global context for child components, allowing them to easily use Ptah's functionality.

Using with Other Components

The <Provider> component is one of the root components in the application, typically used in combination with other Ptah components (such as <Preview>, <ModulesRenderer>, <ModuleConfigureWidget>, etc.) to provide Ptah's functionality and support across the entire application.