[{"data":1,"prerenderedAt":537},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-component-previews":225,"-nuxt-component-previews-surround":532},[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":192,"body":227,"description":525,"extension":526,"links":527,"meta":528,"navigation":529,"path":193,"seo":530,"stem":194,"__hash__":531},"docs\u002F5.nuxt\u002F55.component-previews.md",{"type":228,"value":229,"toc":521},"minimark",[230,234,242,254,269,273,280,284,287,290,316,331,393,459,462,508,517],[231,232,192],"h1",{"id":233},"component-previews",[235,236,237,238,241],"p",{},"Component previews allow Vue components to be rendered in isolation in external contexts, such as the ",[239,240,70],"a",{"href":71}," editor. This enables editors to see live previews of components directly in the page builder.",[235,243,244,250,251,253],{},[239,245,249],{"href":246,"rel":247},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview",[248],"nofollow","nuxt-component-preview"," implements this for Nuxt\u002FVue. It enables previewing components in external contexts and auto-generates a component index for ",[239,252,70],{"href":71}," integration.",[235,255,256,257,262,263,268],{},"If you are using the ",[239,258,261],{"href":259,"rel":260},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Flupus-decoupled-nuxt-starter",[248],"Nuxt Starter"," or ",[239,264,267],{"href":265,"rel":266},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce",[248],"nuxtjs-drupal-ce",", the module is already pre-configured — no setup needed.",[270,271,196],"h2",{"id":272},"component-index",[235,274,275,276,279],{},"The same module also auto-generates a ",[239,277,278],{"href":197},"component index"," that Canvas uses to discover the available components, their props, and their metadata.",[270,281,283],{"id":282},"manual-setup","Manual Setup",[235,285,286],{},"If you are not using the Nuxt Starter or nuxtjs-drupal-ce, install and configure the module manually.",[235,288,289],{},"Install the module:",[291,292,297],"pre",{"className":293,"code":294,"language":295,"meta":296,"style":296},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install nuxt-component-preview\n","bash","",[298,299,300],"code",{"__ignoreMap":296},[301,302,305,309,313],"span",{"class":303,"line":304},"line",1,[301,306,308],{"class":307},"sBMFI","npm",[301,310,312],{"class":311},"sfazB"," install",[301,314,315],{"class":311}," nuxt-component-preview\n",[235,317,318,319,322,323,326,327,330],{},"Add it to ",[298,320,321],{},"nuxt.config.ts"," and add ",[298,324,325],{},"\u003CComponentPreviewArea \u002F>"," to ",[298,328,329],{},"app.vue",":",[291,332,336],{"className":333,"code":334,"language":335,"meta":296,"style":296},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['nuxt-component-preview'],\n})\n","ts",[298,337,338,359,384],{"__ignoreMap":296},[301,339,340,344,347,351,355],{"class":303,"line":304},[301,341,343],{"class":342},"s7zQu","export",[301,345,346],{"class":342}," default",[301,348,350],{"class":349},"s2Zo4"," defineNuxtConfig",[301,352,354],{"class":353},"sTEyZ","(",[301,356,358],{"class":357},"sMK4o","{\n",[301,360,362,366,368,371,374,376,378,381],{"class":303,"line":361},2,[301,363,365],{"class":364},"swJcz","  modules",[301,367,330],{"class":357},[301,369,370],{"class":353}," [",[301,372,373],{"class":357},"'",[301,375,249],{"class":311},[301,377,373],{"class":357},[301,379,380],{"class":353},"]",[301,382,383],{"class":357},",\n",[301,385,387,390],{"class":303,"line":386},3,[301,388,389],{"class":357},"}",[301,391,392],{"class":353},")\n",[291,394,398],{"className":395,"code":396,"language":397,"meta":296,"style":296},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CComponentPreviewArea v-if=\"useRuntimeConfig().public.componentPreview\" \u002F>\n  \u003CNuxtPage v-else \u002F>\n\u003C\u002Ftemplate>\n","vue",[298,399,400,411,437,449],{"__ignoreMap":296},[301,401,402,405,408],{"class":303,"line":304},[301,403,404],{"class":357},"\u003C",[301,406,407],{"class":364},"template",[301,409,410],{"class":357},">\n",[301,412,413,416,419,423,426,429,432,434],{"class":303,"line":361},[301,414,415],{"class":357},"  \u003C",[301,417,418],{"class":364},"ComponentPreviewArea",[301,420,422],{"class":421},"spNyl"," v-if",[301,424,425],{"class":357},"=",[301,427,428],{"class":357},"\"",[301,430,431],{"class":311},"useRuntimeConfig().public.componentPreview",[301,433,428],{"class":357},[301,435,436],{"class":357}," \u002F>\n",[301,438,439,441,444,447],{"class":303,"line":386},[301,440,415],{"class":357},[301,442,443],{"class":364},"NuxtPage",[301,445,446],{"class":421}," v-else",[301,448,436],{"class":357},[301,450,452,455,457],{"class":303,"line":451},4,[301,453,454],{"class":357},"\u003C\u002F",[301,456,407],{"class":364},[301,458,410],{"class":357},[235,460,461],{},"When embedding previews from a different domain (e.g. a Drupal backend), disable the app manifest in development to avoid relative URL failures:",[291,463,465],{"className":333,"code":464,"language":335,"meta":296,"style":296},"$development: {\n  experimental: {\n    appManifest: false\n  }\n}\n",[298,466,467,477,486,497,502],{"__ignoreMap":296},[301,468,469,472,474],{"class":303,"line":304},[301,470,471],{"class":307},"$development",[301,473,330],{"class":357},[301,475,476],{"class":357}," {\n",[301,478,479,482,484],{"class":303,"line":361},[301,480,481],{"class":307},"  experimental",[301,483,330],{"class":357},[301,485,476],{"class":357},[301,487,488,491,493],{"class":303,"line":386},[301,489,490],{"class":307},"    appManifest",[301,492,330],{"class":357},[301,494,496],{"class":495},"sfNiH"," false\n",[301,498,499],{"class":303,"line":451},[301,500,501],{"class":357},"  }\n",[301,503,505],{"class":303,"line":504},5,[301,506,507],{"class":357},"}\n",[235,509,510,511,516],{},"For CORS configuration, see the ",[239,512,515],{"href":513,"rel":514},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview#cors-configuration",[248],"nuxt-component-preview CORS setup",". When using nuxtjs-drupal-ce, CORS is configured automatically.",[518,519,520],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":296,"searchDepth":361,"depth":361,"links":522},[523,524],{"id":272,"depth":361,"text":196},{"id":282,"depth":361,"text":283},"Component previews allow Vue components to be rendered in isolation in external contexts, such as the Drupal Canvas editor. This enables editors to see live previews of components directly in the page builder.","md",null,{},true,{"title":192,"description":525},"cihK71sJcVDzAjh045VRzcl7kMuddPkoBANOZ55Hkb8",[533,535],{"title":188,"path":189,"stem":190,"description":534,"children":-1},"Nuxt layouts are placed in the .\u002Flayouts directory and are used to define a shared site layout\nfor a group of pages. When a page has a different layout, nuxt takes care of swapping the layout component(s).",{"title":196,"path":197,"stem":198,"description":536,"children":-1},"To make Vue components available in the Drupal Canvas editor, the frontend exposes a component index: a JSON file listing all available components together with their props, prop schemas, labels, descriptions, categories, formats and schema references. Canvas External JS Components reads this index and uses it to populate the editor UI.",1779292116339]