lupus_decoupled
Component-oriented Decoupled Drupal with Nuxt!
Find out more at https://lupus-decoupled.org/
Motivation
- Provide a complete, fully integrated solution for a headless Drupal - out of the box!
- Keep as many Drupal capabilities as possible, e.g. including authentication, previews, nice URLs or metatag generation
- Provide a great frontend developer experience while focusing on the visual presentation - with full control of all the markup and scripts.
- Allow using the frontend framework of choice and provide a feature-complete starter setup with Nuxt.js
Component-oriented decoupling
- Builds upon the Lupus Custom Elements Renderer and Custom Elements module to render Drupal pages into configurable, high-level frontend components (Custom Elements), served as a JSON response.
- Better performance: Page API responses contain all needed data and support Drupal caching solutions (page cache, tag-based invalidation, ...). Less queries on the time-critical path to the first rendered page.
- Allows editors to compose pages out of frontend components (via layout builder, paragraphs, CKEditor embeds...)
- Backend stays aware of end-user facing paths and can keep care of integrations around user-facing URLs, e.g. social media or newsletter integrations.
- Loose coupling, the API is clearly defined so backend and frontend can evolve and be tested separately.
Main features
- Drupal powered authentication (cookie-based), caching system and previews
- Drupal powered editorial control of pages, paths & layouts (via layout builder)
- Performance focused, integrates well with Drupal Page caching
- Flexible frontend deployment options, static or server-renderered thanks to Nuxt.js
- Extensible with both Nuxt.js and Drupal modules
- Configurable API output via the Custom Elements UI module
- Integration with Drupal forms and popular Drupal modules
Common questions
What's the relationship to the Lupus Custom Elements Renderer?
The Lupus CE Renderer focuses on providing the re-usable building blocks for the stack, but does not make decisions on how exactly to glue them together. Lupus Decoupled Drupal is an opinionated setup based upon those building blocks. It provides a full, ready to-go solution by making the necessary decisions to build a great decoupled stack.
Give it a try
Use Github Codespaces to easily launch your own Lupus Decoupled with one of the provided frontend demo setups. Launch one!
Further Resources
- Lupus Decoupled Base Recipes provides recipes for setting things up quickly
- Canvas External JavaScript components integrates Lupus Decoupled with Drupal Canvas!
- Project template, including a Drupal + Nuxt frontend, with ddev & Gitpod support
- Re-usable Nuxt Drupal-CE Connector module (used by Nuxt examples)
- Nuxt Naked Starter
- Nuxt Shadcn Example
- Next.js Example
Documentation
Please visit https://lupus-decoupled.org/
You can contribute to documentation by creating pull requests at the documentation website-repository
Status
The setup is stable and in production use. We are actively working on improvements and maintenance, while making sure backwards compatibility is kept for existing sites!
Support & Contribution
- Reach out at #lupus-decoupled at the Drupal Slack! We are happy to help you get started!