[{"data":1,"prerenderedAt":586},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-drupal-libraries":233,"-nuxt-drupal-libraries-surround":581},[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":188,"body":235,"description":306,"extension":576,"links":577,"meta":578,"navigation":405,"path":189,"seo":579,"stem":190,"__hash__":580},"docs\u002F5.nuxt\u002F37.drupal-libraries.md",{"type":236,"value":237,"toc":569},"minimark",[238,243,256,260,281,300,467,471,481,484,524,534,538,549,553,565],[239,240,242],"h2",{"id":241},"overview","Overview",[244,245,246,247,251,252,255],"p",{},"Drupal emits the JavaScript libraries attached to a rendered form, block or component as ",[248,249,250],"code",{},"\u003Cdrupal-library-*>"," custom elements. See ",[253,254,112],"a",{"href":113}," for what the backend sends and why; this page covers loading them in Nuxt.",[239,257,259],{"id":258},"rendering-library-elements","Rendering library elements",[244,261,262,263,266,267,270,271,274,275,280],{},"Add a global ",[248,264,265],{},"drupal-library--default.vue"," component - the ",[253,268,269],{"href":181},"default component"," lookup resolves it for every ",[248,272,273],{},"drupal-library-*"," element, whatever library the backend attached. A reference implementation is part of the playground: ",[253,276,265],{"href":277,"rel":278},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce\u002Fblob\u002F2.x\u002Fplayground\u002Fcomponents\u002Fglobal\u002Fdrupal-library--default.vue",[279],"nofollow",".",[244,282,283,284,287,288,291,292,295,296,299],{},"The component is renderless: it takes the ",[248,285,286],{},"library",", ",[248,289,290],{},"js"," and ",[248,293,294],{},"drupalSettings"," props of the element, hands them to ",[248,297,298],{},"useDrupalCe().loadLibrary()"," on mount, and renders nothing.",[301,302,307],"pre",{"className":303,"code":304,"language":305,"meta":306,"style":306},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nconst props = defineProps({ js: Array, drupalSettings: String })\nconst { loadLibrary } = useDrupalCe()\n\nonMounted(() => loadLibrary({ js: props.js, drupalSettings: props.drupalSettings }))\n\u003C\u002Fscript>\n","vue","",[248,308,309,329,378,400,407,457],{"__ignoreMap":306},[310,311,314,318,322,326],"span",{"class":312,"line":313},"line",1,[310,315,317],{"class":316},"sMK4o","\u003C",[310,319,321],{"class":320},"swJcz","script",[310,323,325],{"class":324},"spNyl"," setup",[310,327,328],{"class":316},">\n",[310,330,332,335,339,342,346,349,352,355,358,361,364,367,369,372,375],{"class":312,"line":331},2,[310,333,334],{"class":324},"const",[310,336,338],{"class":337},"sTEyZ"," props ",[310,340,341],{"class":316},"=",[310,343,345],{"class":344},"s2Zo4"," defineProps",[310,347,348],{"class":337},"(",[310,350,351],{"class":316},"{",[310,353,354],{"class":320}," js",[310,356,357],{"class":316},":",[310,359,360],{"class":337}," Array",[310,362,363],{"class":316},",",[310,365,366],{"class":320}," drupalSettings",[310,368,357],{"class":316},[310,370,371],{"class":337}," String ",[310,373,374],{"class":316},"}",[310,376,377],{"class":337},")\n",[310,379,381,383,386,389,391,394,397],{"class":312,"line":380},3,[310,382,334],{"class":324},[310,384,385],{"class":316}," {",[310,387,388],{"class":337}," loadLibrary ",[310,390,374],{"class":316},[310,392,393],{"class":316}," =",[310,395,396],{"class":344}," useDrupalCe",[310,398,399],{"class":337},"()\n",[310,401,403],{"class":312,"line":402},4,[310,404,406],{"emptyLinePlaceholder":405},true,"\n",[310,408,410,413,415,418,421,424,426,428,430,432,435,437,439,441,443,445,447,449,452,454],{"class":312,"line":409},5,[310,411,412],{"class":344},"onMounted",[310,414,348],{"class":337},[310,416,417],{"class":316},"()",[310,419,420],{"class":324}," =>",[310,422,423],{"class":344}," loadLibrary",[310,425,348],{"class":337},[310,427,351],{"class":316},[310,429,354],{"class":320},[310,431,357],{"class":316},[310,433,434],{"class":337}," props",[310,436,280],{"class":316},[310,438,290],{"class":337},[310,440,363],{"class":316},[310,442,366],{"class":320},[310,444,357],{"class":316},[310,446,434],{"class":337},[310,448,280],{"class":316},[310,450,451],{"class":337},"drupalSettings ",[310,453,374],{"class":316},[310,455,456],{"class":337},"))\n",[310,458,460,463,465],{"class":312,"line":459},6,[310,461,462],{"class":316},"\u003C\u002F",[310,464,321],{"class":320},[310,466,328],{"class":316},[239,468,470],{"id":469},"loadlibrary","loadLibrary()",[244,472,473,476,477,480],{},[248,474,475],{},"useDrupalCe().loadLibrary(library)"," takes a resolved library (",[248,478,479],{},"{ js, drupalSettings }",") and returns a promise settling once its files have loaded. On the server it resolves immediately - loading is a client-side concern.",[244,482,483],{},"It lazy-loads the actual loader via a dynamic import, so the loader chunk - and the Drupal JavaScript it pulls in - is only fetched by pages that actually render a library element. The loader then:",[485,486,487,494,501,504,514,521],"ul",{},[488,489,490,491,363],"li",{},"resolves the file URLs against the configured ",[248,492,493],{},"drupalBaseUrl",[488,495,496,497,500],{},"appends them as ",[248,498,499],{},"\u003Cscript>"," tags, preserving execution order across all calls, so libraries load in the dependency order the backend resolved,",[488,502,503],{},"loads each URL only once, even when several libraries share a file,",[488,505,506,507,509,510,513],{},"merges ",[248,508,294],{}," into ",[248,511,512],{},"window.drupalSettings"," before any script runs,",[488,515,516,517,520],{},"calls ",[248,518,519],{},"Drupal.attachBehaviors()"," once the batch has loaded, so behaviours attach to the server-rendered markup,",[488,522,523],{},"skips a file that fails to load with a console warning, rather than aborting the batch.",[244,525,526,527,530,531,533],{},"The ",[248,528,529],{},"attributes"," a library declares for its ",[248,532,499],{}," tags are currently not applied.",[239,535,537],{"id":536},"overriding-or-skipping-a-library","Overriding or skipping a library",[244,539,540,541,544,545,548],{},"To replace a library with a native implementation, add a component named after its element tag - ",[248,542,543],{},"drupal-library-core-drupal-states.vue"," for ",[248,546,547],{},"core\u002Fdrupal.states",". It takes precedence over the default component, so the library's JavaScript is never loaded. A component that renders nothing and does nothing skips the library entirely.",[239,550,552],{"id":551},"trying-it-out","Trying it out",[244,554,555,556,558,559,564],{},"The playground has a form whose conditional field is driven by ",[248,557,547],{}," at ",[253,560,563],{"href":561,"rel":562},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce\u002Fblob\u002F2.x\u002Fplayground\u002Fserver\u002Froutes\u002Fce-api\u002Fform\u002Fstates.get.ts",[279],"\u002Fform\u002Fstates",", served by a mock Custom Elements API response - a working example of the whole path, from the emitted elements to the attached behaviour.",[566,567,568],"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 .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}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);}",{"title":306,"searchDepth":331,"depth":331,"links":570},[571,572,573,574,575],{"id":241,"depth":331,"text":242},{"id":258,"depth":331,"text":259},{"id":469,"depth":331,"text":470},{"id":536,"depth":331,"text":537},{"id":551,"depth":331,"text":552},"md",null,{},{"title":188,"description":306},"mQjyDBtjyjP7KsFSevE-NGGLw4ZMOQdZlrlaeooae7Y",[582,584],{"title":184,"path":185,"stem":186,"description":583,"children":-1},"The composable provided by the module provides helpers to fetch page and menu data, handle errors, and render custom components.",{"title":192,"path":193,"stem":194,"description":585,"children":-1},"Custom frontend routes are routes that are not defined in Drupal. They are defined in the frontend and can be used create custom pages.",1786631281622]