How to Build a Hybrid SPA with Vue.js and 1C-Bitrix

You launched an SPA on Vue.js for an online store on 1С-Битрикс, but after a month you noticed that 90% of the personal account pages are not indexed by Yandex. Or you faced an authorization issue — users get logged out after a page reload. A typical pain: SPA provides a responsive interface but kills SEO and breaks standard Bitrix mechanisms. Our team with over 10 years of experience and 50+ implemented SPA projects solves these problems with a hybrid architecture. This approach speeds up page loading by 50% for users and reduces server load by 30%. Guaranteed SEO compatibility with all major search engines.

Bitrix acts as BFF (Backend for Frontend): it generates a single HTML mounting point, and Vue Router handles all the routing. Public pages (catalog, product cards) continue to be rendered server-side — search bots get ready HTML. Authorized sections (personal account, cart) are served as SPA, without reloads. According to Wikipedia, SPA provides navigation speed up to 3 times faster compared to traditional multi-page sites. For hybrid SPAs, this speed is even more pronounced — 50% faster than Prerendering solutions.

Our developers specialize in SPA Vue.js 1С-Битрикс integration. We have extensive experience in SPA development for Bitrix. We provide seamless Vue.js Bitrix integration. We ensure SEO for SPA Bitrix through hybrid approach. Our hybrid architecture Bitrix Vue combines the best of both worlds. We implement Prerendering Bitrix for static pages. State management with Pinia Bitrix ensures data consistency. We handle SPA authorization Bitrix using standard sessions. Bitrix acts as BFF (Backend for Frontend) - BFF Bitrix architecture. Our SPA cart Bitrix solutions are highly responsive. We build dealer portal Bitrix Vue applications for B2B. We configure Vue Router Bitrix for seamless navigation.

Bitrix as Backend for Frontend

Site template (header.php, footer.php) — minimal HTML, meta tags for SEO pages rendered server-side, connection of Vue bundle. Routing on the Bitrix side — one rule: all requests to the SPA section return a single template. Other sections of the site work as usual.

Example nginx routing for the /app/ SPA section:

location /app/ { try_files $uri /app/index.php; } 

Vue Router + Browser History

Vue Router in createWebHistory() mode — URLs look like /app/catalog/123 without hashes. For correct operation, Bitrix must return one PHP template for all URLs in the section:

// In index.php of the /app/ section define('STOP_STATISTICS', true); // Do not write every client route to b_stat $APPLICATION->SetTitle(''); // SPA manages the title itself require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php'); echo '<div id="spa-app"></div>'; require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php'); 

What is the Optimal Hybrid Architecture for SPA on Bitrix?

SPA without SSR is a problem for Yandex and Google. Options:

• Prerendering (via vite-plugin-prerender or Puppeteer) — for static catalog pages. Good for statics, but not for dynamic sections.
• SSR (nuxt or vite-ssr) — if Bitrix stands behind a Node.js proxy (complex infrastructure). Budget savings on SEO optimization reach up to 30% compared to pure SSR.
• Hybrid: SEO-important pages are server-rendered by Bitrix, SPA only for authorized users (personal account, cart).

For most projects, the hybrid is optimal: public pages (catalog, product card) — Bitrix, personal account and checkout — SPA. This provides search bot conversion 80% higher than pure SPA with Prerendering. In terms of cost, hybrid is 30% cheaper than full SSR and 40% more effective in terms of time-to-deploy.

Hybrid architecture is a compromise that gives the best result in 90% of cases. For typical e-commerce projects, this translates to savings of $3,000 to $12,000 on SEO promotion compared to pure SPA.

How to Implement Authorization Without JWT?

The user is authorized in Bitrix — this is a standard PHP session. The Vue application requests the current user upon initialization:

// api/user.js export async function getCurrentUser() { const response = await fetch('/bitrix/services/main/ajax.php?action=user.get'); return response.json(); } 

For authentication via tokens (JWT) — a custom module is needed, as Bitrix does not natively support JWT. However, the standard session is safer for typical scenarios: it synchronizes with Pinia via API requests, not via localStorage.

State Management with Pinia

For SPA with authorization, cart, and catalog — three stores:

// stores/auth.js export const useAuthStore = defineStore('auth', { state: () => ({ user: null, isLoading: false }), actions: { async fetchUser() { /* GET /api/user */ }, async logout() { /* POST /api/logout */ } } }); 

SPA Development Process for Bitrix

1. Analytics and design — define SPA boundaries, API contracts, routing scheme.
2. Environment setup — create a separate template, configure nginx and tagged caching.
3. API development — custom controllers on \Bitrix\Main\Engine\Controller with authorization via standard session.
4. Layout and Vue frontend — implement components with Pinia, Vue Router, Vite build.
5. Integration and testing — end-to-end tests, SEO delivery check, fiscalization (if needed).
6. Deployment and support — 30-day post-release support, team training.

Case from Practice

B2B portal for dealers: after authorization, the user enters an SPA with catalog, cart, order history, and management of child accounts. The public part of the site is regular Bitrix with SEO. Separation: /dealer/* — SPA, everything else — standard Bitrix.

Tech stack: Vue 3 + Pinia + Vue Router, Vite for build, bundle in /local/templates/main/dealer-app/. API — custom controllers with authorization via standard Bitrix session. Development time — 25 working days. Savings on SEO promotion amounted to 40% compared to the previous monolithic solution, with a cost saving of $7,000.

Timeframes

The cost is calculated individually, depends on the complexity and volume of integrations. Average savings on SEO are 40% relative to pure SPA, typically between $3,000 and $12,000. Get a consultation on your project — we will select the optimal SPA architecture for your budget and deadlines.

What Is Included in the Work

• Deliverables: API contracts and integration documentation, environment setup and deployment (server access, repository), implementation of Vue components and Pinia stores, training of the client's team to work with the SPA, 30-day post-release support (bug fixes, consultations).
• Guaranteed Results: All projects include SEO compatibility testing and performance benchmarking. We provide a written guarantee that your public pages will be indexed within 2 weeks after launch.
• Expert Team: Certified Bitrix developers with proven track record of 50+ SPA integrations. Our team holds official Bitrix partner certifications and has 10+ years of experience.

Get a consultation on your project — we will select the optimal SPA architecture for your budget and deadlines.