[{"data":1,"prerenderedAt":589},["ShallowReactive",2],{"navigation_docs":3,"-guide-drupal-cms":225,"-guide-drupal-cms-surround":584},[4,27,77,123,157,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203,207],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":200,"path":201,"stem":202},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":204,"path":205,"stem":206},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":208,"path":209,"stem":210},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[217,221],{"title":218,"path":219,"stem":220},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":222,"path":223,"stem":224},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":226,"title":74,"body":227,"description":577,"extension":578,"links":579,"meta":580,"navigation":581,"path":75,"seo":582,"stem":76,"__hash__":583},"docs\u002F2.guide\u002F95.drupal-cms.md",{"type":228,"value":229,"toc":567},"minimark",[230,235,245,254,289,294,297,335,338,418,422,429,433,441,460,466,470,473,493,506,511,522,530,534,537,546,553,557,563],[231,232,234],"h1",{"id":233},"drupal-cms-with-lupus-decoupled","Drupal CMS with Lupus Decoupled",[236,237,238,244],"p",{},[239,240,74],"a",{"href":241,"rel":242},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcms",[243],"nofollow"," 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.",[236,246,247,248,253],{},"The ",[239,249,252],{"href":250,"rel":251},"https:\u002F\u002Fgit.drupalcode.org\u002Fproject\u002Flupus_decoupled_starter",[243],"Lupus Decoupled Starter"," is a ready-to-use Drupal CMS site template that bundles:",[255,256,257,265,271,277],"ul",{},[258,259,260,264],"li",{},[261,262,263],"strong",{},"Drupal CMS base setup",": content types, editorial workflow, and other Drupal CMS defaults",[258,266,267,270],{},[261,268,269],{},"Lupus Decoupled Recipe",": core modules and configuration",[258,272,273,276],{},[261,274,275],{},"Lupus Decoupled Canvas",": Canvas visual editor integration",[258,278,279,282,283,288],{},[261,280,281],{},"Lupus CSR",": client-side rendering theme with the ",[239,284,287],{"href":285,"rel":286},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Flupus-decoupled-nuxt-starter",[243],"Nuxt Starter"," (set as default)",[290,291,293],"h2",{"id":292},"installation","Installation",[236,295,296],{},"Install the starter as a site template when setting up Drupal CMS, or apply it manually:",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","composer require drupal\u002Flupus_decoupled_starter\ndrush site-install ..\u002Frecipes\u002Flupus_decoupled_starter\n","bash","",[305,306,307,323],"code",{"__ignoreMap":303},[308,309,312,316,320],"span",{"class":310,"line":311},"line",1,[308,313,315],{"class":314},"sBMFI","composer",[308,317,319],{"class":318},"sfazB"," require",[308,321,322],{"class":318}," drupal\u002Flupus_decoupled_starter\n",[308,324,326,329,332],{"class":310,"line":325},2,[308,327,328],{"class":314},"drush",[308,330,331],{"class":318}," site-install",[308,333,334],{"class":318}," ..\u002Frecipes\u002Flupus_decoupled_starter\n",[236,336,337],{},"For a full local setup with DDEV:",[298,339,341],{"className":300,"code":340,"language":302,"meta":303,"style":303},"mkdir my-drupal-site && cd my-drupal-site\nddev config --project-type=drupal11 --docroot=web\nddev composer create-project drupal\u002Fcms\nddev composer require drupal\u002Flupus_decoupled_starter\ndrush site-install ..\u002Frecipes\u002Flupus_decoupled_starter\nddev launch\n",[305,342,343,362,376,390,401,410],{"__ignoreMap":303},[308,344,345,348,351,355,359],{"class":310,"line":311},[308,346,347],{"class":314},"mkdir",[308,349,350],{"class":318}," my-drupal-site",[308,352,354],{"class":353},"sMK4o"," &&",[308,356,358],{"class":357},"s2Zo4"," cd",[308,360,361],{"class":318}," my-drupal-site\n",[308,363,364,367,370,373],{"class":310,"line":325},[308,365,366],{"class":314},"ddev",[308,368,369],{"class":318}," config",[308,371,372],{"class":318}," --project-type=drupal11",[308,374,375],{"class":318}," --docroot=web\n",[308,377,379,381,384,387],{"class":310,"line":378},3,[308,380,366],{"class":314},[308,382,383],{"class":318}," composer",[308,385,386],{"class":318}," create-project",[308,388,389],{"class":318}," drupal\u002Fcms\n",[308,391,393,395,397,399],{"class":310,"line":392},4,[308,394,366],{"class":314},[308,396,383],{"class":318},[308,398,319],{"class":318},[308,400,322],{"class":318},[308,402,404,406,408],{"class":310,"line":403},5,[308,405,328],{"class":314},[308,407,331],{"class":318},[308,409,334],{"class":318},[308,411,413,415],{"class":310,"line":412},6,[308,414,366],{"class":314},[308,416,417],{"class":318}," launch\n",[290,419,421],{"id":420},"first-steps","First Steps",[236,423,424,425,428],{},"After installation, navigate to ",[261,426,427],{},"Content > Pages"," in the Drupal admin to find the provided demo content. Open a page, review it, and try editing it with the Canvas visual page builder to get familiar with the setup.",[290,430,432],{"id":431},"client-side-rendering-csr","Client-Side Rendering (CSR)",[236,434,435,436,440],{},"The starter uses ",[239,437,281],{"href":438,"rel":439},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_csr",[243]," (Client-Side Rendering) as the default theme. This means:",[255,442,443,446,453],{},[258,444,445],{},"The frontend is pre-built and served directly from Drupal, with no separate frontend server needed",[258,447,448,449,452],{},"The frontend JavaScript runs in the browser and fetches content from the CE API at ",[305,450,451],{},"\u002Fce-api\u002F..."," on the same origin, so no CORS configuration is required",[258,454,455,456,459],{},"This is ideal for getting started quickly, but ",[261,457,458],{},"not recommended for SEO-critical production sites"," (use SSR instead)",[236,461,462,463,465],{},"All Lupus Decoupled documentation applies regardless of whether you use CSR or SSR. For Nuxt rendering mode details, see ",[239,464,200],{"href":201},".",[290,467,469],{"id":468},"customizing-the-theme","Customizing the Theme",[236,471,472],{},"To customize the frontend, run a local frontend dev server and point Drupal to it during development:",[255,474,475,486],{},[258,476,477,478,481,482,485],{},"Go to ",[261,479,480],{},"Configuration → Lupus Decoupled Settings"," (",[305,483,484],{},"\u002Fadmin\u002Fconfig\u002Fservices\u002Flupus-decoupled",")",[258,487,488,489,492],{},"Set ",[261,490,491],{},"Frontend base URL"," to your dev server and enable frontend redirects",[236,494,495,496,481,499,502,503,465],{},"Pages and Canvas previews now render via the dev server. When adding new Canvas components or changing their props, go to ",[261,497,498],{},"Administration > Appearance > Components > External JS",[305,500,501],{},"\u002Fadmin\u002Fappearance\u002Fcomponent\u002Fextjs",") and press ",[261,504,505],{},"Update components",[507,508,510],"h3",{"id":509},"provide-an-updated-lupus-csr-theme","Provide an Updated Lupus CSR Theme",[236,512,513,514,517,518,465],{},"Once customization is done, generate a production build of your frontend and configure Lupus CSR to serve it via ",[305,515,516],{},"\u002Fadmin\u002Fappearance\u002Fsettings\u002Flupus_csr",". For sub-theme packaging, see ",[239,519,521],{"href":520},"\u002Fdrupal\u002Fthemes#creating-a-sub-theme","Creating a Sub-Theme",[236,523,524,525,465],{},"For detailed instructions for the Nuxt-based default theme, see ",[239,526,529],{"href":527,"rel":528},"https:\u002F\u002Fgit.drupalcode.org\u002Fproject\u002Flupus_csr\u002F-\u002Fblob\u002F1.x\u002Fexamples\u002Fnuxt-starter\u002FCUSTOMIZING.md?ref_type=heads",[243],"CUSTOMIZING.md",[290,531,533],{"id":532},"switching-to-server-side-rendering","Switching to Server-Side Rendering",[236,535,536],{},"To move from CSR to SSR:",[538,539,540,543],"ol",{},[258,541,542],{},"Set up a separate frontend server",[258,544,545],{},"Configure the Lupus Decoupled frontend URL to point to your frontend server and enable the frontend redirect",[236,547,548,549,552],{},"Refer to ",[239,550,551],{"href":219},"Deployment strategies"," for options.",[290,554,556],{"id":555},"creating-new-site-templates","Creating New Site Templates",[236,558,559,560,562],{},"The Lupus Decoupled Starter is designed to serve as a template for building new Drupal CMS site templates. See the ",[239,561,112],{"href":113}," page for guidance.",[564,565,566],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":303,"searchDepth":325,"depth":325,"links":568},[569,570,571,572,575,576],{"id":292,"depth":325,"text":293},{"id":420,"depth":325,"text":421},{"id":431,"depth":325,"text":432},{"id":468,"depth":325,"text":469,"children":573},[574],{"id":509,"depth":378,"text":510},{"id":532,"depth":325,"text":533},{"id":555,"depth":325,"text":556},"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.","md",null,{},true,{"title":74,"description":577},"dxyxyqBBoEMMAqVY_a4yepaNCkR9CDymdbLjrbu8rEQ",[585,587],{"title":70,"path":71,"stem":72,"description":586,"children":-1},"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.",{"title":84,"path":85,"stem":86,"description":588,"children":-1},"Thanks to the component-oriented decoupling of Lupus Decoupled Drupal, it's really easy to connect a frontend of choice!",1779292109508]