Lupus Client-Side Rendering (CSR)
Lupus CSR is a Drupal base theme that allows you to serve a pre-built single-page application (SPA) directly from Drupal, enabling client-side rendering without a separate frontend server. It integrates with Lupus Decoupled Drupal and can be used as a base for sub-themes or configured directly through theme settings.
Overview
Lupus CSR is a Drupal base theme that enables client-side rendering (CSR) with Lupus Decoupled Drupal. It serves a pre-built SPA (e.g. Nuxt) directly from Drupal. No separate frontend server needed.
How it works
The Drupal output is replaced with the pre-built frontend application, which loads the frontend JavaScript and handles everything client-side.
Usage
- As a base theme — Create a sub-theme that ships a
dist/directory with your SPA build output. Configure replacements and settings in the sub-theme'sinfo.yml. - Directly via theme settings — Use Lupus CSR itself and configure the dist directory, index file, and replacements via the theme settings form.
Features
- Integrates nicely with Lupus Decoupled Drupal, but does not require it.
- Custom Elements preview provider configuration for Drupal Canvas ExtJS integration
- Default: It includes a ready-to-use Nuxt starter example in the
examples/directory. This is configured by default.
Requirements
- Drupal 10 or 11
SEO note
Client-side rendering means pages are rendered via JavaScript in the browser. For production sites where SEO matters, use server-side rendering (SSR) instead.
Support & Contribution
- Reach out at #lupus-decoupled at the Drupal Slack! We are happy to help you get started!