Lupus Client-Side Rendering (CSR)

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

1. 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's info.yml.
2. 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!