# DruxtJS > Druxt is a framework for building fully decoupled Drupal and Nuxt.js applications and sites. Druxt connects a Drupal backend to a Nuxt frontend. It spans two ecosystems: Drupal modules (PHP) that expose JSON:API resources, and Nuxt/Vue packages (JavaScript) that render them. The Guide is written by hand. The API reference is generated from the package source by druxt-docgen, so it tracks the released code rather than being maintained separately. The complete documentation as a single file: https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/llms-full.txt ## Tutorials - [Tutorials](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/tutorials?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Learning-oriented lessons that take you from zero to a working Druxt site. - [Getting started with Druxt](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/tutorials/getting-started?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): From an empty machine to a running fully decoupled Drupal and Nuxt site. - [Theme your front page](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/tutorials/theme-your-front-page?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Take over the front page view and its teasers with two wrapper components, and learn the naming rule the whole Druxt theme layer runs on. - [Add a login flow](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/tutorials/authentication?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Turn the quickstart's already-configured OAuth setup into a real, working login. - [Deploy your site](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/tutorials/deploy-your-site?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generate the quickstart as static files, prove why the backend still matters, and put a working Druxt site on a live URL. - [Building a custom Druxt module](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/tutorials/first-custom-module?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Extend DruxtModule to build your own Druxt-powered, themeable component backed by Drupal data. ## How-to guides - [How-to guides](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Goal-oriented recipes for specific tasks, assuming a working Druxt site. - [Prepare the Drupal backend](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/prepare-the-backend?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Make an existing Drupal site Druxt-ready: modules, JSON:API settings, permissions and the minimum content the frontend needs. - [Configure CORS in Drupal](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/configure-cors?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Allow the browser to talk to the backend directly by serving CORS headers from Drupal, instead of proxying through the frontend. - [Proxy the Drupal backend through Nuxt](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/proxy?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Route API and file requests through the frontend origin, so browser traffic never crosses the CORS boundary. - [Theme Druxt components](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/theming?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Change Druxt component output with wrapper components, the default template, slots and props, without forking or patching the framework. - [Serve content in multiple languages](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/multilingual?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Fetch and render translated Drupal content with langcode prefixes, from the route to the store to language-specific theme components. - [Use the Druxt client directly](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/use-the-druxt-client?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Fetch resources and collections with DruxtClient, with or without Nuxt. - [Browse and develop components in Storybook](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/storybook?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Storybook stories generated from live Drupal data, with a story tree that mirrors your backend and controls driven by real content. - [Debug Druxt with the Vue Devtools](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/devtools?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The DruxtJS devtools inspector shows connection details and live theme suggestions, and scaffolds wrapper components in one click. - [Authenticate users with OAuth](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/authentication?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The full OAuth setup from scratch: Simple OAuth keys, scopes and a consumer in Drupal, druxt-auth in Nuxt, and the traps on both sides. - [Explore the example apps](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/example-apps?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Reference apps sharing one Umami backend, from an unstyled pattern index through daisyUI and Tailwind themes to a BootstrapVue editorial console. - [Environment variables](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/environment-variables?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Every variable a Druxt build reads, where it comes from, and the build-time vs runtime distinction that catches people out. - [Deploy a static site](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/deploy-static?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generate the site and host the files anywhere static. Netlify is the worked example. - [Deploy a server-rendered site](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/deploy-server?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Run the built app as a node service behind a web server, on your own host or a container platform like Lagoon. - [Troubleshoot common issues](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/troubleshooting?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Quick answers to the problems reported most often by real users, from the missing Vue template box to site-wide JSON:API 403 failures. - [Upgrade a Druxt site](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/upgrade?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Move a 0.x site to Druxt 1.0.0, then use deprecation warnings as the working to-do list for 2.0.0. - [Contributing](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/contributing?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Set up the Druxt development environment, report bugs, and submit changes with changesets and conventional commits. - [Use a development release](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/how-to/use-development-releases?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Install a published build of the develop branch from the npm dev tag to try a fix or a feature before the next stable release. ## Concepts - [Concepts](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Understanding-oriented explanations of how Druxt works and why, from the architecture and data flow to deployment shapes and the vocabulary of both sides of the stack. - [Architecture](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/architecture?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): How Drupal, JSON:API and Nuxt fit together in a fully decoupled Druxt site. - [Drupal for Nuxt developers](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/drupal-for-nuxt-developers?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The Drupal vocabulary, tools and commands the rest of these docs assume, explained for developers coming from the JavaScript side. - [Nuxt for Drupal developers](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/nuxt-for-drupal-developers?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The Nuxt and Vue concepts behind a Druxt frontend, mapped to the Drupal ideas they replace. - [The DruxtStore](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/druxt-store?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The DruxtStore caches Drupal collections and resources as shared references, so two components asking for the same article hit Drupal once. - [Decoupled routing](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/routing?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Only Drupal knows which entity serves a path, so Druxt asks it, then turns that answer into a resource request and follows any redirect. - [The schema system](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/schemas?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Drupal display modes become schemas that drive field rendering, generated once at startup and reused to narrow the JSON:API query. - [Component resolution](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/component-resolution?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Druxt finds a wrapper component by ranking candidate names from the render context, then hands it the props, slots and attributes it needs. - [Request topology](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/request-topology?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Which requests happen at build time, during server rendering and in the browser, and what that means for CORS, the proxy and your hosting layout. - [Deployment models](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/deployment-models?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): How a Druxt site goes to production, from fully static files through a server-rendered node service, and how to choose between the models. - [Support and versioning](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/explanation/support-and-versioning?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Druxt follows semantic versioning on a deliberately held stack. The promise, the end-of-life reality, and the path an API takes out of the framework. ## Modules - [Druxt modules](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The Druxt packages, what each one renders, and how they fit together. - [Blocks](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/blocks?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Render Drupal blocks and block regions in Nuxt with the druxt-blocks components, themed through the Druxt component suggestion system. - [Breadcrumb](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/breadcrumb?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Render a breadcrumb trail in Nuxt from the Drupal decoupled router, with the DruxtBreadcrumb component and its theming options. - [Druxt](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/druxt?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The core module, DruxtClient, DruxtStore and the DruxtModule base component. - [Entity](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/entity?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Drupal Display Mode-powered Entity, Form and Field Druxt components. - [Menu](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/menu?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Drupal Menu and Menu item Druxt components, with support for the JSON:API Menu Items module. - [Router](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/router?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Drupal router for Nuxt, powered by the Drupal Decoupled Router module. - [Schema](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/schema?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Drupal Content Entity schema generator for Druxt with support for View and Form displays. - [Site](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/site?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Out-of-the-box decoupled Drupal sites with DruxtSite, wiring layout, blocks, menus and content together from one Nuxt module. - [Views](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/views?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Drupal Views components for Druxt with support for filters, pagination and sorting. - [Druxt core deprecations](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/druxt/deprecations?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Retired DruxtStore signatures and internal classes, with their replacements. - [DruxtEntity deprecations](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/entity/deprecations?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Retired DruxtField default components and props, with their replacements. - [DruxtMenu deprecations](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/menu/deprecations?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The retired DruxtMenu items computed property, and what replaces it. - [DruxtRouter deprecations](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/modules/router/deprecations?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Retired DruxtRouter client and store members, with their replacements. ## Playground - [Live component playground](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/playground?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Render every Druxt component live against a Drupal backend, change its props, read the requests it makes, and copy the markup. ## Optional - [API reference](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Component, mixin and store reference generated from the package source by druxt-docgen. - [Blocks API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/blocks?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the blocks package. - [Breadcrumb API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/breadcrumb?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the breadcrumb package. - [Druxt API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/druxt?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the druxt package. - [Entity API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/entity?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the entity package. - [Menu API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/menu?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the menu package. - [Router API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/router?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the router package. - [Schema API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/schema?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the schema package. - [Site API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/site?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the site package. - [Views API](https://nuxt.feature-live-refresh.druxtjs-org.au2.amazee.io/api/packages/views?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): Generated component, mixin and store reference for the views package.