Skip to content

Developing Plugins

Plugins are used to extend the engine's functionality, adding additional capabilities or features.

Plugin Format

A plugin needs to be defined following a specific format. Below is an example of a plugin format:

js
export default {
    name: 'PluginName',
    install(engine) {
        let name = '';

        // Define a method to set the name
        engine.$setName = (val) => {
            name = val;
        };

        // Define a method to get the name
        engine.$getName = () => {
            return name;
        };
    }
};

In this example, the install method is used to inject plugin functionality into the engine instance. The plugin provides two new methods: $setName and $getName, which are used to set and get the name value.

Installing Plugins

To use a plugin, it first needs to be installed into the engine instance. Below is an example of how to install a plugin:

js
import TestPlugin from './TestPlugin';
import { createPtah } from '@ptahjs/creative-vue';

const ptah = createPtah({
    id: 've1'
});

// Install the plugin
ptah.use(TestPlugin);

In this example, the createPtah function is used to create an engine instance, and then the plugin is installed into the engine using the ptah.use method.

Using Plugin Functionality

Once the plugin is installed, you can use the functionality provided by the plugin in the engine instance. For example, in a .vue file, you can use the plugin's functionality like this:

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

const ptahInstance = usePtahInstance();

// Use the plugin's $setName method
ptahInstance.$setName('Test');

// Use the plugin's $getName method
console.log(ptahInstance.$getName()); // Output: 'Test'

In this example, the usePtahInstance hook is used to get the application instance, and then the methods provided by the plugin can be used to manipulate data or get results.

With plugins, you can easily extend the functionality of the engine, making it more flexible and powerful.