With a catalog of 50,000 items, the standard catalog.section component with an AJAX filter took 2–3 seconds per change. Customers lost patience, conversion dropped. We implemented Vue.js — and response time dropped to 300–500 ms. Vue.js outperforms standard Bitrix AJAX filtering by up to 10 times. With 10+ years of certified Bitrix and Vue experience and 50+ successful integration projects, we cut client server load costs by up to 30% — equating to savings of roughly $500 per month on infrastructure. Infrastructure maintenance costs also dropped noticeably. This article covers the best practices for Vue.js Bitrix integration: key architectural decisions, data transfer methods, build setup, and a real-world case. If you have a similar challenge, contact us for a consultation and preliminary analysis of your project.
Architecture: Widget, SPA, or Hybrid
The choice depends on the task. For an online store with a large catalog, the hybrid approach offers the best balance between SEO and performance. Widgets work for isolated blocks; SPAs are ideal for full-fledged personal accounts or admin panels. We design the architecture with speed, SEO, and maintainability in mind.
Widget on a page — the Vue app mounts into a specific DOM element within the Bitrix page. The rest of the site works as usual. Suitable for isolated interactive blocks: calculators, configurators, forms with logic.
SPA with Bitrix as backend — the Vue app covers the entire page, data comes via REST API or /bitrix/services/main/ajax.php. The Bitrix template renders minimal HTML with a mount point and passes initial data through window.__INITIAL_STATE__.
Hybrid approach — Bitrix renders server-side content, Vue manages interactive blocks. Relevant when SEO indexing is needed without SSR.
How to Transfer Data from Bitrix to Vue?
The server passes initial data in the component template:
Click to view PHP code snippet
// In 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 first load.
Why Vue.js for an E-commerce Site on Bitrix?
Standard Bitrix components use server-side rendering on every AJAX request. With a catalog of 50,000+ items, filtering takes 2–3 seconds. Vue.js moves logic to the client, cutting time to 300–500 ms. Plus, Vue's virtual DOM and reactive data binding optimize rendering, updating only the necessary DOM nodes. Vue simplifies complex UI scenarios: drag-and-drop cart, multi-step forms, interactive calculators. Reduced server load also lowers hosting costs.
Technical Implementation
Build and Inclusion
Vite or Webpack — Vite is more convenient for Bitrix due to 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 included in the Bitrix template via $APPLICATION->AddHeadScript() or Asset::getInstance()->addJs(). Do not use <script> directly in the template — Bitrix may reorder script loading.
Bitrix REST API for Vue
The Bitrix REST API (module rest) is the standard way for Vue requests. For e-commerce, key methods:
-
catalog.product.list— product list -
sale.order.add— order creation -
crm.contact.add— contact addition to CRM
For custom operations, use custom methods via \Bitrix\Rest\RestManager::addMethod() or AJAX handlers on /bitrix/services/main/ajax.php with \Bitrix\Main\Engine\Controller. See the official 1C-Bitrix documentation for details.
State Management
For simple widgets, use reactive() or ref() from Vue 3. For SPA with authentication, cart, personal account, use Pinia (the official replacement for Vuex in Vue 3). Vuex is only relevant if the project is already on Vue 2.
Caching in the Vue Application
To improve performance, cache REST method responses on the Vue side using Pinia or composables. Minimize the number of requests by aggregating data on the server. For example, one catalog.product.list method with filters and sorting returns everything needed to render the list.
Case Study: Dealer Portal with Filtering
A dealer portal: spare parts catalog with filtering by 15 parameters. The standard catalog.section component with an AJAX filter was slow for 50,000+ items — each filter change triggered full server-side rendering. Solution: replaced with a Vue app using debounced requests to a custom REST method returning JSON. Server-side rendering remained only for the first load with SEO content. Filter response time dropped from 2–3 seconds to 300–500 ms — up to 10 times faster. Development time saved about 30% by eliminating complex server-side logic. For REST principles, see Wikipedia.
Comparison of Approaches
| Criteria | Widget | SPA | Hybrid |
|---|---|---|---|
| SEO | Full indexing | SSR required | Server-side indexing |
| Complexity | Low | High | Medium |
| Interactivity | Limited | Full | Partial |
| Development speed | 1–3 days | 15–30 days | 5–10 days |
What's Included and Timelines
Scope of Work
- Analysis of current architecture and integration scheme.
- Design of Vue component structure and REST methods.
- Development of widget/SPA with caching and SEO considerations.
- Build setup (Vite/Webpack) and inclusion in Bitrix template.
- Testing on real data and load testing.
- Operational documentation and developer guide.
- Team training (up to 2 hours).
- 30-day post-delivery support — guarantee included.
Development Timelines
| Application Type | Development Time |
|---|---|
| Widget (calculator, form) | 1 to 3 working days |
| Catalog with filtering | 5 to 10 working days |
| SPA (catalog + cart + personal account) | 15 to 30 working days |
Timelines depend on the availability of a ready REST API and business logic complexity. Cost is calculated individually after analyzing your tasks. Typical widget projects start from $1,000.
Request a Consultation
Contact us for a tailored Vue.js Bitrix integration solution. Our team holds official 1C-Bitrix certifications and has a proven track record with 50+ successful integrations. Get a consultation and time estimate. Order a preliminary analysis of your current solution — we'll help you choose the optimal architecture.
Request a consultation today.