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.
Why is it not provided as a Drupal distribution?
Lupus Decoupled Drupal is implemented as a set of base-modules and configuration, similar to a distribution. However, by shipping as a module it's easier to turn existing Drupal installations into a decoupled setup. Furthermore, it's intended to work in conjunction with pre-existing install profiles, like the Standard Profile or Umami, the Drupal demonstration profile. Next step is providing it as a recipe, see [#3473225]. (Recipes got introduced after the module was created.)
Give it a try
Use Gitpod.io to easily launch your own Lupus Decoupled with one of the provided frontend demo setups. Launch one!
Further Resources
- Project template, including a Drupal + Nuxt frontend, with ddev & Gitpod support
- Nuxt 3 demo
- Nuxt 3 shadcn demo
- Next.js demo
- Nuxt 2 demo setup (legacy)
- Nuxt.js Connector module (used by the demo setup)
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!