Developing an admin panel using Vue.js for 1C-Bitrix

Admin Panel Development on Vue.js for 1C-Bitrix

The standard Bitrix admin panel is functional but inflexible. Custom administrative interfaces built with CAdminList, CAdminEditObject, and CAdminForm are PHP with synchronous requests and outdated UI. When business processes grow more complex — multi-step entity creation, embedded tables with filtering, drag-and-drop sorting — Bitrix's standard administration tools become a bottleneck.

When a Custom Vue Panel Is Justified

Bitrix's standard tools handle infoblock management, orders, and users well. A Vue panel is justified when:

• A specialized interface is needed for a specific business process: managing production orders, a call-center operator interface, content moderation with quick actions
• Data from multiple sources must be displayed in a single interface
• Speed matters — CRUD without page reloads, bulk operations
• The standard /bitrix/admin/ interface isn't appropriate — the panel is embedded in the frontend or on a separate subdomain

Architecture: How to Embed Vue in the Bitrix Admin Area

Option 1: a page in /bitrix/admin/. A PHP file is registered as an admin page, initializes permissions via $APPLICATION->AuthForm(), and includes the Vue bundle:

// /bitrix/admin/project_manager.php
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_admin_before.php");

if (!$USER->IsAdmin() && !$USER->IsInGroup(MANAGER_GROUP_ID)) {
    $APPLICATION->AuthForm("Access denied");
}

require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_admin_after.php");

echo '<div id="vue-admin-app" data-csrf="' . bitrix_sessid() . '"></div>';
$APPLICATION->AddHeadScript('/local/dist/admin-panel.js');

The Vue application mounts on #vue-admin-app. The CSRF token is passed via data-csrf to protect AJAX requests.

Option 2: a standalone SPA on a subdomain. A fully independent Vue application with Vue Router, authentication via the Bitrix REST API (user.current, session token in a cookie). Suitable for operator interfaces running on a dedicated device (warehouse tablet).

Option 3: Vue components inside the standard /area51 / custom admin section. Section pages are PHP; individual blocks (tables, forms) are Vue components. A hybrid approach when a full replacement is not justified.

Key Administrative Interface Components

DataTable with server-side pagination. An entity table with sorting, filters, and search. A server request on every filter change or page turn. Bulk operations: select multiple rows → batch status change, deletion, export. Inline cell editing for quick updates.

ResourceForm — create/edit form. React Hook Form or VeeValidate, dynamic fields (show/hide based on another field's value), nested entities (order + line items + extras — one submit). Auto-save draft to localStorage every 30 seconds.

Category tree with drag-and-drop. Infoblock sections as a nested tree, drag to change order and parent section. After drop — a PATCH request to update SORT and IBLOCK_SECTION_ID via CIBlockSection::Update.

Media file manager. Integration with the Bitrix /bitrix/admin/fileman_index.php via BX.Fileman, or a custom file browser on top of the CFile API.

Case: Content Management Panel for a News Portal

A media project on Bitrix, editorial team of 15 people. The standard administrative interface for the articles infoblock was inadequate: you couldn't quickly switch between articles, there was no publication queue, no scheduling tool.

We built an editorial panel — a dedicated page /bitrix/admin/editorial.php. A Vue application with three views:

• Editorial queue — a Kanban board (draft → review → held → published). An article card shows: title, author, publication date, view count from Metrika. Drag-and-drop status changes via SortableJS.
• Article list — a table with filters by author, tag, and date. Inline editing of title and publication date.
• Article editor — TinyMCE inside a Vue component, saving via CIBlockElement::Update, change history.

Access control: the editor-in-chief sees all articles, an author sees only their own. Checked in the PHP controller via Bitrix user groups; in Vue — UI elements are shown/hidden based on window.BX_STATE.permissions.

Development took 6 weeks: 2 weeks for interface and API design, 4 weeks for implementation.

API Layer: Controllers for Vue

All Vue panel operations go through REST controllers. The base class Bitrix\Main\Engine\Controller provides:

• Automatic CSRF protection via bitrix_sessid()
• Action logging via Bitrix\Main\Diag\Debug
• Exception handling with JSON error responses

Standard response structure: {status: 'success', data: {...}} or {status: 'error', message: '...'}. Vue uses a single api.js service with an axios interceptor handling 401/403.

Stages and Timelines

Timelines are determined by the number of entities, business logic complexity, and access control requirements.