Кастомизация

Конфигурация приложения

Настройка параметров Frame через JS и PHP

Frame принимает конфигурацию из двух источников: JavaScript (при регистрации плагина) и PHP (через Laravel Config). PHP-параметры имеют приоритет над JS — это позволяет задать значения по умолчанию в JS и переопределить их на стороне сервера.

JS-конфигурация

При инициализации приложения передаётся объект конфигурации:

import { createApp } from 'vue'
import { Frame, FramePlugin } from '@frame/vue'
import locale from '../../lang/ru.json'

const app = createApp(Frame)

app.use(FramePlugin, {
    path: '/',
    endpoint: '/api/frame',
    appName: 'My Application',
    appLogoPath: '/images/logo.png',
    version: '1.0.0',
    buildDate: '2026-03-17',
    i18n: locale,
    docsUrl: 'https://docs.example.com',
    docsEnabled: true,
    footerEnabled: true,
})

app.mount('#app')

Параметры

Параметр	Тип	По умолчанию	Описание
`appName`	`string`	`'Qubeek.io'`	Название приложения в заголовке и навбаре
`appLogoPath`	`string \| null`	`null`	Путь к логотипу
`siteUrl`	`string \| null`	`null`	URL основного сайта
`endpoint`	`string \| null`	`'/api'`	Базовый путь API
`path`	`string \| null`	`'/'`	Базовый путь веб-интерфейса
`i18n`	`object \| null`	`{}`	Объект с переводами
`locale`	`Locale`	`enUS`	Локаль date-fns для форматирования дат
`version`	`string \| null`	`null`	Версия приложения (отображается в футере)
`buildDate`	`string \| null`	`null`	Дата сборки (отображается в футере)
`docsUrl`	`string \| null`	`null`	URL документации
`docsEnabled`	`boolean`	`false`	Показывать ли ссылку на документацию
`footerEnabled`	`boolean`	`false`	Показывать ли футер

PHP-конфигурация (Laravel)

На стороне Laravel конфигурация задаётся в FrameServiceProvider — резолвьте singleton Config из контейнера и вызывайте сеттеры внутри boot() (или register()):

app/Providers/FrameServiceProvider.php

use Frame\Core\Config\Config;

class FrameServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        /** @var Config $config */
        $config = app(Config::class);

        $config
            ->setAppName('My Application')
            ->setLogo('/images/logo.png')
            ->setSiteUrl('https://example.com')
            ->setPath('/')
            ->setFavicon('/images/favicon.png');
    }
}

Методы Config

Метод	Описание
`setAppName(string)`	Название приложения
`setLogo(string)`	Путь к логотипу
`setFavicon(string)`	Путь к фавиконке
`setSiteUrl(string)`	URL основного сайта
`setPath(string)`	Базовый путь веб-интерфейса
`setDomain(string)`	Домен приложения
`setDefaultLocale(string)`	Локаль по умолчанию
`setLocales(array)`	Доступные локали
`setApiMiddleware(array)`	Middleware для API-маршрутов
`setWebMiddleware(array)`	Middleware для веб-маршрутов

Приоритет конфигурации

Значения применяются в следующем порядке (последний выигрывает):

Приоритет	Источник	Пример
1 (низший)	Значения по умолчанию	`appName: 'Qubeek.io'`
2	JS-конфигурация	`FramePlugin` options
3 (высший)	PHP-конфигурация	`Config::setAppName()`

Это значит: если вы задали appName: 'My App' в JS и setAppName('Production App') в PHP — будет использовано 'Production App'.

Маппинг ключей

PHP и JS используют разные имена для одних и тех же параметров:

PHP (Config)	JS (FramePlugin)	Описание
`app_name`	`appName`	Название приложения
`logo`	`appLogoPath`	Логотип
`api_path`	`endpoint`	Путь API
`path`	`path`	Путь веб-интерфейса
`domain`	`siteUrl`	Домен / URL сайта
`favicon`	—	Фавиконка (только PHP)

Параметры только в JS

Следующие параметры доступны только через JS-конфигурацию, так как не имеют смысла на стороне сервера:

i18n — переводы интерфейса
locale — локаль date-fns
version — версия приложения
buildDate — дата сборки
docsUrl — ссылка на документацию
docsEnabled — показ ссылки на документацию
footerEnabled — показ футера

Кастомные настройки

Конфигурация поддерживает произвольные ключи. Это позволяет модулям и плагинам хранить свои настройки глобально и обращаться к ним из любого компонента.

Передача при регистрации

app.use(FramePlugin, {
    appName: 'My App',
    endpoint: '/api/frame',

    // Кастомные настройки
    analytics: {
        enabled: true,
        trackingId: 'UA-123456',
    },
    featureFlags: {
        newDashboard: true,
        betaExport: false,
    },
    maxUploadSize: 10 * 1024 * 1024,
})

Чтение из компонентов

Для доступа к конфигурации используйте хелперы useConfig и useFrame из @frame/core:

import { useConfig, useFrame } from '@frame/core'

// Весь объект конфигурации
const config = useConfig()

// Конкретный ключ с fallback-значением
const maxSize = useConfig('maxUploadSize', 5 * 1024 * 1024)

// Доступ к экземпляру Frame
const frame = useFrame()

Использование в модулях

Модули могут объявлять свои настройки и читать их при инициализации:

import { useConfig } from '@frame/core'

export function useMyModule() {
    const config = useConfig('myModule', {})
    const apiUrl = config.apiUrl ?? '/api/my-module'

    return { apiUrl }
}

// При регистрации Frame
app.use(FramePlugin, {
    myModule: {
        apiUrl: '/api/v2/custom-module',
    },
})

Дизайн-токены

Полный список CSS-переменных, доступных для кастомизации

Профиль пользователя

Настройка маппинга полей и формата отображения имени, email и аватара пользователя