Creating an Application

When creating an application with PtahJs, you can follow a series of simple steps. Below is a detailed guide to help you create and launch a PtahJs application.

Preparation

Refer to the official website for Creating a Vue Project.

Application Example

Create a new application instance using the createPtah function:

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

const ptahApp = createPtah({
    id: 've1',
    licenseKey: '******'
});

Associating the Vue Instance

Next, associate the Vue instance with the Ptah application using the $vueInstance method:

// Vue instance
const vueInstance = createApp(App);

ptahApp.$vueInstance(vueInstance);

Selecting the Application Mode

PtahJs offers multiple running modes. You can set the mode using the $mode method:

import ModeWeb from '@ptahjs/creative-vue-mode-web';
import ModeMobile from '@ptahjs/creative-vue-mode-mobile';
import ModeCanvas from '@ptahjs/creative-vue-mode-canvas';
import Mode3D from '@ptahjs/creative-vue-mode-3d';
import ModeFlow from '@ptahjs/creative-vue-mode-flow';

ptahApp.$mode(ModeWeb);

For more details on modes: Mode API Documentation

Loading Resources

PtahJs supports various resource loading methods. You can use the $load method to load the required resources:

ptahApp.$load(RESOURCE_TYPE.SCENE_PROPS, []); // Load scene properties
ptahApp.$load(RESOURCE_TYPE.SCENE_EVENTS, []); // Load scene events
ptahApp.$load(RESOURCE_TYPE.BLOCKS, []); // Load raw modules
ptahApp.$load('Custom', [1, 2, 3]); // Custom resources

For more details on resource types: Resource Types API

Launching the Application

Finally, launch the application using the mount method:

ptahApp.mount();

Multiple Application Instances

You are not limited to just one application instance. The createPtah API allows you to create multiple Ptah applications on the same page, with each application having its own scope for configuration and global resources.

const ptahApp1 = createPtah({
    id: 'ptah1'
    /* ... */
}).mount();

const ptahApp2 = createPtah({
    id: 'ptah2'
    /* ... */
}).mount();

Each application instance has its own independent scope and will not interfere with one another.