Frontend Capabilities

A lot of functionalities are already available when only working with the frontend. There are some functions that need Initial Registration on startup in your script.js. Additionally the core exposes an SpPS ()

Initial Registration

Specific functionality may be registered to the frontend by calling register functions on startup. Those functons are:

Function	Description
register*	Required to register the frontend capabilities of the plugin, but can additonally be used to register various other features.
registerComponent	Registers a component to be used as an attribute or to be consumed by another plugin.
registerI18N	Register additional i18n translations for the plugin.
registerRoutes	Register additional vue routes used by the plugin.
registerPreference	Register additional preferences
intoSlot	Register a component into a plugin slot (e.g. Maps-Plugin registered into the 'Tab' slot to show the map)

* is required to be called by the plugin (unless it only uses PHP)

Universal Register

You need to register a plugin with the register function to make the core application aware of the plugin script.

register({id*, i18n, routes, store})

Id string - is required and must be unique for your plugin.
i18n i18nObject - automatically calls the registerI18N(i18n) method
routes - routesArray automatically calls the registerRoutes(routes) method
store store of the plugin to register

Register Components

You can register components either to use them as Attribute or simply register a component for other plugins to utilize. Internally used components don't need to be registered to the core they will just be compiled by the bundler into the script.js

registerComponent({
    of*,
    key*,
    type*,
    datatype**,
    component*,
})

of string - unique id string of the plugin.
key string - unique key string of the preference.
type _['attribute' | 'component'] - if the component is used as attribute.
datatype string - name of the datatype (** required if type is attribute).
component component - component to mount

Register I18N

The i18n method is used to register the i18n files of the plugin.

registerI18N(id*, i18n*)

Id string - unique id string of the plugin.
i18n i18nObject - the i18n object of the plugin.

I18N Object

The i18n object is a JSON object with the following structure:

{
    "en": {
        "message": "This is a message in english."
        ...
    },
    "de": {
        "message": "Dies ist eine Nachricht auf deutsch."
        ...
    }
}

Register Routes

The routes method is used to register the routes of the plugin.

registerRoutes(id*, routes*)

Id string - unique id string of the plugin.
routes routesArray - the routes object of the plugin.

Routes Array

Array that contains vue-router routes. For example:

...
[
    {
        "path": "/plugin",
        "name": "plugin",
        "component": MyPluginComponent,
        "meta": {
            "title": "Plugin"
        }
    },
    ...
]

Register Preferences

The preferences method is used to register the preferences of the plugin.

registerRoutes({
    of*, 
    key*, 
    label*, 
    category*, 
    subcatogery*, 
    custom_subcategory, 
    custom_label,
    component, 
    componentTag, 
    data, 
    default_value
})

of string - unique id string of the plugin.
key string - unique key string of the preference.
label string - label of the preference.
category ["system","user"] - category of the preference ().
subcategory string - subcategory of the preference.
custom_subcategory string - custom subcategory of the preference.
custom_label string - custom label of the preference. Must be set if custom_subcategory is set.
component string - component of the preference.
componentTag string - tag of the component.

Into Slot

The intoSlot method is used to register the plugin into a slot. E.g. the 'Tab' view of the details page.

intoSlot({
    of*,
    slot*,
    component,
    componentTag,
    key,
    icon,
    label,
    href
})

of string - unique id string of the plugin.
slot ["tab","tools","settings"] - unique slot string of the plugin.
key string - unique key string of the slot.
icon string - icon of the slot.
label string - label of the slot.
href string - Unknown at the moment.
component string - component of the slot. Requires componentTag to be set.
componentTag string - tag of the component, defaults to key.