Lupus Decoupled Drupal brings Inertia.js-Style Development to Drupal
When building web applications, developers typically choose between a decoupled architecture with modern frontend frameworks or a traditional monolithic approach using template engines like Twig or Blade. Inertia.js revolutionized Laravel development by enabling developers to maintain their server-side workflow while adopting modern frontend frameworks like Vue and React - without having to completely change their development approach.
Inertia.js has proven tremendously successful in the Laravel ecosystem, showing that developers appreciate the flexibility to gradually adopt modern frontend practices while leveraging their existing server-side expertise. Today, we are excited to bring the same powerful approach to the Drupal ecosystem.
Announcing Lupus Decoupled Drupal 1.0
Like Inertia.js, Lupus Decoupled Drupal lets you build modern web applications without sacrificing the benefits of server-side rendering. You maintain full control over routing and data flow on the server while delivering dynamic, interactive experiences through JavaScript components. At its core, Lupus Decoupled Drupal follows the same simple but powerful model - pages + components. Drupal defines pages and provides data - either via code or configuration - while JavaScript components handle the presentation and interactivity. This gives you the best of both worlds: server-side control with rich client-side interactions.
We are happy that as of today, Lupus Decoupled is officially considered complete and ready for production use. In fact, the building blocks of Lupus Decoupled are stable for a long time. They are already powering this site, as you can see by inspecting the API output of this post.
With version 1.0, Lupus Decoupled Drupal provides:
- A stable, production-ready API for building decoupled Drupal applications
- Full editorial control over pages, paths or metatags
- Low-code approach - customize API output through Drupal's configuration system
- Comprehensive documentation with guides and examples
- Development tools for rapid iteration and debugging
- Production-ready performance optimizations
Keeping the Power of Drupal
Beyond these core features, Lupus Decoupled Drupal maintains deep integration with Drupal, ensuring that Drupal's powerful tools work seamlessly with your modern frontend:
- Native Drupal authentication in the frontend - access control, edit buttons, editorial previews, and Drupal messages all just work
- Metatags, URL aliases, and Drupal redirects work out of the box
- Support for using Drupal forms in the modern frontend, including webforms
- Views and Layout Builder support
Multi-frontend Approach
Similar to Inertia.js, the backend (Drupal) renders into a tree of high-level components (custom elements), making it easy for any frontend framework to render the output. By default, we provide a Nuxt-powered frontend that makes it simple to get started, thanks to its web-standard focused approach. Nuxt is a versatile and beginner-friendly framework supporting various rendering modes. Additionally, we offer a proof-of-concept React implementation with Next.js for those who prefer React. Other frontend frameworks, like Astro, can be easily added as well. If you are interested to work on that, get in touch!
What's Next?
We are currently working on adding better support for the Drupal CMS and leveraging recipes as part of the installation process, making it easy to pick your desired features. Next, we plan to integrate with the upcoming experience builder, enabling server-rendered modern experiences. When Drupal CMS and the experience builder empower the Drupal site-builder, Lupus Decoupled Drupal will be ready to connect it with a modern frontend development toolbox.
Now is the perfect time to get started: Try one of the Gitpod-powered web-based development environments and take your first steps. Join us in Drupal slack at #lupus-decoupled to share your feedback or get help!
