Vue.js Development Services for 1C-Bitrix

Vue.js Development for 1C-Bitrix

Why CIBlockElement::GetList Kills UX — and What Vue Has to Do with It

The standard bitrix:catalog.section component reloads the entire page on every filter click. The full cycle: PHP parses the infoblock, gathers properties from b_iblock_element_property, renders HTML, sends it to the client. On a catalog with 50,000 SKUs, that's 800–1200 ms. The buyer clicks three filters — three reloads, 3 seconds of waiting. They leave.

Vue.js solves exactly this problem: the frontend fetches data via REST API, renders on the client, filtering is instant. Bitrix remains the backend: content, catalog, orders, 1C data exchange.

When Vue Is Justified

Not every site needs a frontend framework. It's justified when standard Bitrix components can't keep up:

• Catalogs with heavy filtering — catalog.smart.filter with AJAX works, but on complex SKU property combinations it lags. Vue + API = instant response
• Personal accounts — full-fledged SPAs with dashboards, charts, reactive forms. sale.personal.section looks like it's from 2012
• Configurators and calculators — visual editors, product configurators with real-time price recalculation
• Real-time — chats, notifications, stock updates via WebSocket
• PWA — offline mode, push notifications, home screen installation

Three Architectural Approaches

1. Island — Vue Widgets on Bitrix Pages

Individual Vue components mount into div#app-filter, div#app-cart on standard Bitrix pages. Routing and server-side rendering still handled by Bitrix. Minimal disruption to the existing site.

When to use: incremental modernization, adding interactivity without a rewrite. A typical example — a reactive filter replacing catalog.smart.filter.

2. SPA on Vue + Bitrix REST API

The frontend is a full Vue application with Vue Router. Bitrix serves data via REST API: the built-in rest module or custom D7 controllers. The Bitrix admin panel is for content management — editors won't notice a difference.

When to use: personal accounts, B2B portals, internal applications. Anything where SEO isn't critical.

3. Nuxt.js + Bitrix as Headless CMS

Nuxt provides SSR/SSG for indexing. Bitrix is headless: serves data via API, manages content. For stores and content-heavy sites where SEO is a priority.

Bitrix REST API — A Deeper Look

This is where 70% of the time goes when integrating Vue + Bitrix:

Built-in REST module:

• Infoblocks, catalog, cart (sale.basket.*), orders (sale.order.*), users — out of the box
• Limitation: built-in methods don't always cover custom logic. The catalog.product.list method doesn't return computed properties — you need a custom endpoint

Custom D7 controllers:

The Bitrix\Main\Engine\Controller class is the proper way to build APIs for Vue. Automatic parameter validation, built-in CSRF protection, typed responses. Not ajax.php with $_POST — that's the path to injection attacks.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM query to the infoblock, not CIBlockElement::GetList
    }
}

Authorization: OAuth 2.0 for SPAs or session tokens. Rate limiting — via Bitrix\Main\Engine\Controller or nginx.

Caching: API responses are cached at the D7 level with tag-based invalidation. A product changed in the infoblock — cache invalidated by the iblock_id_X tag. Without this, at 100 RPS the server goes down.

Vue Application Structure

• Vue Router — lazy loading routes via defineAsyncComponent. The catalog doesn't pull in personal account code
• Pinia — state management: catalog, cart, user, filters. Modular store architecture. Vuex is legacy — new projects use Pinia
• Axios with interceptors: automatic CSRF token refresh, retry on 503, authorization error handling
• Vue Query (TanStack Query) — API request caching, automatic revalidation, optimistic updates. The user added a product to the cart — the UI updated instantly, the API request went out in the background

Vue Catalog — The Most Common Use Case

The UX difference is felt immediately. Specifics:

• Filter — checkboxes, range sliders, select with search. State synced with URL via vue-router query params — a link with filters can be shared with a colleague
• Product page — gallery with zoom (vue-cool-lightbox), SKU switching (color/size), price recalculated via the catalog.product.offer.list API, stock by warehouse from catalog.store.product.list
• Virtual scrolling — vue-virtual-scroller renders only visible elements. A catalog of 10,000 products runs without lag
• Smart search — debounced requests to search.title.search or ElasticSearch, autocomplete via dropdown
• Comparison — dynamic specification table with difference highlighting. Stored in Pinia + localStorage for persistence

Nuxt.js for SEO

A pure Vue SPA serves the search engine an empty HTML page with <div id="app"></div>. Google can render JS, but with a delay of days. Yandex — entirely unpredictable.

Nuxt.js solves this:

• SSR — the server delivers complete HTML, after hydration it works as an SPA
• SSG — pages are generated during nuxt generate, served from CDN. Maximum speed
• Hybrid mode — catalog statically, cart and personal account — SSR
• useHead() — dynamic title, description, Open Graph, Schema.org for each page
• Sitemap — @nuxtjs/sitemap, routes from Bitrix API

Performance

• Code splitting — Vite automatically splits the bundle by routes. Catalog page: 80–120 KB gzip, not 500
• Tree shaking — unused code from UI libraries is stripped during build
• Lazy loading — heavy components (Chart.js, maps, WYSIWYG) loaded on demand via defineAsyncComponent
• API call batching — one batch request instead of 5 separate REST API calls to Bitrix
• Brotli/Gzip — asset compression at the nginx level, WebP/AVIF for images via <picture> with srcset

Timelines

Full cycle: API design, D7 controller development, Vue application, Vite configuration, testing, deployment. Code is reviewed, covered with tests, documented — not "built and forgotten."