Frappe Vue Ssr

bench get-app https://github.com/netchampfaris/frappe_vue_ssr

[![Listed on Frappe Gems](https://frappegems.com/api/method/frappe_gems.seo.badge?app=netchampfaris%2Ffrappe_vue_ssr)](https://frappegems.com/gems/apps/netchampfaris/frappe_vue_ssr)

# Frappe Vue SSR Server-side rendering (SSR) for Vue.js Single File Components (SFCs) in Frappe apps. > [!WARNING] > > This is a proof-of-concept of Vue SSR Rendering in Frappe apps. For production use, several improvements are needed: > > - **Pre-rendering** - Components are currently built on-demand during requests > - **Shared bundling** - Each page creates separate bundles, causing duplication across multiple pages > - **CSS optimization** - Styles are currently inlined instead of being extracted to separate files ## How SSR Rendering Works This app implements a Vue SSR renderer that renders `www/.vue`, allowing you to create server-rendered Vue pages that hydrate on the client side. ### Architecture Overview The SSR system has one main component: **VueRenderer (Python)** - `vue_renderer.py` - The core SSR handler that internally calls a Node.js subprocess (`vue_ssr_renderer.js`) for Vue compilation and rendering ### SSR Workflow

Click to view workflow diagram

```mermaid graph TD A[User requests /vue-page] --> B[VueRenderer finds vue-page.vue] B --> C[VueRenderer calls Node.js Renderer] C --> D[Node.js Renderer builds server + client bundles] D --> E[Server bundle renders to HTML] E --> F[Complete HTML page sent to browser] F --> G[Vue hydrates on client side] ```

### VueRenderer Implementation #### VueRenderer (Python) - `vue_renderer.py` **File Discovery** - Searches through all installed Frappe apps - Looks for `.vue` files in `/www` folders matching the URL path - Example: `/vue-page` → searches for `vue-page.vue` **Node.js Integration** - Validates Node.js v22+ availability (required for Vue SSR) - Calls Node.js subprocess with `vue_ssr_renderer.js` - Passes component path and server data as arguments **HTML Generation** - Builds complete HTML page with SSR content - Includes Vue hydration scripts and styles - Handles client bundle serving via Frappe assets #### Internal Node.js Subprocess - `vue_ssr_renderer.js` **Component Validation** - Validates Vue SFC structure (`