[{"data":1,"prerenderedAt":1807},["ShallowReactive",2],{"navigation_docs":3,"-get-started-how-it-works":221,"-get-started-how-it-works-surround":1805},[4,27,77,123,157,207],{"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],{"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},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":200,"path":201,"stem":202},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":204,"path":205,"stem":206},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":208,"icon":209,"path":210,"stem":211,"children":212,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[213,217],{"title":214,"path":215,"stem":216},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":218,"path":219,"stem":220},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":222,"title":11,"body":223,"description":229,"extension":1800,"links":1801,"meta":1802,"navigation":532,"path":12,"seo":1803,"stem":13,"__hash__":1804},"docs\u002F1.get-started\u002F10.how-it-works.md",{"type":224,"value":225,"toc":1792},"minimark",[226,230,235,243,288,299,466,470,482,486,507,513,1404,1408,1424,1445,1449,1458,1461,1757,1771,1774,1788],[227,228,229],"p",{},"In short, Lupus Decoupled Drupal bridges the gap between your Drupal backend and modern frontend frameworks, giving you the flexibility to leverage\nthe 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.",[231,232,234],"h2",{"id":233},"what-is-a-custom-element","What is a custom element?",[227,236,237,238,242],{},"Custom elements refer to non-standard markup elements, commonly used for components in frontend frameworks. For example:\n",[239,240,241],"code",{},"\u003Cflag-icon country=\"nl\">Netherlands\u003C\u002Fflag-icon>",". Custom elements consist of:",[244,245,246,257,266],"ul",{},[247,248,249,253,254],"li",{},[250,251,252],"strong",{},"Element name"," - ",[239,255,256],{},"flag-icon",[247,258,259,262,263],{},[250,260,261],{},"Attributes",": such as ",[239,264,265],{},"country",[247,267,268,271,272],{},[250,269,270],{},"Slots",": which can contain:\n",[244,273,274,279],{},[247,275,276],{},[250,277,278],{},"Nested custom elements",[247,280,281,284,285],{},[250,282,283],{},"Markup"," or  ",[250,286,287],{},"Plain text",[227,289,290,291,294,295,298],{},"For example, this is how a teaser listing using two custom elements, ",[239,292,293],{},"teaser-listing"," and ",[239,296,297],{},"article-teaser"," could look like:",[300,301,306],"pre",{"className":302,"code":303,"language":304,"meta":305,"style":305},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cteaser-listing title=\"Latest news\" icon=\"news\">\n    \u003Carticle-teaser\n        href=\"https:\u002F\u002Fexample.com\u002Fnews\u002F1\"\n        excerpt=\"The excerpt of the news entry.\"\n    >\n    \u003C\u002Farticle-teaser>\n    \u003Carticle-teaser\n        href=\"https:\u002F\u002Fexample.com\u002Fnews\u002F2\"\n        excerpt=\"The excerpt of another news entry.\"\n    >\n    \u003C\u002Farticle-teaser>\n\u003C\u002Fteaser-listing>\n","html","",[239,307,308,351,360,376,391,397,407,414,428,442,447,456],{"__ignoreMap":305},[309,310,313,317,320,324,327,330,334,336,339,341,343,346,348],"span",{"class":311,"line":312},"line",1,[309,314,316],{"class":315},"sMK4o","\u003C",[309,318,293],{"class":319},"swJcz",[309,321,323],{"class":322},"spNyl"," title",[309,325,326],{"class":315},"=",[309,328,329],{"class":315},"\"",[309,331,333],{"class":332},"sfazB","Latest news",[309,335,329],{"class":315},[309,337,338],{"class":322}," icon",[309,340,326],{"class":315},[309,342,329],{"class":315},[309,344,345],{"class":332},"news",[309,347,329],{"class":315},[309,349,350],{"class":315},">\n",[309,352,354,357],{"class":311,"line":353},2,[309,355,356],{"class":315},"    \u003C",[309,358,359],{"class":319},"article-teaser\n",[309,361,363,366,368,370,373],{"class":311,"line":362},3,[309,364,365],{"class":322},"        href",[309,367,326],{"class":315},[309,369,329],{"class":315},[309,371,372],{"class":332},"https:\u002F\u002Fexample.com\u002Fnews\u002F1",[309,374,375],{"class":315},"\"\n",[309,377,379,382,384,386,389],{"class":311,"line":378},4,[309,380,381],{"class":322},"        excerpt",[309,383,326],{"class":315},[309,385,329],{"class":315},[309,387,388],{"class":332},"The excerpt of the news entry.",[309,390,375],{"class":315},[309,392,394],{"class":311,"line":393},5,[309,395,396],{"class":315},"    >\n",[309,398,400,403,405],{"class":311,"line":399},6,[309,401,402],{"class":315},"    \u003C\u002F",[309,404,297],{"class":319},[309,406,350],{"class":315},[309,408,410,412],{"class":311,"line":409},7,[309,411,356],{"class":315},[309,413,359],{"class":319},[309,415,417,419,421,423,426],{"class":311,"line":416},8,[309,418,365],{"class":322},[309,420,326],{"class":315},[309,422,329],{"class":315},[309,424,425],{"class":332},"https:\u002F\u002Fexample.com\u002Fnews\u002F2",[309,427,375],{"class":315},[309,429,431,433,435,437,440],{"class":311,"line":430},9,[309,432,381],{"class":322},[309,434,326],{"class":315},[309,436,329],{"class":315},[309,438,439],{"class":332},"The excerpt of another news entry.",[309,441,375],{"class":315},[309,443,445],{"class":311,"line":444},10,[309,446,396],{"class":315},[309,448,450,452,454],{"class":311,"line":449},11,[309,451,402],{"class":315},[309,453,297],{"class":319},[309,455,350],{"class":315},[309,457,459,462,464],{"class":311,"line":458},12,[309,460,461],{"class":315},"\u003C\u002F",[309,463,293],{"class":319},[309,465,350],{"class":315},[231,467,469],{"id":468},"providing-custom-elements","Providing custom elements",[227,471,472,473,477,478,481],{},"While custom elements can be easily created in a custom Drupal route ",[474,475,476],"a",{"href":135},"with code",", the most common needs can be served by utilizing the Drupal UI to configure the API output. Lupus Decoupled Drupal already provides custom elements output for the main routes of all content entities and allows customizing it via UI, see ",[474,479,480],{"href":35},"Customized API output",".",[231,483,485],{"id":484},"custom-elements-page-api","Custom Elements Page-API",[227,487,488,489,492,493,496,497,500,501,294,504,481],{},"Lupus Decoupled Drupal introduces the ",[239,490,491],{},"\u002Fce-api\u002F\u003Croute>"," Drupal API endpoint, which takes care of rendering a regular Drupal request into a custom-elements API response. So Drupal paths like ",[239,494,495],{},"\u002Fnode\u002F1"," or ",[239,498,499],{},"\u002Fnews"," would be served by the API as pages rendered with custom element at ",[239,502,503],{},"\u002Fce-api\u002Fnode\u002F1",[239,505,506],{},"\u002Fce-api\u002Fnews",[227,508,509,510,512],{},"This endpoint results in the following custom-elements API response, which can serialize the elements either into JSON (default) or markup. For example, the API output of a ",[239,511,499],{}," page outputting the previous example custom elements would be:",[514,515,516,1087],"code-group",{},[300,517,521],{"className":518,"code":519,"filename":506,"language":520,"meta":305,"style":305},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n\n    \"title\": \"News Listing\",\n    \"content_format\": \"json\",\n    \"content\": {\n          \"element\": \"teaser-listing\",\n          \"props\": {\n                \"title\": \"Latest news\",\n                \"icon\": \"news\"\n          },\n          \"slots\": {\n                \"default\": [\n                      {\n                            \"element\": \"article-teaser\",\n                            \"props\": {\n                                  \"href\": \"https:\u002F\u002Fexample.com\u002Fnews\u002F1\",\n                                  \"excerpt\": \"The excerpt of the news entry.\"\n                            }\n                      },\n                      {\n                            \"element\": \"article-teaser\",\n                            \"props\": {\n                                  \"href\": \"https:\u002F\u002Fexample.com\u002Fnews\u002F2\",\n                                  \"excerpt\": \"The excerpt of another news entry.\"\n                            }\n                      }\n                ]\n          }\n    },\n    \"messages\": [ ],\n    \"breadcrumbs\": [ ],\n    \"metatags\": {\n      \"meta\": [\n        {\n          \"name\": \"title\",\n          \"content\": \"Drupal powered metatags\"\n        }\n      ],\n      \"link\": [\n        {\n          \"rel\": \"canonical\",\n          \"href\": \"https:\u002F\u002Fexample.com\u002F\"\n        }\n      ]\n    }\n}\n","json",[239,522,523,528,534,558,577,591,612,625,645,662,667,680,694,700,720,733,755,773,779,785,790,809,822,841,858,863,869,875,881,887,905,921,935,950,956,976,994,1000,1006,1020,1025,1046,1064,1069,1075,1081],{"__ignoreMap":305},[309,524,525],{"class":311,"line":312},[309,526,527],{"class":315},"{\n",[309,529,530],{"class":311,"line":353},[309,531,533],{"emptyLinePlaceholder":532},true,"\n",[309,535,536,539,542,544,547,550,553,555],{"class":311,"line":362},[309,537,538],{"class":315},"    \"",[309,540,541],{"class":322},"title",[309,543,329],{"class":315},[309,545,546],{"class":315},":",[309,548,549],{"class":315}," \"",[309,551,552],{"class":332},"News Listing",[309,554,329],{"class":315},[309,556,557],{"class":315},",\n",[309,559,560,562,565,567,569,571,573,575],{"class":311,"line":378},[309,561,538],{"class":315},[309,563,564],{"class":322},"content_format",[309,566,329],{"class":315},[309,568,546],{"class":315},[309,570,549],{"class":315},[309,572,520],{"class":332},[309,574,329],{"class":315},[309,576,557],{"class":315},[309,578,579,581,584,586,588],{"class":311,"line":393},[309,580,538],{"class":315},[309,582,583],{"class":322},"content",[309,585,329],{"class":315},[309,587,546],{"class":315},[309,589,590],{"class":315}," {\n",[309,592,593,596,600,602,604,606,608,610],{"class":311,"line":399},[309,594,595],{"class":315},"          \"",[309,597,599],{"class":598},"sBMFI","element",[309,601,329],{"class":315},[309,603,546],{"class":315},[309,605,549],{"class":315},[309,607,293],{"class":332},[309,609,329],{"class":315},[309,611,557],{"class":315},[309,613,614,616,619,621,623],{"class":311,"line":409},[309,615,595],{"class":315},[309,617,618],{"class":598},"props",[309,620,329],{"class":315},[309,622,546],{"class":315},[309,624,590],{"class":315},[309,626,627,630,633,635,637,639,641,643],{"class":311,"line":416},[309,628,629],{"class":315},"                \"",[309,631,541],{"class":632},"sbssI",[309,634,329],{"class":315},[309,636,546],{"class":315},[309,638,549],{"class":315},[309,640,333],{"class":332},[309,642,329],{"class":315},[309,644,557],{"class":315},[309,646,647,649,652,654,656,658,660],{"class":311,"line":430},[309,648,629],{"class":315},[309,650,651],{"class":632},"icon",[309,653,329],{"class":315},[309,655,546],{"class":315},[309,657,549],{"class":315},[309,659,345],{"class":332},[309,661,375],{"class":315},[309,663,664],{"class":311,"line":444},[309,665,666],{"class":315},"          },\n",[309,668,669,671,674,676,678],{"class":311,"line":449},[309,670,595],{"class":315},[309,672,673],{"class":598},"slots",[309,675,329],{"class":315},[309,677,546],{"class":315},[309,679,590],{"class":315},[309,681,682,684,687,689,691],{"class":311,"line":458},[309,683,629],{"class":315},[309,685,686],{"class":632},"default",[309,688,329],{"class":315},[309,690,546],{"class":315},[309,692,693],{"class":315}," [\n",[309,695,697],{"class":311,"line":696},13,[309,698,699],{"class":315},"                      {\n",[309,701,703,706,708,710,712,714,716,718],{"class":311,"line":702},14,[309,704,705],{"class":315},"                            \"",[309,707,599],{"class":319},[309,709,329],{"class":315},[309,711,546],{"class":315},[309,713,549],{"class":315},[309,715,297],{"class":332},[309,717,329],{"class":315},[309,719,557],{"class":315},[309,721,723,725,727,729,731],{"class":311,"line":722},15,[309,724,705],{"class":315},[309,726,618],{"class":319},[309,728,329],{"class":315},[309,730,546],{"class":315},[309,732,590],{"class":315},[309,734,736,739,743,745,747,749,751,753],{"class":311,"line":735},16,[309,737,738],{"class":315},"                                  \"",[309,740,742],{"class":741},"su27w","href",[309,744,329],{"class":315},[309,746,546],{"class":315},[309,748,549],{"class":315},[309,750,372],{"class":332},[309,752,329],{"class":315},[309,754,557],{"class":315},[309,756,758,760,763,765,767,769,771],{"class":311,"line":757},17,[309,759,738],{"class":315},[309,761,762],{"class":741},"excerpt",[309,764,329],{"class":315},[309,766,546],{"class":315},[309,768,549],{"class":315},[309,770,388],{"class":332},[309,772,375],{"class":315},[309,774,776],{"class":311,"line":775},18,[309,777,778],{"class":315},"                            }\n",[309,780,782],{"class":311,"line":781},19,[309,783,784],{"class":315},"                      },\n",[309,786,788],{"class":311,"line":787},20,[309,789,699],{"class":315},[309,791,793,795,797,799,801,803,805,807],{"class":311,"line":792},21,[309,794,705],{"class":315},[309,796,599],{"class":319},[309,798,329],{"class":315},[309,800,546],{"class":315},[309,802,549],{"class":315},[309,804,297],{"class":332},[309,806,329],{"class":315},[309,808,557],{"class":315},[309,810,812,814,816,818,820],{"class":311,"line":811},22,[309,813,705],{"class":315},[309,815,618],{"class":319},[309,817,329],{"class":315},[309,819,546],{"class":315},[309,821,590],{"class":315},[309,823,825,827,829,831,833,835,837,839],{"class":311,"line":824},23,[309,826,738],{"class":315},[309,828,742],{"class":741},[309,830,329],{"class":315},[309,832,546],{"class":315},[309,834,549],{"class":315},[309,836,425],{"class":332},[309,838,329],{"class":315},[309,840,557],{"class":315},[309,842,844,846,848,850,852,854,856],{"class":311,"line":843},24,[309,845,738],{"class":315},[309,847,762],{"class":741},[309,849,329],{"class":315},[309,851,546],{"class":315},[309,853,549],{"class":315},[309,855,439],{"class":332},[309,857,375],{"class":315},[309,859,861],{"class":311,"line":860},25,[309,862,778],{"class":315},[309,864,866],{"class":311,"line":865},26,[309,867,868],{"class":315},"                      }\n",[309,870,872],{"class":311,"line":871},27,[309,873,874],{"class":315},"                ]\n",[309,876,878],{"class":311,"line":877},28,[309,879,880],{"class":315},"          }\n",[309,882,884],{"class":311,"line":883},29,[309,885,886],{"class":315},"    },\n",[309,888,890,892,895,897,899,902],{"class":311,"line":889},30,[309,891,538],{"class":315},[309,893,894],{"class":322},"messages",[309,896,329],{"class":315},[309,898,546],{"class":315},[309,900,901],{"class":315}," [",[309,903,904],{"class":315}," ],\n",[309,906,908,910,913,915,917,919],{"class":311,"line":907},31,[309,909,538],{"class":315},[309,911,912],{"class":322},"breadcrumbs",[309,914,329],{"class":315},[309,916,546],{"class":315},[309,918,901],{"class":315},[309,920,904],{"class":315},[309,922,924,926,929,931,933],{"class":311,"line":923},32,[309,925,538],{"class":315},[309,927,928],{"class":322},"metatags",[309,930,329],{"class":315},[309,932,546],{"class":315},[309,934,590],{"class":315},[309,936,938,941,944,946,948],{"class":311,"line":937},33,[309,939,940],{"class":315},"      \"",[309,942,943],{"class":598},"meta",[309,945,329],{"class":315},[309,947,546],{"class":315},[309,949,693],{"class":315},[309,951,953],{"class":311,"line":952},34,[309,954,955],{"class":315},"        {\n",[309,957,959,961,964,966,968,970,972,974],{"class":311,"line":958},35,[309,960,595],{"class":315},[309,962,963],{"class":632},"name",[309,965,329],{"class":315},[309,967,546],{"class":315},[309,969,549],{"class":315},[309,971,541],{"class":332},[309,973,329],{"class":315},[309,975,557],{"class":315},[309,977,979,981,983,985,987,989,992],{"class":311,"line":978},36,[309,980,595],{"class":315},[309,982,583],{"class":632},[309,984,329],{"class":315},[309,986,546],{"class":315},[309,988,549],{"class":315},[309,990,991],{"class":332},"Drupal powered metatags",[309,993,375],{"class":315},[309,995,997],{"class":311,"line":996},37,[309,998,999],{"class":315},"        }\n",[309,1001,1003],{"class":311,"line":1002},38,[309,1004,1005],{"class":315},"      ],\n",[309,1007,1009,1011,1014,1016,1018],{"class":311,"line":1008},39,[309,1010,940],{"class":315},[309,1012,1013],{"class":598},"link",[309,1015,329],{"class":315},[309,1017,546],{"class":315},[309,1019,693],{"class":315},[309,1021,1023],{"class":311,"line":1022},40,[309,1024,955],{"class":315},[309,1026,1028,1030,1033,1035,1037,1039,1042,1044],{"class":311,"line":1027},41,[309,1029,595],{"class":315},[309,1031,1032],{"class":632},"rel",[309,1034,329],{"class":315},[309,1036,546],{"class":315},[309,1038,549],{"class":315},[309,1040,1041],{"class":332},"canonical",[309,1043,329],{"class":315},[309,1045,557],{"class":315},[309,1047,1049,1051,1053,1055,1057,1059,1062],{"class":311,"line":1048},42,[309,1050,595],{"class":315},[309,1052,742],{"class":632},[309,1054,329],{"class":315},[309,1056,546],{"class":315},[309,1058,549],{"class":315},[309,1060,1061],{"class":332},"https:\u002F\u002Fexample.com\u002F",[309,1063,375],{"class":315},[309,1065,1067],{"class":311,"line":1066},43,[309,1068,999],{"class":315},[309,1070,1072],{"class":311,"line":1071},44,[309,1073,1074],{"class":315},"      ]\n",[309,1076,1078],{"class":311,"line":1077},45,[309,1079,1080],{"class":315},"    }\n",[309,1082,1084],{"class":311,"line":1083},46,[309,1085,1086],{"class":315},"}\n",[300,1088,1091],{"className":518,"code":1089,"filename":1090,"language":520,"meta":305,"style":305},"{\n    \"title\": \"News Listing\",\n    \"content_format\": \"markup\",\n    \"content\": \"\n      \u003Cteaser-listing title=\\\"Latest news\\\" icon=\\\"news\\\">\n        \u003Carticle-teaser to=\\\"https:\u002F\u002Fexample.com\u002Fnews\u002F1\\\" excerpt=\\\"The excerpt of the news entry.\\\" slot=\\\"default\\\">\u003C\u002Farticle-teaser>\n        \u003Carticle-teaser to=\\\"https:\u002F\u002Fexample.com\u002Fnews\u002F2\\\" excerpt=\\\"The excerpt of another news entry.\\\" slot=\\\"default\\\">\u003C\u002Farticle-teaser>\n      \u003C\u002Fteaser-listing>\",\n    \"messages\": [ ],\n    \"breadcrumbs\": [ ],\n    \"metatags\": {\n      \"meta\": [\n        {\n          \"name\": \"title\",\n          \"content\": \"Drupal powered metatags\"\n        }\n      ],\n      \"link\": [\n        {\n          \"rel\": \"canonical\",\n          \"href\": \"https:\u002F\u002Fexample.com\u002F\"\n        }\n      ]\n    }\n}\n","\u002Fce-api\u002Fnews?_content_format=markup",[239,1092,1093,1097,1115,1134,1147,1171,1203,1231,1240,1254,1268,1280,1292,1296,1314,1330,1334,1338,1350,1354,1372,1388,1392,1396,1400],{"__ignoreMap":305},[309,1094,1095],{"class":311,"line":312},[309,1096,527],{"class":315},[309,1098,1099,1101,1103,1105,1107,1109,1111,1113],{"class":311,"line":353},[309,1100,538],{"class":315},[309,1102,541],{"class":322},[309,1104,329],{"class":315},[309,1106,546],{"class":315},[309,1108,549],{"class":315},[309,1110,552],{"class":332},[309,1112,329],{"class":315},[309,1114,557],{"class":315},[309,1116,1117,1119,1121,1123,1125,1127,1130,1132],{"class":311,"line":362},[309,1118,538],{"class":315},[309,1120,564],{"class":322},[309,1122,329],{"class":315},[309,1124,546],{"class":315},[309,1126,549],{"class":315},[309,1128,1129],{"class":332},"markup",[309,1131,329],{"class":315},[309,1133,557],{"class":315},[309,1135,1136,1138,1140,1142,1144],{"class":311,"line":378},[309,1137,538],{"class":315},[309,1139,583],{"class":322},[309,1141,329],{"class":315},[309,1143,546],{"class":315},[309,1145,1146],{"class":315}," \"\n",[309,1148,1149,1152,1156,1158,1160,1163,1165,1167,1169],{"class":311,"line":393},[309,1150,1151],{"class":332},"      \u003Cteaser-listing title=",[309,1153,1155],{"class":1154},"sTEyZ","\\\"",[309,1157,333],{"class":332},[309,1159,1155],{"class":1154},[309,1161,1162],{"class":332}," icon=",[309,1164,1155],{"class":1154},[309,1166,345],{"class":332},[309,1168,1155],{"class":1154},[309,1170,350],{"class":332},[309,1172,1173,1176,1178,1180,1182,1185,1187,1189,1191,1194,1196,1198,1200],{"class":311,"line":399},[309,1174,1175],{"class":332},"        \u003Carticle-teaser to=",[309,1177,1155],{"class":1154},[309,1179,372],{"class":332},[309,1181,1155],{"class":1154},[309,1183,1184],{"class":332}," excerpt=",[309,1186,1155],{"class":1154},[309,1188,388],{"class":332},[309,1190,1155],{"class":1154},[309,1192,1193],{"class":332}," slot=",[309,1195,1155],{"class":1154},[309,1197,686],{"class":332},[309,1199,1155],{"class":1154},[309,1201,1202],{"class":332},">\u003C\u002Farticle-teaser>\n",[309,1204,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229],{"class":311,"line":409},[309,1206,1175],{"class":332},[309,1208,1155],{"class":1154},[309,1210,425],{"class":332},[309,1212,1155],{"class":1154},[309,1214,1184],{"class":332},[309,1216,1155],{"class":1154},[309,1218,439],{"class":332},[309,1220,1155],{"class":1154},[309,1222,1193],{"class":332},[309,1224,1155],{"class":1154},[309,1226,686],{"class":332},[309,1228,1155],{"class":1154},[309,1230,1202],{"class":332},[309,1232,1233,1236,1238],{"class":311,"line":416},[309,1234,1235],{"class":332},"      \u003C\u002Fteaser-listing>",[309,1237,329],{"class":315},[309,1239,557],{"class":315},[309,1241,1242,1244,1246,1248,1250,1252],{"class":311,"line":430},[309,1243,538],{"class":315},[309,1245,894],{"class":322},[309,1247,329],{"class":315},[309,1249,546],{"class":315},[309,1251,901],{"class":315},[309,1253,904],{"class":315},[309,1255,1256,1258,1260,1262,1264,1266],{"class":311,"line":444},[309,1257,538],{"class":315},[309,1259,912],{"class":322},[309,1261,329],{"class":315},[309,1263,546],{"class":315},[309,1265,901],{"class":315},[309,1267,904],{"class":315},[309,1269,1270,1272,1274,1276,1278],{"class":311,"line":449},[309,1271,538],{"class":315},[309,1273,928],{"class":322},[309,1275,329],{"class":315},[309,1277,546],{"class":315},[309,1279,590],{"class":315},[309,1281,1282,1284,1286,1288,1290],{"class":311,"line":458},[309,1283,940],{"class":315},[309,1285,943],{"class":598},[309,1287,329],{"class":315},[309,1289,546],{"class":315},[309,1291,693],{"class":315},[309,1293,1294],{"class":311,"line":696},[309,1295,955],{"class":315},[309,1297,1298,1300,1302,1304,1306,1308,1310,1312],{"class":311,"line":702},[309,1299,595],{"class":315},[309,1301,963],{"class":632},[309,1303,329],{"class":315},[309,1305,546],{"class":315},[309,1307,549],{"class":315},[309,1309,541],{"class":332},[309,1311,329],{"class":315},[309,1313,557],{"class":315},[309,1315,1316,1318,1320,1322,1324,1326,1328],{"class":311,"line":722},[309,1317,595],{"class":315},[309,1319,583],{"class":632},[309,1321,329],{"class":315},[309,1323,546],{"class":315},[309,1325,549],{"class":315},[309,1327,991],{"class":332},[309,1329,375],{"class":315},[309,1331,1332],{"class":311,"line":735},[309,1333,999],{"class":315},[309,1335,1336],{"class":311,"line":757},[309,1337,1005],{"class":315},[309,1339,1340,1342,1344,1346,1348],{"class":311,"line":775},[309,1341,940],{"class":315},[309,1343,1013],{"class":598},[309,1345,329],{"class":315},[309,1347,546],{"class":315},[309,1349,693],{"class":315},[309,1351,1352],{"class":311,"line":781},[309,1353,955],{"class":315},[309,1355,1356,1358,1360,1362,1364,1366,1368,1370],{"class":311,"line":787},[309,1357,595],{"class":315},[309,1359,1032],{"class":632},[309,1361,329],{"class":315},[309,1363,546],{"class":315},[309,1365,549],{"class":315},[309,1367,1041],{"class":332},[309,1369,329],{"class":315},[309,1371,557],{"class":315},[309,1373,1374,1376,1378,1380,1382,1384,1386],{"class":311,"line":792},[309,1375,595],{"class":315},[309,1377,742],{"class":632},[309,1379,329],{"class":315},[309,1381,546],{"class":315},[309,1383,549],{"class":315},[309,1385,1061],{"class":332},[309,1387,375],{"class":315},[309,1389,1390],{"class":311,"line":811},[309,1391,999],{"class":315},[309,1393,1394],{"class":311,"line":824},[309,1395,1074],{"class":315},[309,1397,1398],{"class":311,"line":843},[309,1399,1080],{"class":315},[309,1401,1402],{"class":311,"line":860},[309,1403,1086],{"class":315},[231,1405,1407],{"id":1406},"the-frontend","The frontend",[227,1409,1410,1411,1414,1415,1417,1418,1420,1421,481],{},"The frontend typically proxies requests to the Drupal ",[239,1412,1413],{},"\u002Fce-api"," endpoint, while preserving the request URI and optionally some request headers.\nThat way, a request to ",[239,1416,499],{}," is served by the frontend, which requests the backend API at ",[239,1419,506],{}," and takes care\nof rendering the response. By forwarding the cookie header, the frontend may easily leverage Drupal ",[474,1422,1423],{"href":47},"authentication handling",[227,1425,1426,1427,1432,1433,1438,1439,1444],{},"While any frontend framework or tooling may be used to render the custom elements API response, Lupus Decoupled Drupal comes with a ready-to-go ",[474,1428,158],{"href":1429,"rel":1430},"https:\u002F\u002Fnuxt.com",[1431],"nofollow"," setup by default. This enables you to get started quickly using ",[474,1434,1437],{"href":1435,"rel":1436},"https:\u002F\u002Fvuejs.org",[1431],"Vue"," ",[474,1440,1443],{"href":1441,"rel":1442},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Fsfc",[1431],"Single-File-Components",", which implements a template and web-standard oriented approach.",[231,1446,1448],{"id":1447},"rendering-custom-elements","Rendering custom elements",[227,1450,1451,1452,1454,1455,481],{},"Generally, each custom element maps to a Vue component, which is automatically picked up for rendering, when the component is named exactly like the custom element. For example, for the element ",[239,1453,297],{}," create the component ",[239,1456,1457],{},"ArticleTeaser.vue",[227,1459,1460],{},"The following example shows how Vue components for the previous custom elements could look like:",[514,1462,1463,1614],{},[300,1464,1469],{"className":1465,"code":1466,"filename":1467,"language":1468,"meta":305,"style":305},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"teaser-listing\">\n    \u003Ch2>Title: {{ title }}\u003C\u002Fh2>\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\n  defineProps\u003C{\n    title: string;\n  }>();\n\u003C\u002Fscript>\n","TeaserListing.vue","vue",[239,1470,1471,1480,1501,1519,1529,1538,1546,1550,1574,1583,1596,1606],{"__ignoreMap":305},[309,1472,1473,1475,1478],{"class":311,"line":312},[309,1474,316],{"class":315},[309,1476,1477],{"class":319},"template",[309,1479,350],{"class":315},[309,1481,1482,1485,1488,1491,1493,1495,1497,1499],{"class":311,"line":353},[309,1483,1484],{"class":315},"  \u003C",[309,1486,1487],{"class":319},"div",[309,1489,1490],{"class":322}," class",[309,1492,326],{"class":315},[309,1494,329],{"class":315},[309,1496,293],{"class":332},[309,1498,329],{"class":315},[309,1500,350],{"class":315},[309,1502,1503,1505,1507,1510,1513,1515,1517],{"class":311,"line":362},[309,1504,356],{"class":315},[309,1506,231],{"class":319},[309,1508,1509],{"class":315},">",[309,1511,1512],{"class":1154},"Title: {{ title }}",[309,1514,461],{"class":315},[309,1516,231],{"class":319},[309,1518,350],{"class":315},[309,1520,1521,1523,1526],{"class":311,"line":378},[309,1522,356],{"class":315},[309,1524,1525],{"class":319},"slot",[309,1527,1528],{"class":315}," \u002F>\n",[309,1530,1531,1534,1536],{"class":311,"line":393},[309,1532,1533],{"class":315},"  \u003C\u002F",[309,1535,1487],{"class":319},[309,1537,350],{"class":315},[309,1539,1540,1542,1544],{"class":311,"line":399},[309,1541,461],{"class":315},[309,1543,1477],{"class":319},[309,1545,350],{"class":315},[309,1547,1548],{"class":311,"line":409},[309,1549,533],{"emptyLinePlaceholder":532},[309,1551,1552,1554,1557,1560,1563,1565,1567,1570,1572],{"class":311,"line":416},[309,1553,316],{"class":315},[309,1555,1556],{"class":319},"script",[309,1558,1559],{"class":322}," setup",[309,1561,1562],{"class":322}," lang",[309,1564,326],{"class":315},[309,1566,329],{"class":315},[309,1568,1569],{"class":332},"ts",[309,1571,329],{"class":315},[309,1573,350],{"class":315},[309,1575,1576,1580],{"class":311,"line":430},[309,1577,1579],{"class":1578},"s2Zo4","  defineProps",[309,1581,1582],{"class":315},"\u003C{\n",[309,1584,1585,1588,1590,1593],{"class":311,"line":444},[309,1586,1587],{"class":319},"    title",[309,1589,546],{"class":315},[309,1591,1592],{"class":598}," string",[309,1594,1595],{"class":315},";\n",[309,1597,1598,1601,1604],{"class":311,"line":449},[309,1599,1600],{"class":315},"  }>",[309,1602,1603],{"class":1154},"()",[309,1605,1595],{"class":315},[309,1607,1608,1610,1612],{"class":311,"line":458},[309,1609,461],{"class":315},[309,1611,1556],{"class":319},[309,1613,350],{"class":315},[300,1615,1617],{"className":1465,"code":1616,"filename":1457,"language":1468,"meta":305,"style":305},"\u003Ctemplate>\n  \u003Cdiv class=\"article-teaser\">\n    \u003Ca :href=\"href\">{{  excerpt }}\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\n  defineProps\u003C{\n    href: string;\n    excerpt: string;\n  }>();\n\u003C\u002Fscript>\n\n",[239,1618,1619,1627,1645,1673,1681,1689,1693,1713,1719,1730,1741,1749],{"__ignoreMap":305},[309,1620,1621,1623,1625],{"class":311,"line":312},[309,1622,316],{"class":315},[309,1624,1477],{"class":319},[309,1626,350],{"class":315},[309,1628,1629,1631,1633,1635,1637,1639,1641,1643],{"class":311,"line":353},[309,1630,1484],{"class":315},[309,1632,1487],{"class":319},[309,1634,1490],{"class":322},[309,1636,326],{"class":315},[309,1638,329],{"class":315},[309,1640,297],{"class":332},[309,1642,329],{"class":315},[309,1644,350],{"class":315},[309,1646,1647,1649,1651,1654,1656,1658,1660,1662,1664,1667,1669,1671],{"class":311,"line":362},[309,1648,356],{"class":315},[309,1650,474],{"class":319},[309,1652,1653],{"class":322}," :href",[309,1655,326],{"class":315},[309,1657,329],{"class":315},[309,1659,742],{"class":332},[309,1661,329],{"class":315},[309,1663,1509],{"class":315},[309,1665,1666],{"class":1154},"{{  excerpt }}",[309,1668,461],{"class":315},[309,1670,474],{"class":319},[309,1672,350],{"class":315},[309,1674,1675,1677,1679],{"class":311,"line":378},[309,1676,1533],{"class":315},[309,1678,1487],{"class":319},[309,1680,350],{"class":315},[309,1682,1683,1685,1687],{"class":311,"line":393},[309,1684,461],{"class":315},[309,1686,1477],{"class":319},[309,1688,350],{"class":315},[309,1690,1691],{"class":311,"line":399},[309,1692,533],{"emptyLinePlaceholder":532},[309,1694,1695,1697,1699,1701,1703,1705,1707,1709,1711],{"class":311,"line":409},[309,1696,316],{"class":315},[309,1698,1556],{"class":319},[309,1700,1559],{"class":322},[309,1702,1562],{"class":322},[309,1704,326],{"class":315},[309,1706,329],{"class":315},[309,1708,1569],{"class":332},[309,1710,329],{"class":315},[309,1712,350],{"class":315},[309,1714,1715,1717],{"class":311,"line":416},[309,1716,1579],{"class":1578},[309,1718,1582],{"class":315},[309,1720,1721,1724,1726,1728],{"class":311,"line":430},[309,1722,1723],{"class":319},"    href",[309,1725,546],{"class":315},[309,1727,1592],{"class":598},[309,1729,1595],{"class":315},[309,1731,1732,1735,1737,1739],{"class":311,"line":444},[309,1733,1734],{"class":319},"    excerpt",[309,1736,546],{"class":315},[309,1738,1592],{"class":598},[309,1740,1595],{"class":315},[309,1742,1743,1745,1747],{"class":311,"line":449},[309,1744,1600],{"class":315},[309,1746,1603],{"class":1154},[309,1748,1595],{"class":315},[309,1750,1751,1753,1755],{"class":311,"line":458},[309,1752,461],{"class":315},[309,1754,1556],{"class":319},[309,1756,350],{"class":315},[227,1758,1759,1760,1762,1763,1766,1767,1770],{},"The above example of ",[239,1761,1467],{}," makes use of native Vue slots to render the article teasers. With JSON-based rendering (the default), the Nuxt Drupal CE connector automatically handles slot content - simply use ",[239,1764,1765],{},"\u003Cslot \u002F>"," in your template and it works out of the box. Markup-based rendering requires additional setup and configuration. Refer to ",[474,1768,1769],{"href":173},"Render custom elements"," docs for more details.",[231,1772,23],{"id":1773},"first-steps",[227,1775,1776,1777,1780,1781,1784,1785,481],{},"Best, test things yourself by either quickly launching a ",[474,1778,1779],{"href":16},"cloud environment"," or setting up a ",[474,1782,1783],{"href":20},"new project"," locally, then continue with your ",[474,1786,1787],{"href":24},"first steps",[1789,1790,1791],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .su27w, html code.shiki .su27w{--shiki-light:#916B53;--shiki-default:#916B53;--shiki-dark:#916B53}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":305,"searchDepth":353,"depth":353,"links":1793},[1794,1795,1796,1797,1798,1799],{"id":233,"depth":353,"text":234},{"id":468,"depth":353,"text":469},{"id":484,"depth":353,"text":485},{"id":1406,"depth":353,"text":1407},{"id":1447,"depth":353,"text":1448},{"id":1773,"depth":353,"text":23},"md",null,{},{"title":11,"description":229},"NBrpITCAQashzBzkXEGUvAjvpeGRSkQUrTPUAdf-u2w",[1801,1806],{"title":15,"path":16,"stem":17,"description":305,"children":-1},1776084714902]