[{"data":1,"prerenderedAt":597},["ShallowReactive",2],{"navigation_docs":3,"-guide-drupal-cms":233,"-guide-drupal-cms-surround":592},[4,27,77,127,161,219],{"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,123],{"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},"Drupal JavaScript","\u002Fadvanced-topics\u002Fdrupal-javascript","3.advanced-topics\u002F62.drupal-javascript",{"title":116,"path":117,"stem":118},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":120,"path":121,"stem":122},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":124,"path":125,"stem":126},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":128,"icon":129,"path":130,"stem":131,"children":132,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[133,137,141,145,149,153,157],{"title":134,"path":135,"stem":136},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":138,"path":139,"stem":140},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":142,"path":143,"stem":144},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":146,"path":147,"stem":148},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":150,"path":151,"stem":152},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":154,"path":155,"stem":156},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":158,"path":159,"stem":160},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":162,"icon":163,"path":164,"stem":165,"children":166,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[167,171,175,179,183,187,191,195,199,203,207,211,215],{"title":168,"path":169,"stem":170},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":172,"path":173,"stem":174},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":176,"path":177,"stem":178},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":180,"path":181,"stem":182},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":184,"path":185,"stem":186},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":188,"path":189,"stem":190},"Drupal JS libraries","\u002Fnuxt\u002Fdrupal-libraries","5.nuxt\u002F37.drupal-libraries",{"title":192,"path":193,"stem":194},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":196,"path":197,"stem":198},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":200,"path":201,"stem":202},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":204,"path":205,"stem":206},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":208,"path":209,"stem":210},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":212,"path":213,"stem":214},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":216,"path":217,"stem":218},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":220,"icon":221,"path":222,"stem":223,"children":224,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[225,229],{"title":226,"path":227,"stem":228},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":230,"path":231,"stem":232},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":234,"title":74,"body":235,"description":585,"extension":586,"links":587,"meta":588,"navigation":589,"path":75,"seo":590,"stem":76,"__hash__":591},"docs\u002F2.guide\u002F95.drupal-cms.md",{"type":236,"value":237,"toc":575},"minimark",[238,243,253,262,297,302,305,343,346,426,430,437,441,449,468,474,478,481,501,514,519,530,538,542,545,554,561,565,571],[239,240,242],"h1",{"id":241},"drupal-cms-with-lupus-decoupled","Drupal CMS with Lupus Decoupled",[244,245,246,252],"p",{},[247,248,74],"a",{"href":249,"rel":250},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcms",[251],"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.",[244,254,255,256,261],{},"The ",[247,257,260],{"href":258,"rel":259},"https:\u002F\u002Fgit.drupalcode.org\u002Fproject\u002Flupus_decoupled_starter",[251],"Lupus Decoupled Starter"," is a ready-to-use Drupal CMS site template that bundles:",[263,264,265,273,279,285],"ul",{},[266,267,268,272],"li",{},[269,270,271],"strong",{},"Drupal CMS base setup",": content types, editorial workflow, and other Drupal CMS defaults",[266,274,275,278],{},[269,276,277],{},"Lupus Decoupled Recipe",": core modules and configuration",[266,280,281,284],{},[269,282,283],{},"Lupus Decoupled Canvas",": Canvas visual editor integration",[266,286,287,290,291,296],{},[269,288,289],{},"Lupus CSR",": client-side rendering theme with the ",[247,292,295],{"href":293,"rel":294},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Flupus-decoupled-nuxt-starter",[251],"Nuxt Starter"," (set as default)",[298,299,301],"h2",{"id":300},"installation","Installation",[244,303,304],{},"Install the starter as a site template when setting up Drupal CMS, or apply it manually:",[306,307,312],"pre",{"className":308,"code":309,"language":310,"meta":311,"style":311},"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","",[313,314,315,331],"code",{"__ignoreMap":311},[316,317,320,324,328],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"sBMFI","composer",[316,325,327],{"class":326},"sfazB"," require",[316,329,330],{"class":326}," drupal\u002Flupus_decoupled_starter\n",[316,332,334,337,340],{"class":318,"line":333},2,[316,335,336],{"class":322},"drush",[316,338,339],{"class":326}," site-install",[316,341,342],{"class":326}," ..\u002Frecipes\u002Flupus_decoupled_starter\n",[244,344,345],{},"For a full local setup with DDEV:",[306,347,349],{"className":308,"code":348,"language":310,"meta":311,"style":311},"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",[313,350,351,370,384,398,409,418],{"__ignoreMap":311},[316,352,353,356,359,363,367],{"class":318,"line":319},[316,354,355],{"class":322},"mkdir",[316,357,358],{"class":326}," my-drupal-site",[316,360,362],{"class":361},"sMK4o"," &&",[316,364,366],{"class":365},"s2Zo4"," cd",[316,368,369],{"class":326}," my-drupal-site\n",[316,371,372,375,378,381],{"class":318,"line":333},[316,373,374],{"class":322},"ddev",[316,376,377],{"class":326}," config",[316,379,380],{"class":326}," --project-type=drupal11",[316,382,383],{"class":326}," --docroot=web\n",[316,385,387,389,392,395],{"class":318,"line":386},3,[316,388,374],{"class":322},[316,390,391],{"class":326}," composer",[316,393,394],{"class":326}," create-project",[316,396,397],{"class":326}," drupal\u002Fcms\n",[316,399,401,403,405,407],{"class":318,"line":400},4,[316,402,374],{"class":322},[316,404,391],{"class":326},[316,406,327],{"class":326},[316,408,330],{"class":326},[316,410,412,414,416],{"class":318,"line":411},5,[316,413,336],{"class":322},[316,415,339],{"class":326},[316,417,342],{"class":326},[316,419,421,423],{"class":318,"line":420},6,[316,422,374],{"class":322},[316,424,425],{"class":326}," launch\n",[298,427,429],{"id":428},"first-steps","First Steps",[244,431,432,433,436],{},"After installation, navigate to ",[269,434,435],{},"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.",[298,438,440],{"id":439},"client-side-rendering-csr","Client-Side Rendering (CSR)",[244,442,443,444,448],{},"The starter uses ",[247,445,289],{"href":446,"rel":447},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_csr",[251]," (Client-Side Rendering) as the default theme. This means:",[263,450,451,454,461],{},[266,452,453],{},"The frontend is pre-built and served directly from Drupal, with no separate frontend server needed",[266,455,456,457,460],{},"The frontend JavaScript runs in the browser and fetches content from the CE API at ",[313,458,459],{},"\u002Fce-api\u002F..."," on the same origin, so no CORS configuration is required",[266,462,463,464,467],{},"This is ideal for getting started quickly, but ",[269,465,466],{},"not recommended for SEO-critical production sites"," (use SSR instead)",[244,469,470,471,473],{},"All Lupus Decoupled documentation applies regardless of whether you use CSR or SSR. For Nuxt rendering mode details, see ",[247,472,208],{"href":209},".",[298,475,477],{"id":476},"customizing-the-theme","Customizing the Theme",[244,479,480],{},"To customize the frontend, run a local frontend dev server and point Drupal to it during development:",[263,482,483,494],{},[266,484,485,486,489,490,493],{},"Go to ",[269,487,488],{},"Configuration → Lupus Decoupled Settings"," (",[313,491,492],{},"\u002Fadmin\u002Fconfig\u002Fservices\u002Flupus-decoupled",")",[266,495,496,497,500],{},"Set ",[269,498,499],{},"Frontend base URL"," to your dev server and enable frontend redirects",[244,502,503,504,489,507,510,511,473],{},"Pages and Canvas previews now render via the dev server. When adding new Canvas components or changing their props, go to ",[269,505,506],{},"Administration > Appearance > Components > External JS",[313,508,509],{},"\u002Fadmin\u002Fappearance\u002Fcomponent\u002Fextjs",") and press ",[269,512,513],{},"Update components",[515,516,518],"h3",{"id":517},"provide-an-updated-lupus-csr-theme","Provide an Updated Lupus CSR Theme",[244,520,521,522,525,526,473],{},"Once customization is done, generate a production build of your frontend and configure Lupus CSR to serve it via ",[313,523,524],{},"\u002Fadmin\u002Fappearance\u002Fsettings\u002Flupus_csr",". For sub-theme packaging, see ",[247,527,529],{"href":528},"\u002Fdrupal\u002Fthemes#creating-a-sub-theme","Creating a Sub-Theme",[244,531,532,533,473],{},"For detailed instructions for the Nuxt-based default theme, see ",[247,534,537],{"href":535,"rel":536},"https:\u002F\u002Fgit.drupalcode.org\u002Fproject\u002Flupus_csr\u002F-\u002Fblob\u002F1.x\u002Fexamples\u002Fnuxt-starter\u002FCUSTOMIZING.md?ref_type=heads",[251],"CUSTOMIZING.md",[298,539,541],{"id":540},"switching-to-server-side-rendering","Switching to Server-Side Rendering",[244,543,544],{},"To move from CSR to SSR:",[546,547,548,551],"ol",{},[266,549,550],{},"Set up a separate frontend server",[266,552,553],{},"Configure the Lupus Decoupled frontend URL to point to your frontend server and enable the frontend redirect",[244,555,556,557,560],{},"Refer to ",[247,558,559],{"href":227},"Deployment strategies"," for options.",[298,562,564],{"id":563},"creating-new-site-templates","Creating New Site Templates",[244,566,567,568,570],{},"The Lupus Decoupled Starter is designed to serve as a template for building new Drupal CMS site templates. See the ",[247,569,116],{"href":117}," page for guidance.",[572,573,574],"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":311,"searchDepth":333,"depth":333,"links":576},[577,578,579,580,583,584],{"id":300,"depth":333,"text":301},{"id":428,"depth":333,"text":429},{"id":439,"depth":333,"text":440},{"id":476,"depth":333,"text":477,"children":581},[582],{"id":517,"depth":386,"text":518},{"id":540,"depth":333,"text":541},{"id":563,"depth":333,"text":564},"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":585},"dxyxyqBBoEMMAqVY_a4yepaNCkR9CDymdbLjrbu8rEQ",[593,595],{"title":70,"path":71,"stem":72,"description":594,"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":596,"children":-1},"Thanks to the component-oriented decoupling of Lupus Decoupled Drupal, it's really easy to connect a frontend of choice!",1786631275587]