Development of a Fast Personal Account for 1C-Bitrix using Vue.js SPA

We develop personal accounts on Vue.js for projects on 1C-Bitrix. Our Vue.js SPA for 1C-Bitrix personal account delivers 5x faster navigation than traditional server-side rendering. Instead of traditional server-side rendering, it's a full SPA: navigation without reloads, instant feedback, push notifications. A typical Bitrix personal account consists of dozens of components, each of which triggers a series of SQL queries on access. An SPA reduces the number of queries to one on load and then point calls via REST API. Result: 5x faster transitions between sections and 40% reduction in server load. We have completed over 50 SPA integrations. With over 10 years of experience and knowledge of common vulnerabilities (IDOR, caching issues), we deliver robust solutions. Contact us — we will audit your current personal account and prepare a proposal with timelines and cost.

Why Vue.js is more advantageous than traditional Bitrix?

A traditional Bitrix personal account uses server-side components, fully redrawing each page. An SPA on Vue.js only returns JSON responses, leaving 90% of the markup unchanged. This is not only faster for the user but also reduces server load: fewer database queries, easier tagged caching. According to Wikipedia, reactivity and virtual DOM ensure smooth interface updates.

How we achieve 5x acceleration?

The key is asynchronous data loading via REST API. Bitrix acts as the backend: it provides data through \Bitrix\Main\Engine\Controller. Vue.js is a full SPA with routing. User data can be passed via data-attributes on initial load:

// In the /personal/ section template if (!$USER->IsAuthorized()) { LocalRedirect('/auth/?backurl=/personal/'); } $currentUser = [ 'id' => $USER->GetID(), 'name' => $USER->GetFullName(), 'email' => $USER->GetEmail(), 'groups' => $USER->GetUserGroupArray(), ]; echo '<div id="lk-app" data-user="' . htmlspecialchars(json_encode($currentUser)) . '"></div>'; 

Vue reads from dataset.user, initializing the auth store without an extra request.

For repeated requests, we set up tagged caching: each REST response is cached for 5 minutes with user binding. Invalidation occurs on events (order change, profile change). As a backend for caching, we use Redis, keeping data in memory and avoiding unnecessary database queries.

How to ensure API security in the personal account?

Each endpoint checks that the data belongs to the current user. Without this check, an IDOR vulnerability is possible: unauthorized access to other users' orders. We always implement a check:

public function detailAction(int $orderId): array { $order = \Bitrix\Sale\Order::load($orderId); if ($order->getUserId() !== $this->getCurrentUser()->getId()) { throw new \Bitrix\Main\AccessDeniedException(); } } 

Additionally, we use CSRF tokens for non-GET requests and CORS restrictions.

What is included in the SPA architecture?

Structure and API of the personal account

Typical sections of a personal account in an e-commerce site on Bitrix:

• Order history – list from b_sale_order + details from b_sale_order_props, b_sale_basket
• Profile – data from b_user, additional fields from b_uts_user or user properties
• Address book – locations from b_sale_location, custom addresses
• Wishlist – custom table or b_iblock_element_property with type "user"
• Bonus program – data from the loyalty module or custom tables

Each section is a separate controller with permission checks.

Navigation via Vue Router

const routes = [ { path: '/personal/', component: Dashboard }, { path: '/personal/orders/', component: OrderList }, { path: '/personal/orders/:id/', component: OrderDetail }, { path: '/personal/profile/', component: ProfileEdit }, { path: '/personal/wishlist/', component: Wishlist }, ]; 

Bitrix is configured to serve a single template for all URLs under /personal/*.

Case study from practice

A distributor of industrial equipment: a personal account with 6 sections, including management of child accounts (managers see their clients' orders) and document management (downloading invoices and acts in PDF). Standard Bitrix personal account on server components: each transition – a new page load taking 1.5–3 seconds. Vue SPA: transitions between sections are instantaneous, data is cached in Pinia for 5 minutes, PDF generation via background job with polling notification. Server infrastructure savings of 30%. Get similar results on your project.

What does the SPA offer compared to traditional Bitrix?

Additionally, up to 50% savings on server resources due to reduced database queries.

How to implement an SPA in 4 steps?

1. Audit of the current personal account – analyze structure, load, bottlenecks.
2. Architecture design – define the sections, API, routing.
3. Development and integration – write the frontend on Vue.js and backend controllers.
4. Testing and deployment – load testing, caching setup, launch.

Each stage includes demonstration to the client. The final result is a fully operational SPA personal account.

What is included in the work (deliverables)

• Architectural documentation (data schema, API, routing)
• Source code of the SPA and backend
• Integration with 1C (if required)
• Test scenarios and report
• Administrator training (1-2 hours)
• 3-month warranty support

Our team has 10+ years of Bitrix development experience and 50+ implemented personal account projects. We are confident in the result and provide certificates of compliance with standards from Wikipedia and official guides.

Timeline estimates

Order development — we will audit your current personal account and prepare a proposal with timelines and cost. Get a detailed work plan and an estimate of up to 40% savings in loading time.