script.js API Reference

Every SA plugin registers itself by assigning a function to plugins["name"]. All methods below are called on this inside that function.

plugins["my-plugin"] = function () {
    // call methods here
}

addLanguage

Register a translation namespace for a locale.

this.addLanguage(locale, namespace, translations)

Parameter	Type	Description
locale	string	Locale code — "ar", "en", etc.
namespace	string	Namespace prefix used in $t()
translations	object	Key/value translation pairs

Example:

this.addLanguage("ar", "cashir", {
    name: "كاشير",
    products: "المنتجات",
    bills: "الفواتير"
});

this.addLanguage("en", "cashir", {
    name: "Cashir",
    products: "Products",
    bills: "Bills"
});

In templates: {{ $t("cashir.name") }}

addWidget

Register a Vue component as a dashboard widget.

this.addWidget(options)

Option	Type	Description
name	string	Unique internal name — use "/[plugin-name]filename.vue" format
id	string	Unique widget instance ID
file	string[]	Path to the .vue file relative to the version folder, as an array

Example:

this.addWidget({
    name: "/[clock]widget.vue",
    id: "init-clock",
    file: ["clock", "widget.vue"]
});

The widget component must wrap its root in the SA grid column:

<template>
    <div class="col-12 lg:col-6 xl:col-3 p-1">
        <div class="card h-full">
            <!-- widget content -->
        </div>
    </div>
</template>

addTo

Add an entry to the SA sidebar. The second argument selects the target section — defaults to "router" (main nav).

this.addTo(options)              // main navigation (default)
this.addTo(options, "setting")   // settings section
this.addTo(options, "toolbar")   // toolbar

Single link (settings)

this.addTo({
    label: "Quick Links",
    key: "quickLinks.name",
    icon: "mdi mdi-link",
    to: "/app/setting/quickLinks"
}, "setting");

Option	Type	Description
label	string	Fallback display text
key	string	i18n key for the label
icon	string	Icon class (pi pi-* or mdi mdi-*)
to	string	Route path to navigate to

Grouped menu (main nav)

For plugins with multiple pages, pass items to create a collapsible group:

this.addTo({
    label: "Cashir",
    key: "cashir.name",
    items: [
        {
            label: "Products",
            key: "cashir.products",
            icon: "mdi mdi-shape-outline",
            items: [
                {
                    label: "List",
                    key: "cashir.list",
                    icon: "mdi mdi-format-list-group",
                    to: "/app/cashir/products"
                },
                {
                    label: "Add",
                    key: "cashir.add",
                    icon: "mdi mdi-format-list-group-plus",
                    to: "/app/cashir/products/add"
                }
            ]
        },
        {
            label: "Bills",
            key: "cashir.bills",
            icon: "mdi mdi-receipt-text-outline",
            items: [
                {
                    label: "List",
                    key: "cashir.list",
                    icon: "mdi mdi-format-list-group",
                    to: "/app/cashir/bills"
                },
                {
                    label: "Add",
                    key: "cashir.add",
                    icon: "mdi mdi-receipt-text-plus-outline",
                    to: "/app/cashir/bills/add"
                }
            ]
        }
    ]
});

Groups can be nested up to two levels deep (group → subgroup → link).

Toolbar entry

this.addTo({
    label: "My Tool",
    key: "my-plugin.name",
    icon: "mdi mdi-tools",
    to: "/app/my-plugin"
}, "toolbar");

addTask

Add a component to the SA tasks area (separate from the main dashboard widget grid).

this.addTask(options)

Option	Type	Description
name	string	Unique internal name — use "/[plugin-name]filename.vue" format
file	string[]	Path to the .vue file relative to the version folder, as an array

Example:

this.addTask({
    name: "/[my-plugin]task.vue",
    file: ["my-plugin", "task.vue"]
});

addTask and addWidget are distinct — addWidget adds to the dashboard widget grid, addTask adds to the tasks area.

addPage

Register a Vue component as a route in the SA router.

this.addPage(options)            // app route  → /app/{path}
this.addPage(options, "setting") // setting route → /app/setting/{path}

Option	Type	Description
name	string	Unique route name — use "/[plugin-name]filename.vue" format
path	string	Route path segment (no leading slash)
file	string[]	Path to the .vue file relative to the version folder, as an array

Settings page example:

this.addPage({
    name: "/[quickLinks]setting.vue",
    path: "quickLinks",
    file: ["quickLinks", "setting.vue"]
}, "setting");
// accessible at /app/setting/quickLinks

App pages with dynamic segments:

this.addPage({
    name: "/[cashir]products.vue",
    path: "cashir/products",
    file: ["cashir", "products", "products.vue"]
});

this.addPage({
    name: "/[cashir]editedProduct.vue",
    path: "cashir/products/:id",
    file: ["cashir", "products", "editedProduct.vue"]
});
// accessible at /app/cashir/products and /app/cashir/products/add

In the component, read the dynamic param with this.$route.params.id.

Method Summary

Method	Purpose
addLanguage(locale, ns, obj)	Register translations
addWidget(options)	Add a component to the dashboard widget grid
addTask(options)	Add a component to the tasks area
addTo(options)	Add entry to main nav ("router" — default)
addTo(options, "setting")	Add entry to the settings sidebar
addTo(options, "toolbar")	Add entry to the toolbar
addPage(options)	Register an app route (/app/{path})
addPage(options, "setting")	Register a settings route (/app/setting/{path})

Comparison with EA

Feature	SA	EA
Database	api.database() (local, sync)	app.database() via HTTP
Backend	None	main.js (Express/NestJS)
Sidebar	addTo(options, "router"|"setting"|"toolbar")	addToSetting(), addToDashboard(), etc.
Pages	addPage(options[, "setting"])	addPage(options)
Widget area	addWidget(options)	addWidget(options)
Tasks area	addTask(options)	Not available
Roles	Not available	addRole()