# Lupus Decoupled Drupal

## Documentation Sets

- [Lupus Decoupled Drupal](lupus-decoupled.org/llms-full.txt)

## Docs

- [How it works](lupus-decoupled.org/raw/get-started/how-it-works.md): In short, Lupus Decoupled Drupal bridges the gap between your Drupal backend and modern frontend frameworks, giving you the flexibility to leverage
the power of Drupal while using a modern framework for rendering. It does that by providing an API for fetching page-data from Drupal, utilizing custom elements to compose pages from high-level components.
- [Play online](lupus-decoupled.org/raw/get-started/play-online.md)
- [Create a new project](lupus-decoupled.org/raw/get-started/create-new-project.md)
- [First steps](lupus-decoupled.org/raw/get-started/first-steps.md): This page provides a short playbook which introduces you to the most important features of Lupus Decoupled Drupal. It only takes 1-2 minutes to follow:
- [Customized API Output](lupus-decoupled.org/raw/guide/customized-api-output.md): Lupus Decoupled Drupal provides custom elements output for all content entities. This includes the page of a content node ("Full content"), just as the individual view-modes that may be used in content listings, e.g. teasers (Drupal allows the configuration of any number of view-modes).
- [Pages & Routing](lupus-decoupled.org/raw/guide/pages-routing.md): By default, the frontend forwards all page requests to Drupal. Given that, Drupal's routes, URL aliases as well as 404 or 403 pages all work out of the box. However, the frontend may add custom routes in front of Drupal's routing, see "Custom routes in the frontend".
- [Site layout & Menus](lupus-decoupled.org/raw/guide/site-layout-menus.md)
- [Authentication](lupus-decoupled.org/raw/guide/authentication.md): Since page requests are processed by Drupal as usual, Drupal's authentication and session handling
stays fully working. Thus, when requests provide an authentication cookie, authentication just works. By default, cookie-based authentication with a separate frontend cookie is used.
- [Metatags & Local tasks](lupus-decoupled.org/raw/guide/metatags-local-tasks.md): Lupus Decoupled Drupal integrates with the Drupal Metatags module and local tasks (Drupal tabs) and provides them as part of the API response.
- [Breadcrumbs & Messages](lupus-decoupled.org/raw/guide/breadcrumbs-messages.md)
- [Redirects](lupus-decoupled.org/raw/guide/redirects.md): Lupus Decoupled Drupal supports CMS-controlled redirects, i.e. Drupal's page API explicitly informs the frontend
about redirects to be generated. The frontend, in turn, simply generates the right redirect responses. That way,
Drupal-managed redirects just work in the decoupled frontend.
- [Editorial previews](lupus-decoupled.org/raw/guide/editorial-previews.md)
- [Layout builder](lupus-decoupled.org/raw/guide/layout-builder.md)
- [Drupal Canvas](lupus-decoupled.org/raw/guide/canvas.md): Drupal Canvas is Drupal's modern page builder (docs). When paired with Lupus Decoupled, Canvas becomes a powerful decoupled page builder that supports varying frontend frameworks.
- [Drupal CMS](lupus-decoupled.org/raw/guide/drupal-cms.md): Drupal CMS is Drupal's user-friendly distribution aimed at marketers and content teams. Lupus Decoupled supports it via site templates, providing a fully decoupled setup out of the box.
- [Multi-frontend](lupus-decoupled.org/raw/advanced-topics/multi-frontend.md): Thanks to the component-oriented decoupling of Lupus Decoupled Drupal, it's really easy to connect a frontend of choice!
- [Listings, Views](lupus-decoupled.org/raw/advanced-topics/listings-views.md): The Lupus Decoupled Views
submodule provides support for Drupal's Views module. The Views module is Drupal's native way and very powerful way of creating listings of content. It provides a UI for configuring complex queries, searches and the rendering of results, including paging.
- [Searches](lupus-decoupled.org/raw/advanced-topics/searches.md)
- [JSON-API & GraphQL](lupus-decoupled.org/raw/advanced-topics/jsonapi-graphql.md): When data needs to be queried or updated from the frontend, Drupal offers plenty of options. Lupus Decoupled Drupal's provided API may be combined with any of these:
- [Caching](lupus-decoupled.org/raw/advanced-topics/caching.md)
- [Error pages](lupus-decoupled.org/raw/advanced-topics/error-pages.md)
- [Drupal forms](lupus-decoupled.org/raw/advanced-topics/drupal-forms.md)
- [Drupal JavaScript](lupus-decoupled.org/raw/advanced-topics/drupal-javascript.md)
- [Site Templates](lupus-decoupled.org/raw/advanced-topics/site-templates.md): Drupal CMS supports site templates: pre-configured starting points that combine Drupal recipes, a theme, design elements, and default content into a fully functional website ready to use from day one. See the Drupal blog post on site templates for the broader vision.
- [Block layout](lupus-decoupled.org/raw/advanced-topics/block-layout.md): As documented at Site layout & Menus by default the site header and footer are built by the frontend. That means, the Drupal Blocks Layout configuration is ignored for custom-elements rendered pages.
- [Debugging API requests](lupus-decoupled.org/raw/advanced-topics/debugging.md): For debugging API requests and responses, Lupus Decoupled Drupal offers
integration with REST Log
module.
- [Examples](lupus-decoupled.org/raw/examples.md)
- [Community](lupus-decoupled.org/raw/community.md)
- [Key modules](lupus-decoupled.org/raw/drupal/key-modules.md): Lupus Decoupled Drupal builds upon the following two key modules:
- [Custom elements](lupus-decoupled.org/raw/drupal/custom-elements.md)
- [Routes](lupus-decoupled.org/raw/drupal/routes.md): The Lupus CE Renderer module takes care of rendering routes of the format custom_elements via Drupal's regular routing system. That means a route can be defined as usual in Drupal, additionally define the _format to be custom_elements:
- [Providing blocks](lupus-decoupled.org/raw/drupal/providing-blocks.md): In order to provide blocks that render into custom elements, for example for using as part of the Layout Builder, the block cannot directly return a custom element object, since its interface requires a render array. Instead, simply return the custom element as render array via its helper toRenderArray(). When done so, the custom element is going to be picked up correctly when the layout is rendered.
- [Custom Element Processors](lupus-decoupled.org/raw/drupal/custom-element-processors.md): The custom elements module comes with Custom element processors that try to implement
a reasonable default for content entities and fields. These defaults can be
further customized with custom modules as needed.
- [Adding Drupal forms](lupus-decoupled.org/raw/drupal/add-drupal-forms.md): Lupus Decoupled Drupal supports submitting Drupal forms via the decoupled frontend, as documented under Advanced Topics - Drupal Forms.
In order to enable submitting another Drupal form on the frontend, a custom-elements enabled form processing route must be added. This is
done easily by:
- [Providing themes](lupus-decoupled.org/raw/drupal/themes.md)
- [Drupal Dev Days 2023 Videos](lupus-decoupled.org/raw/ddd23.md)
- [Introduction](lupus-decoupled.org/raw/nuxt/introduction.md): Nuxt is an open source framework under MIT license that makes web development simple and powerful.
- [Setup](lupus-decoupled.org/raw/nuxt/setup.md): The Drupal Custom Elements Connector makes it easy to connect Nuxt with Lupus Decoupled Drupal and provide scaffold components to get started.
- [Rendering Custom Elements](lupus-decoupled.org/raw/nuxt/render-custom-elements.md): The Drupal Custom Elements Connector module allows you to render custom elements in your Nuxt.js application fetched from a Drupal backend.
- [Default components](lupus-decoupled.org/raw/nuxt/default-components.md): Note: This feature is atm only available when using the (default) JSON-based rendered of custom elements.
- [Composables](lupus-decoupled.org/raw/nuxt/composables.md): The composable provided by the module provides helpers to fetch page and menu data, handle errors, and render custom components.
- [Drupal JS libraries](lupus-decoupled.org/raw/nuxt/drupal-libraries.md)
- [Custom Routes](lupus-decoupled.org/raw/nuxt/custom-routes.md): Custom frontend routes are routes that are not defined in Drupal. They are defined in the frontend and can be used create custom pages.
- [Page Layouts](lupus-decoupled.org/raw/nuxt/page-layouts.md): Nuxt layouts are placed in the ./layouts directory and are used to define a shared site layout
for a group of pages. When a page has a different layout, nuxt takes care of swapping the layout component(s).
- [Component Previews](lupus-decoupled.org/raw/nuxt/component-previews.md): Component previews allow Vue components to be rendered in isolation in external contexts, such as the Drupal Canvas editor. This enables editors to see live previews of components directly in the page builder.
- [Component Index](lupus-decoupled.org/raw/nuxt/canvas-components.md): To make Vue components available in the Drupal Canvas editor, the frontend exposes a component index: a JSON file listing all available components together with their props, prop schemas, labels, descriptions, categories, formats and schema references. Canvas External JS Components reads this index and uses it to populate the editor UI.
- [Rendering modes](lupus-decoupled.org/raw/nuxt/rendering-modes.md): With Nuxt you can decide what rendering strategy you want to use, if you like even at the route level.
- [Deployment options](lupus-decoupled.org/raw/nuxt/deployment.md): The deployment of Nuxt largely depends on the frontend rendering mode chosen. Please refer to the
Nuxt deployment guide for additional details.
- [Resources](lupus-decoupled.org/raw/nuxt/resources.md)
- [Deployment Strategies](lupus-decoupled.org/raw/deployment/deployment-strategy.md): Lupus Decoupled Drupal supports two fundamentally different deployment approaches: running the frontend as a separate service, or bundling it directly as a Drupal theme.
- [Unified Hosting](lupus-decoupled.org/raw/deployment/unified-hosting.md)
- [Deploy on Pantheon](lupus-decoupled.org/raw/deployment/pantheon.md)