Headless Drupal CMS
with Nuxt.js
Why we love Headless Drupal!
In today’s world a great frontend user experience is key. Modern JavaScript frameworks achieve that by enabling frontend applications to provide instant feedback and fluent navigation between pages. Besides that, there are more advantages of combining a Headless Drupal with a modern frontend JavaScript frontend like Nuxt.js:
- Flexibility - The JavaScript frontend can easily integrate with other tools and microservices.
- Performance - Modern frontend frameworks have many performance improvements built-in and come with modern tooling and that allows improving performance more easily; e.g. by lazy-loading JavaScript chunks only when needed.
- Productivity - A decoupled frontend enables frontend developers to work independently from the Drupal backend. Frontend developers don't need to know Drupal any more, instead they can enjoy the pleasant developer experience offered by modern frontend frameworks.
- Omnichannel - Thanks to Drupal's API-first architecture and powerful data modelling tools the CMS is the perfect foundation for managing digital experiences on multiple channels.
However, traditionally you'd lose a lot of Drupal's powerful out-of-the-box features when going headless. Fortunately, this problem is mitigated by the component-oriented approach taken by Lupus Decoupled Drupal.
Lupus Decoupled Drupal
The feature-complete headless Drupal stack which combines Drupal with a fully featured Nuxt.js frontend. It's developed as an open-source project on drupal.org and provides a fully integrated headless Drupal solution - out-of-the-box!
A short overview:
- Thanks to component-oriented decoupling many Drupal features, including authentication, previews, metatag generation, nice URLs or the Drupal layout builder are just working.
- It comes with a ready-to-go frontend setup based on Nuxt.js! Nuxt.js, the versatile Vue.js framework, makes development performant frontends a joy!
- Flexible deployment options: Deploy a regular node server, benefit from the cloud by deploying to serverless functions, or generate a static site!
- Static site generation allows hosting websites from static files, served from a simple webserver or a CDN. Fast, robust and cheap!
A component-oriented API
Headless Drupal often means using JSON-API or GraphQL to interact with the backend, but as a result, many of Drupal’s features go unsupported in the frontend. That is why we prefer to use a component-oriented approach: the Lupus Custom Elements Renderer module. It allows us to render Drupal pages into high-level frontend components (Custom Elements) which are served as a JSON response. This approach comes with the following benefits:
- Many Drupal features stay supported, including authentication, previews, nice URLs and metatag generation.
- Editors can be empowered to compose pages with Drupal, e.g. via layout builder or paragraphs, which render into custom elements.
- Drupal stays aware of end-user facing URLs what is important for being able to use Drupal's powerful 3rd party integrations; e.g., around SEO, social media or newsletters.
- Full compatibility with existing Drupal solutions to page-level caching and cache invalidation - great for performance!
- Loose coupling and a clearly defined API ensure that the backend and frontend can evolve separately.
A demo is worth more than a thousand words
The Lupus Decoupled Drupal project provides instructions for developers to quickly spin-up a new environment.
