Developing a Vue.js application for 1C-Bitrix

Vue.js Application Development for 1C-Bitrix

The question of how to integrate Vue into Bitrix comes up when standard jQuery-based components and server-rendered output can no longer keep up with interactivity demands. Bitrix does not provide a built-in mechanism for Vue, but the platform is flexible enough for a Vue application to work seamlessly — via REST API or custom AJAX handlers.

Architectural Approaches

Widget on a page — a Vue application mounts into a specific DOM element within a Bitrix page. The rest of the site works as usual. Suitable for isolated interactive blocks: calculators, configurators, forms with business logic.

SPA with Bitrix as backend — the Vue application takes over the entire page and receives data via REST API or /bitrix/services/main/ajax.php. The Bitrix template renders minimal HTML with a mount point and passes initial data via window.__INITIAL_STATE__.

Hybrid approach — Bitrix handles server-side rendering while Vue manages interactive blocks. Relevant when SEO indexing of content is required without SSR.

Passing Data from Bitrix to Vue

The server passes initial data inside the component template:

// In a Bitrix template (.php)
$APPLICATION->addHeadScript(
    '<script>window.__BITRIX_STATE__ = ' . json_encode([
        'userId' => $USER->GetID(),
        'catalogId' => $arResult['IBLOCK_ID'],
        'currency' => CCurrency::GetByID('RUB'),
    ]) . ';</script>'
);

In the Vue application:

const state = window.__BITRIX_STATE__ || {}

This avoids an extra AJAX request on initial page load.

Build & Connection

Vite or Webpack — Vite is more convenient for Bitrix due to its speed and simple configuration:

// vite.config.js
export default {
  build: {
    outDir: 'local/templates/main/vue-dist',
    rollupOptions: {
      input: { app: 'src/main.js' }
    }
  }
}

The compiled bundle is connected in the Bitrix template via $APPLICATION->AddHeadScript() or Asset::getInstance()->addJs(). Do not use inline <script> tags directly in the template — Bitrix may reorder script loading.

Bitrix REST API for Vue

The Bitrix REST API (rest module) is the standard approach for requests from Vue. Key methods for an online store:

• catalog.product.list — product listing
• sale.order.add — order creation
• crm.contact.add — adding a contact to CRM

For non-standard operations — custom methods via \Bitrix\Rest\RestManager::addMethod() or AJAX handlers at /bitrix/services/main/ajax.php using \Bitrix\Main\Engine\Controller.

Real-World Case

A dealer portal with a spare parts catalog filtered by 15 parameters. The standard catalog.section component with AJAX filter was slow with 50,000+ items — every filter change triggered a full server-side re-render. The solution: replacing it with a Vue application using debounced requests to a custom REST method returning JSON. Server rendering was kept only for the initial page load to support SEO. Filter response time dropped from 2–3 seconds to 300–500 ms.

State Management

For simple widgets — Vue 3's reactive() or ref(). For SPAs with authentication, a cart, and a user account — Pinia (the official replacement for Vuex in Vue 3). Vuex is only relevant if the project is already on Vue 2.

Delivery Timelines

Timelines depend on the availability of a ready REST API and the complexity of business logic.