[{"data":1,"prerenderedAt":398},["ShallowReactive",2],{"navigation_docs":3,"-advanced-topics-listings-views":221,"-advanced-topics-listings-views-surround":394},[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":88,"body":223,"description":387,"extension":388,"links":389,"meta":390,"navigation":391,"path":89,"seo":392,"stem":90,"__hash__":393},"docs\u002F3.advanced-topics\u002F10.listings-views.md",{"type":224,"value":225,"toc":380},"minimark",[226,238,249,254,257,308,311,315,326,338,342],[227,228,229,230,237],"p",{},"The ",[231,232,236],"a",{"href":233,"rel":234},"https:\u002F\u002Fgit.drupalcode.org\u002Fproject\u002Flupus_decoupled\u002F-\u002Fblob\u002F1.x\u002Fmodules\u002Flupus_decoupled_views\u002FREADME.md",[235],"nofollow","Lupus Decoupled Views","\nsubmodule provides support for Drupal's Views module. The Views module is Drupal's native way and very powerful way of creating listings of content. It provides a UI for configuring complex queries, searches and the rendering of results, including paging.",[227,239,240,241,244,245,248],{},"As alternative to Views-based listings, the frontend may ",[231,242,243],{"href":185},"create custom routes"," and listings by querying the backend, see ",[231,246,247],{"href":97},"JSON-API, GraphQL",".",[250,251,253],"h2",{"id":252},"usage","Usage",[227,255,256],{},"After enabling the sub-module, create a view, skip the wizard and follow the following steps:",[258,259,260,269,275,281,284,294],"ol",{},[261,262,263,264,268],"li",{},"Add ",[265,266,267],"code",{},"Custom elements display page"," to a view (not a regular page!).",[261,270,271,272,274],{},"Select ",[265,273,134],{}," style as view format.",[261,276,271,277,280],{},[265,278,279],{},"Content"," as row style. Choose the view-mode you want to use for the listed elements.",[261,282,283],{},"Configure filters and other options as needed and set a path for the view.",[261,285,286,287,290,291,248],{},"The Custom elements API of the view is available at ",[265,288,289],{},"\u002Fce-api\u002F\u003Cview-path>",". Take note of the custom element name visible in the output, which will be ",[265,292,293],{},"drupal-view-{ID}",[261,295,296,297,300,301,303,304,307],{},"On the frontend clone the ",[265,298,299],{},"drupal-view--default"," component and create a component using the noted custom element name ",[265,302,293],{},". Test the view on the frontend at the configured path ",[265,305,306],{},"\u003Cview-path>"," and customize the component as desired.",[227,309,310],{},"Note that the chosen view-mode is automatically rendered with custom elements within the view. It's not required to force rendering it via custom elements.",[250,312,314],{"id":313},"video-tutorial","Video tutorial",[227,316,317,318],{},"In the following tutorial an example configuration can be followed: ",[231,319,322],{"href":320,"rel":321},"https:\u002F\u002Fwww.youtube.com\u002Flive\u002FKKTl4z_MGSg?si=j4qWfVlo9IOiobDy&t=1352",[235],[323,324],"img",{"alt":314,"src":325},"\u002Fimages\u002Flupus-decoupled-youtube.png",[227,327,328,329,332,333,335,336,248],{},"Note: The tutorial is a year old and uses ",[265,330,331],{},"drupal-view"," as custom element name. That changed meanwhile, use ",[265,334,293],{}," as custom element name or stay with the default ",[265,337,299],{},[250,339,341],{"id":340},"status","Status",[343,344,345,353,356,369],"ul",{},[261,346,347,348,248],{},"Support for Views is rather new and problems may arise with certain configurations. Please report any issues in the ",[231,349,352],{"href":350,"rel":351},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fissues\u002Flupus_decoupled?categories=All",[235],"Lupus Decoupled Drupal issue queue",[261,354,355],{},"Atm there is no support for rendering exposed filter forms. So those need to be added manually in the frontend, when needed.",[261,357,358,359,362,363,368],{},"The Row style ",[265,360,361],{},"Fields"," is not supported yet (see\n",[231,364,367],{"href":365,"rel":366},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_decoupled\u002Fissues\u002F3461874",[235],"#3461874",").",[261,370,371,372,375,376,248],{},"Items formatted as ",[265,373,374],{},"Rendered entities"," are supported. These are needed for ",[231,377,379],{"href":378},"searches#search-api-views","Search API Index Views",{"title":381,"searchDepth":382,"depth":382,"links":383},"",2,[384,385,386],{"id":252,"depth":382,"text":253},{"id":313,"depth":382,"text":314},{"id":340,"depth":382,"text":341},"The Lupus Decoupled Views\nsubmodule provides support for Drupal's Views module. The Views module is Drupal's native way and very powerful way of creating listings of content. It provides a UI for configuring complex queries, searches and the rendering of results, including paging.","md",null,{},true,{"title":88,"description":387},"1dvZ6Wit3gC6IEot9SHX4fPCYOIhEmipNo5dJLtNfiU",[395,397],{"title":84,"path":85,"stem":86,"description":396,"children":-1},"Thanks to the component-oriented decoupling of Lupus Decoupled Drupal, it's really easy to connect a frontend of choice!",{"title":92,"path":93,"stem":94,"description":381,"children":-1},1776084716274]