A starter setup with skeleton components for Lupus Decoupled Drupal. Built upon the nuxtjs-drupal-ce Nuxt module.

Full documentation is available at lupus-decoupled.org.

This is a Nuxt project with nuxtjs-drupal-ce installed and configured, ready to connect to a Lupus Decoupled Drupal backend.

The components under components/Canvas/ are example components demonstrating how to build for Drupal Canvas, a Drupal module that lets editors compose pages from Vue components. They cover common patterns (heroes, cards, layout primitives, rich text) and serve as a starting point to be extended or replaced with your own components.

• lupus_decoupled_starter: a Drupal CMS Site Template that uses this starter as its frontend
• lupus_csr: a Drupal theme that bundles a built version of this starter to serve it as a Drupal-hosted CSR frontend

The easiest way to try it is via GitHub Codespaces, a free, browser-based development environment with everything preconfigured.

See the Play Online guide for details and alternative setups (shadcn/ui, Next.js).

You can also launch it on StackBlitz and connect it to a backend manually (see manual setup steps below).

When using StackBlitz or a local setup, configure the base URLs:

1. Set the Drupal base URL in nuxt.config.ts.
2. Set the frontend base URL in Drupal at /admin/config/system/lupus-decoupled/settings.
3. Add some content nodes and menu items pointing to them. /node/1 on the backend is available under /node/1 in the frontend.

Install the dependencies:

npm install

Start the development server on http://localhost:3000

npm run dev

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

npm test

Tests cover:

• HTML snapshots: renders each Canvas component with various prop combinations and snapshots the output. Catches regressions in markup and Tailwind class mappings.
• Component index: verifies all Canvas components are registered and exposed with correct categories for Drupal Canvas.

Update snapshots after intentional changes:

npx vitest run --update

npm run lint

MIT