[{"data":1,"prerenderedAt":1529},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-component-previews":221,"-nuxt-component-previews-surround":1524},[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":192,"body":223,"description":1518,"extension":1519,"links":1520,"meta":1521,"navigation":452,"path":193,"seo":1522,"stem":194,"__hash__":1523},"docs\u002F5.nuxt\u002F55.component-previews.md",{"type":224,"value":225,"toc":1505},"minimark",[226,230,238,250,265,270,284,304,309,316,528,536,540,543,547,553,652,723,726,730,733,931,938,1089,1093,1099,1132,1135,1228,1234,1250,1254,1272,1295,1301,1305,1308,1311,1329,1342,1389,1446,1449,1492,1501],[227,228,192],"h1",{"id":229},"component-previews",[231,232,233,234,237],"p",{},"Component previews allow Vue components to be rendered in isolation in external contexts, such as the ",[235,236,70],"a",{"href":71}," editor. This enables editors to see live previews of components directly in the page builder.",[231,239,240,246,247,249],{},[235,241,245],{"href":242,"rel":243},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview",[244],"nofollow","nuxt-component-preview"," implements this for Nuxt\u002FVue. It enables previewing components in external contexts and auto-generates a component index for ",[235,248,70],{"href":71}," integration.",[231,251,252,253,258,259,264],{},"If you are using the ",[235,254,257],{"href":255,"rel":256},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Flupus-decoupled-nuxt-starter",[244],"Nuxt Starter"," or ",[235,260,263],{"href":261,"rel":262},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce",[244],"nuxtjs-drupal-ce",", the module is already pre-configured — no setup needed.",[266,267,269],"h2",{"id":268},"component-index","Component Index",[231,271,272,273,277,278,283],{},"The module auto-generates a component index at ",[274,275,276],"code",{},"\u002Fnuxt-component-preview\u002Fcomponent-index.json",", listing all global components with their metadata and prop schemas. This is what ",[235,279,282],{"href":280,"rel":281},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcanvas_extjs",[244],"Canvas External JS Components"," (a Canvas extension for integrating external JavaScript components) reads to populate the Canvas editor.",[231,285,286,287,291,292,295,296,299,300,303],{},"Only ",[288,289,290],"strong",{},"global"," components are included. Components in ",[274,293,294],{},"components\u002Fglobal\u002F"," are automatically global; others can be registered with ",[274,297,298],{},"global: true"," in ",[274,301,302],{},"nuxt.config.ts",".",[305,306,308],"h3",{"id":307},"grouping-components-by-folder","Grouping Components by Folder",[231,310,311,312,315],{},"A recommended pattern is to keep Canvas components in a dedicated ",[274,313,314],{},"components\u002FCanvas\u002F"," folder and derive categories from subfolder names:",[317,318,323],"pre",{"className":319,"code":320,"language":321,"meta":322,"style":322},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","components: [\n  { path: '~\u002Fcomponents\u002FCanvas', global: true, pathPrefix: false, prefix: '' },\n  { path: '~\u002Fcomponents\u002Fglobal', global: true },\n  '~\u002Fcomponents',\n],\n\ncomponentPreview: {\n  componentIndex: {\n    \u002F\u002F Derive Canvas component categories from folder names (Base\u002F, Layout\u002F, Card\u002F, Hero\u002F)\n    category: { directory: true, fallback: 'Misc' },\n  },\n},\n","ts","",[274,324,325,342,399,425,439,447,454,465,475,482,516,522],{"__ignoreMap":322},[326,327,330,334,338],"span",{"class":328,"line":329},"line",1,[326,331,333],{"class":332},"sBMFI","components",[326,335,337],{"class":336},"sMK4o",":",[326,339,341],{"class":340},"sTEyZ"," [\n",[326,343,345,348,352,354,357,361,364,367,370,372,376,378,381,383,386,388,391,393,396],{"class":328,"line":344},2,[326,346,347],{"class":336},"  {",[326,349,351],{"class":350},"swJcz"," path",[326,353,337],{"class":336},[326,355,356],{"class":336}," '",[326,358,360],{"class":359},"sfazB","~\u002Fcomponents\u002FCanvas",[326,362,363],{"class":336},"'",[326,365,366],{"class":336},",",[326,368,369],{"class":350}," global",[326,371,337],{"class":336},[326,373,375],{"class":374},"sfNiH"," true",[326,377,366],{"class":336},[326,379,380],{"class":350}," pathPrefix",[326,382,337],{"class":336},[326,384,385],{"class":374}," false",[326,387,366],{"class":336},[326,389,390],{"class":350}," prefix",[326,392,337],{"class":336},[326,394,395],{"class":336}," ''",[326,397,398],{"class":336}," },\n",[326,400,402,404,406,408,410,413,415,417,419,421,423],{"class":328,"line":401},3,[326,403,347],{"class":336},[326,405,351],{"class":350},[326,407,337],{"class":336},[326,409,356],{"class":336},[326,411,412],{"class":359},"~\u002Fcomponents\u002Fglobal",[326,414,363],{"class":336},[326,416,366],{"class":336},[326,418,369],{"class":350},[326,420,337],{"class":336},[326,422,375],{"class":374},[326,424,398],{"class":336},[326,426,428,431,434,436],{"class":328,"line":427},4,[326,429,430],{"class":336},"  '",[326,432,433],{"class":359},"~\u002Fcomponents",[326,435,363],{"class":336},[326,437,438],{"class":336},",\n",[326,440,442,445],{"class":328,"line":441},5,[326,443,444],{"class":340},"]",[326,446,438],{"class":336},[326,448,450],{"class":328,"line":449},6,[326,451,453],{"emptyLinePlaceholder":452},true,"\n",[326,455,457,460,462],{"class":328,"line":456},7,[326,458,459],{"class":332},"componentPreview",[326,461,337],{"class":336},[326,463,464],{"class":336}," {\n",[326,466,468,471,473],{"class":328,"line":467},8,[326,469,470],{"class":332},"  componentIndex",[326,472,337],{"class":336},[326,474,464],{"class":336},[326,476,478],{"class":328,"line":477},9,[326,479,481],{"class":480},"sHwdD","    \u002F\u002F Derive Canvas component categories from folder names (Base\u002F, Layout\u002F, Card\u002F, Hero\u002F)\n",[326,483,485,488,490,493,496,498,500,502,505,507,509,512,514],{"class":328,"line":484},10,[326,486,487],{"class":332},"    category",[326,489,337],{"class":336},[326,491,492],{"class":336}," {",[326,494,495],{"class":332}," directory",[326,497,337],{"class":336},[326,499,375],{"class":374},[326,501,366],{"class":336},[326,503,504],{"class":332}," fallback",[326,506,337],{"class":336},[326,508,356],{"class":336},[326,510,511],{"class":359},"Misc",[326,513,363],{"class":336},[326,515,398],{"class":336},[326,517,519],{"class":328,"line":518},11,[326,520,521],{"class":336},"  },\n",[326,523,525],{"class":328,"line":524},12,[326,526,527],{"class":336},"},\n",[231,529,530,531,303],{},"For working examples, see the ",[235,532,535],{"href":533,"rel":534},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Flupus-decoupled-nuxt-starter\u002Ftree\u002Fmain\u002Fcomponents\u002FCanvas",[244],"Canvas components in the Lupus Decoupled Nuxt Starter",[266,537,539],{"id":538},"jsdoc-metadata","JSDoc Metadata",[231,541,542],{},"Both components and their props are documented via TypeScript, with JSDoc annotations used to provide additional metadata that TypeScript alone cannot express. The pattern is consistent: a label (display name) and an optional description, plus additional tags.",[305,544,546],{"id":545},"component-metadata","Component Metadata",[231,548,549,550,337],{},"Define component-level metadata via a JSDoc comment at the top of ",[274,551,552],{},"\u003Cscript setup>",[317,554,558],{"className":555,"code":556,"language":557,"meta":322,"style":322},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\n\u002F**\n * Hero Billboard\n * @description A full-width hero section with background image and overlay.\n * @category Hero\n * @status stable\n *\u002F\n\u003C\u002Fscript>\n","vue",[274,559,560,588,593,598,614,626,638,643],{"__ignoreMap":322},[326,561,562,565,568,572,575,578,581,583,585],{"class":328,"line":329},[326,563,564],{"class":336},"\u003C",[326,566,567],{"class":350},"script",[326,569,571],{"class":570},"spNyl"," setup",[326,573,574],{"class":570}," lang",[326,576,577],{"class":336},"=",[326,579,580],{"class":336},"\"",[326,582,321],{"class":359},[326,584,580],{"class":336},[326,586,587],{"class":336},">\n",[326,589,590],{"class":328,"line":344},[326,591,592],{"class":480},"\u002F**\n",[326,594,595],{"class":328,"line":401},[326,596,597],{"class":480}," * Hero Billboard\n",[326,599,600,603,607,611],{"class":328,"line":427},[326,601,602],{"class":480}," * ",[326,604,606],{"class":605},"s7zQu","@",[326,608,610],{"class":609},"s6hCs","description",[326,612,613],{"class":480}," A full-width hero section with background image and overlay.\n",[326,615,616,618,620,623],{"class":328,"line":441},[326,617,602],{"class":480},[326,619,606],{"class":605},[326,621,622],{"class":609},"category",[326,624,625],{"class":480}," Hero\n",[326,627,628,630,632,635],{"class":328,"line":449},[326,629,602],{"class":480},[326,631,606],{"class":605},[326,633,634],{"class":609},"status",[326,636,637],{"class":480}," stable\n",[326,639,640],{"class":328,"line":456},[326,641,642],{"class":480}," *\u002F\n",[326,644,645,648,650],{"class":328,"line":467},[326,646,647],{"class":336},"\u003C\u002F",[326,649,567],{"class":350},[326,651,587],{"class":336},[653,654,655,668],"table",{},[656,657,658],"thead",{},[659,660,661,665],"tr",{},[662,663,664],"th",{},"Tag",[662,666,667],{},"Description",[669,670,671,680,690,700],"tbody",{},[659,672,673,677],{},[674,675,676],"td",{},"First line",[674,678,679],{},"Label \u002F display name (falls back to auto-generated from PascalCase)",[659,681,682,687],{},[674,683,684],{},[274,685,686],{},"@description",[674,688,689],{},"Component description shown in the editor",[659,691,692,697],{},[674,693,694],{},[274,695,696],{},"@category",[674,698,699],{},"Category override (alternative to directory-based)",[659,701,702,707],{},[674,703,704],{},[274,705,706],{},"@status",[674,708,709,712,713,712,716,719,720],{},[274,710,711],{},"experimental",", ",[274,714,715],{},"stable",[274,717,718],{},"deprecated",", or ",[274,721,722],{},"obsolete",[231,724,725],{},"All fields are optional. Config-level overrides take priority over JSDoc.",[305,727,729],{"id":728},"prop-metadata","Prop Metadata",[231,731,732],{},"Props follow the same pattern — a label and description, plus additional tags for editor behavior:",[317,734,736],{"className":555,"code":735,"language":557,"meta":322,"style":322},"\u003Cscript setup lang=\"ts\">\nwithDefaults(defineProps\u003C{\n  \u002F**\n   * Button label text\n   * @example Submit\n   *\u002F\n  label?: string\n  \u002F**\n   * Button variant\n   * @enumLabels {\"large\": \"Extra Large (XL)\"}\n   *\u002F\n  variant?: 'primary' | 'secondary' | 'large'\n}>(), {\n  label: 'Click me',\n  variant: 'primary'\n})\n\u003C\u002Fscript>\n",[274,737,738,758,773,778,783,796,801,812,816,821,833,837,871,884,900,913,922],{"__ignoreMap":322},[326,739,740,742,744,746,748,750,752,754,756],{"class":328,"line":329},[326,741,564],{"class":336},[326,743,567],{"class":350},[326,745,571],{"class":570},[326,747,574],{"class":570},[326,749,577],{"class":336},[326,751,580],{"class":336},[326,753,321],{"class":359},[326,755,580],{"class":336},[326,757,587],{"class":336},[326,759,760,764,767,770],{"class":328,"line":344},[326,761,763],{"class":762},"s2Zo4","withDefaults",[326,765,766],{"class":340},"(",[326,768,769],{"class":762},"defineProps",[326,771,772],{"class":336},"\u003C{\n",[326,774,775],{"class":328,"line":401},[326,776,777],{"class":480},"  \u002F**\n",[326,779,780],{"class":328,"line":427},[326,781,782],{"class":480},"   * Button label text\n",[326,784,785,788,790,793],{"class":328,"line":441},[326,786,787],{"class":480},"   * ",[326,789,606],{"class":605},[326,791,792],{"class":609},"example",[326,794,795],{"class":480}," Submit\n",[326,797,798],{"class":328,"line":449},[326,799,800],{"class":480},"   *\u002F\n",[326,802,803,806,809],{"class":328,"line":456},[326,804,805],{"class":350},"  label",[326,807,808],{"class":336},"?:",[326,810,811],{"class":332}," string\n",[326,813,814],{"class":328,"line":467},[326,815,777],{"class":480},[326,817,818],{"class":328,"line":477},[326,819,820],{"class":480},"   * Button variant\n",[326,822,823,825,827,830],{"class":328,"line":484},[326,824,787],{"class":480},[326,826,606],{"class":605},[326,828,829],{"class":609},"enumLabels",[326,831,832],{"class":480}," {\"large\": \"Extra Large (XL)\"}\n",[326,834,835],{"class":328,"line":518},[326,836,800],{"class":480},[326,838,839,842,844,846,849,851,854,856,859,861,863,865,868],{"class":328,"line":524},[326,840,841],{"class":350},"  variant",[326,843,808],{"class":336},[326,845,356],{"class":336},[326,847,848],{"class":359},"primary",[326,850,363],{"class":336},[326,852,853],{"class":336}," |",[326,855,356],{"class":336},[326,857,858],{"class":359},"secondary",[326,860,363],{"class":336},[326,862,853],{"class":336},[326,864,356],{"class":336},[326,866,867],{"class":359},"large",[326,869,870],{"class":336},"'\n",[326,872,874,877,880,882],{"class":328,"line":873},13,[326,875,876],{"class":336},"}>",[326,878,879],{"class":340},"()",[326,881,366],{"class":336},[326,883,464],{"class":336},[326,885,887,889,891,893,896,898],{"class":328,"line":886},14,[326,888,805],{"class":350},[326,890,337],{"class":336},[326,892,356],{"class":336},[326,894,895],{"class":359},"Click me",[326,897,363],{"class":336},[326,899,438],{"class":336},[326,901,903,905,907,909,911],{"class":328,"line":902},15,[326,904,841],{"class":350},[326,906,337],{"class":336},[326,908,356],{"class":336},[326,910,848],{"class":359},[326,912,870],{"class":336},[326,914,916,919],{"class":328,"line":915},16,[326,917,918],{"class":336},"}",[326,920,921],{"class":340},")\n",[326,923,925,927,929],{"class":328,"line":924},17,[326,926,647],{"class":336},[326,928,567],{"class":350},[326,930,587],{"class":336},[231,932,933,934,937],{},"The prop label is auto-generated from the first JSDoc line or prop name. Use ",[274,935,936],{},"@title"," to override.",[653,939,940,948],{},[656,941,942],{},[659,943,944,946],{},[662,945,664],{},[662,947,667],{},[669,949,950,959,969,982,992,1006,1019,1063,1073],{},[659,951,952,956],{},[674,953,954],{},[274,955,936],{},[674,957,958],{},"Explicit label override",[659,960,961,966],{},[674,962,963],{},[274,964,965],{},"@example",[674,967,968],{},"Adds example values (multiple allowed)",[659,970,971,976],{},[674,972,973],{},[274,974,975],{},"@enumLabels",[674,977,978,979],{},"Custom labels for enum values, e.g. ",[274,980,981],{},"{\"large\": \"Extra Large (XL)\"}",[659,983,984,989],{},[674,985,986],{},[274,987,988],{},"@contentMediaType text\u002Fhtml",[674,990,991],{},"Enables rich text editing in Canvas for string props",[659,993,994,999],{},[674,995,996],{},[274,997,998],{},"@formattingContext block|inline",[674,1000,1001,1002,1005],{},"Controls formatting context (default: ",[274,1003,1004],{},"block",")",[659,1007,1008,1013],{},[674,1009,1010],{},[274,1011,1012],{},"@schemaRef",[674,1014,1015,1016,1005],{},"Reference Canvas JSON schema definitions (e.g. ",[274,1017,1018],{},"canvas\u002Fstream-wrapper-uri",[659,1020,1021,1026],{},[674,1022,1023],{},[274,1024,1025],{},"@format",[674,1027,1028,1029,712,1032,712,1035,712,1038,712,1041,712,1044,712,1047,712,1050,712,1053,712,1056,712,1059,1062],{},"JSON Schema format for semantic validation and UI widgets: ",[274,1030,1031],{},"date",[274,1033,1034],{},"date-time",[274,1036,1037],{},"time",[274,1039,1040],{},"duration",[274,1042,1043],{},"email",[274,1045,1046],{},"hostname",[274,1048,1049],{},"ipv4",[274,1051,1052],{},"ipv6",[274,1054,1055],{},"uuid",[274,1057,1058],{},"uri",[274,1060,1061],{},"uri-reference",", etc.",[659,1064,1065,1070],{},[674,1066,1067],{},[274,1068,1069],{},"@pattern",[674,1071,1072],{},"JSON Schema regex pattern for string validation",[659,1074,1075,1080],{},[674,1076,1077],{},[274,1078,1079],{},"@allowed-schemes",[674,1081,1082,1083,258,1086,1005],{},"Allowed URI schemes for Canvas field type detection (e.g. ",[274,1084,1085],{},"public",[274,1087,1088],{},"http, https",[266,1090,1092],{"id":1091},"drupal-canvas-types","Drupal Canvas Types",[231,1094,1095,1096,1098],{},"For ",[235,1097,70],{"href":71}," integration, special TypeScript types are available that generate JSON schemas enabling Canvas UI features like media library selection. These types are auto-imported by Nuxt.",[653,1100,1101,1110],{},[656,1102,1103],{},[659,1104,1105,1108],{},[662,1106,1107],{},"Type",[662,1109,667],{},[669,1111,1112,1122],{},[659,1113,1114,1119],{},[674,1115,1116],{},[274,1117,1118],{},"CanvasImage",[674,1120,1121],{},"Image with media library integration (src, alt, width, height)",[659,1123,1124,1129],{},[674,1125,1126],{},[274,1127,1128],{},"CanvasVideo",[674,1130,1131],{},"Video with poster support",[231,1133,1134],{},"Example usage:",[317,1136,1138],{"className":555,"code":1137,"language":557,"meta":322,"style":322},"\u003Cscript setup lang=\"ts\">\n\u002F**\n * Hero Banner\n *\u002F\ndefineProps\u003C{\n  \u002F**\n   * Background image\n   * @example src=https:\u002F\u002Fexample.com\u002Fhero.jpg alt=\"Hero\" width=1200 height=600\n   *\u002F\n  image: CanvasImage\n}>()\n\u003C\u002Fscript>\n",[274,1139,1140,1160,1164,1169,1173,1179,1183,1188,1199,1203,1213,1220],{"__ignoreMap":322},[326,1141,1142,1144,1146,1148,1150,1152,1154,1156,1158],{"class":328,"line":329},[326,1143,564],{"class":336},[326,1145,567],{"class":350},[326,1147,571],{"class":570},[326,1149,574],{"class":570},[326,1151,577],{"class":336},[326,1153,580],{"class":336},[326,1155,321],{"class":359},[326,1157,580],{"class":336},[326,1159,587],{"class":336},[326,1161,1162],{"class":328,"line":344},[326,1163,592],{"class":480},[326,1165,1166],{"class":328,"line":401},[326,1167,1168],{"class":480}," * Hero Banner\n",[326,1170,1171],{"class":328,"line":427},[326,1172,642],{"class":480},[326,1174,1175,1177],{"class":328,"line":441},[326,1176,769],{"class":762},[326,1178,772],{"class":336},[326,1180,1181],{"class":328,"line":449},[326,1182,777],{"class":480},[326,1184,1185],{"class":328,"line":456},[326,1186,1187],{"class":480},"   * Background image\n",[326,1189,1190,1192,1194,1196],{"class":328,"line":467},[326,1191,787],{"class":480},[326,1193,606],{"class":605},[326,1195,792],{"class":609},[326,1197,1198],{"class":480}," src=https:\u002F\u002Fexample.com\u002Fhero.jpg alt=\"Hero\" width=1200 height=600\n",[326,1200,1201],{"class":328,"line":477},[326,1202,800],{"class":480},[326,1204,1205,1208,1210],{"class":328,"line":484},[326,1206,1207],{"class":350},"  image",[326,1209,337],{"class":336},[326,1211,1212],{"class":332}," CanvasImage\n",[326,1214,1215,1217],{"class":328,"line":518},[326,1216,876],{"class":336},[326,1218,1219],{"class":340},"()\n",[326,1221,1222,1224,1226],{"class":328,"line":524},[326,1223,647],{"class":336},[326,1225,567],{"class":350},[326,1227,587],{"class":336},[231,1229,1230,1231,1233],{},"The ",[274,1232,965],{}," for Canvas types supports two formats:",[1235,1236,1237,1244],"ul",{},[1238,1239,1240,1241],"li",{},"Key-value: ",[274,1242,1243],{},"src=https:\u002F\u002F... alt=\"text\" width=800 height=600",[1238,1245,1246,1247],{},"JS object: ",[274,1248,1249],{},"{ src: 'https:\u002F\u002F...', alt: 'text', width: 800 }",[305,1251,1253],{"id":1252},"schema-references","Schema References",[231,1255,1256,1257,1259,1260,1263,1264,1267,1268,1271],{},"For advanced use cases, ",[274,1258,1012],{}," allows referencing Canvas JSON schema definitions directly, useful for types like ",[274,1261,1262],{},"stream-wrapper-uri"," and ",[274,1265,1266],{},"stream-wrapper-image-uri",". Use the shorthand ",[274,1269,1270],{},"prefix\u002Fname"," notation:",[317,1273,1275],{"className":555,"code":1274,"language":557,"meta":322,"style":322},"\u002F**\n * @schemaRef canvas\u002Fstream-wrapper-uri\n *\u002F\nimageUri?: string\n",[274,1276,1277,1281,1286,1290],{"__ignoreMap":322},[326,1278,1279],{"class":328,"line":329},[326,1280,592],{"class":340},[326,1282,1283],{"class":328,"line":344},[326,1284,1285],{"class":340}," * @schemaRef canvas\u002Fstream-wrapper-uri\n",[326,1287,1288],{"class":328,"line":401},[326,1289,642],{"class":340},[326,1291,1292],{"class":328,"line":427},[326,1293,1294],{"class":340},"imageUri?: string\n",[231,1296,1297,1298,303],{},"This expands to ",[274,1299,1300],{},"json-schema-definitions:\u002F\u002Fcanvas.module\u002Fstream-wrapper-uri",[266,1302,1304],{"id":1303},"manual-setup","Manual Setup",[231,1306,1307],{},"If you are not using the Nuxt Starter or nuxtjs-drupal-ce, install and configure the module manually.",[231,1309,1310],{},"Install the module:",[317,1312,1316],{"className":1313,"code":1314,"language":1315,"meta":322,"style":322},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install nuxt-component-preview\n","bash",[274,1317,1318],{"__ignoreMap":322},[326,1319,1320,1323,1326],{"class":328,"line":329},[326,1321,1322],{"class":332},"npm",[326,1324,1325],{"class":359}," install",[326,1327,1328],{"class":359}," nuxt-component-preview\n",[231,1330,1331,1332,1334,1335,1338,1339,337],{},"Add it to ",[274,1333,302],{}," and add ",[274,1336,1337],{},"\u003CComponentPreviewArea \u002F>"," to ",[274,1340,1341],{},"app.vue",[317,1343,1345],{"className":319,"code":1344,"language":321,"meta":322,"style":322},"export default defineNuxtConfig({\n  modules: ['nuxt-component-preview'],\n})\n",[274,1346,1347,1363,1383],{"__ignoreMap":322},[326,1348,1349,1352,1355,1358,1360],{"class":328,"line":329},[326,1350,1351],{"class":605},"export",[326,1353,1354],{"class":605}," default",[326,1356,1357],{"class":762}," defineNuxtConfig",[326,1359,766],{"class":340},[326,1361,1362],{"class":336},"{\n",[326,1364,1365,1368,1370,1373,1375,1377,1379,1381],{"class":328,"line":344},[326,1366,1367],{"class":350},"  modules",[326,1369,337],{"class":336},[326,1371,1372],{"class":340}," [",[326,1374,363],{"class":336},[326,1376,245],{"class":359},[326,1378,363],{"class":336},[326,1380,444],{"class":340},[326,1382,438],{"class":336},[326,1384,1385,1387],{"class":328,"line":401},[326,1386,918],{"class":336},[326,1388,921],{"class":340},[317,1390,1392],{"className":555,"code":1391,"language":557,"meta":322,"style":322},"\u003Ctemplate>\n  \u003CComponentPreviewArea v-if=\"useRuntimeConfig().public.componentPreview\" \u002F>\n  \u003CNuxtPage v-else \u002F>\n\u003C\u002Ftemplate>\n",[274,1393,1394,1403,1426,1438],{"__ignoreMap":322},[326,1395,1396,1398,1401],{"class":328,"line":329},[326,1397,564],{"class":336},[326,1399,1400],{"class":350},"template",[326,1402,587],{"class":336},[326,1404,1405,1408,1411,1414,1416,1418,1421,1423],{"class":328,"line":344},[326,1406,1407],{"class":336},"  \u003C",[326,1409,1410],{"class":350},"ComponentPreviewArea",[326,1412,1413],{"class":570}," v-if",[326,1415,577],{"class":336},[326,1417,580],{"class":336},[326,1419,1420],{"class":359},"useRuntimeConfig().public.componentPreview",[326,1422,580],{"class":336},[326,1424,1425],{"class":336}," \u002F>\n",[326,1427,1428,1430,1433,1436],{"class":328,"line":401},[326,1429,1407],{"class":336},[326,1431,1432],{"class":350},"NuxtPage",[326,1434,1435],{"class":570}," v-else",[326,1437,1425],{"class":336},[326,1439,1440,1442,1444],{"class":328,"line":427},[326,1441,647],{"class":336},[326,1443,1400],{"class":350},[326,1445,587],{"class":336},[231,1447,1448],{},"When embedding previews from a different domain (e.g. a Drupal backend), disable the app manifest in development to avoid relative URL failures:",[317,1450,1452],{"className":319,"code":1451,"language":321,"meta":322,"style":322},"$development: {\n  experimental: {\n    appManifest: false\n  }\n}\n",[274,1453,1454,1463,1472,1482,1487],{"__ignoreMap":322},[326,1455,1456,1459,1461],{"class":328,"line":329},[326,1457,1458],{"class":332},"$development",[326,1460,337],{"class":336},[326,1462,464],{"class":336},[326,1464,1465,1468,1470],{"class":328,"line":344},[326,1466,1467],{"class":332},"  experimental",[326,1469,337],{"class":336},[326,1471,464],{"class":336},[326,1473,1474,1477,1479],{"class":328,"line":401},[326,1475,1476],{"class":332},"    appManifest",[326,1478,337],{"class":336},[326,1480,1481],{"class":374}," false\n",[326,1483,1484],{"class":328,"line":427},[326,1485,1486],{"class":336},"  }\n",[326,1488,1489],{"class":328,"line":441},[326,1490,1491],{"class":336},"}\n",[231,1493,1494,1495,1500],{},"For CORS configuration, see the ",[235,1496,1499],{"href":1497,"rel":1498},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview#cors-configuration",[244],"nuxt-component-preview CORS setup",". When using nuxtjs-drupal-ce, CORS is configured automatically.",[1502,1503,1504],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .s6hCs, html code.shiki .s6hCs{--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#C792EA;--shiki-default-font-style:italic;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":322,"searchDepth":344,"depth":344,"links":1506},[1507,1510,1514,1517],{"id":268,"depth":344,"text":269,"children":1508},[1509],{"id":307,"depth":401,"text":308},{"id":538,"depth":344,"text":539,"children":1511},[1512,1513],{"id":545,"depth":401,"text":546},{"id":728,"depth":401,"text":729},{"id":1091,"depth":344,"text":1092,"children":1515},[1516],{"id":1252,"depth":401,"text":1253},{"id":1303,"depth":344,"text":1304},"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,{},{"title":192,"description":1518},"_M5EG4Yc1TUY6XqneuwtWsbqLiPQ6Yh6nHZqHFHhJZ8",[1525,1527],{"title":188,"path":189,"stem":190,"description":1526,"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":1528,"children":-1},"With Nuxt you can decide what rendering strategy you want to use, if you like even at the route level.",1776084720457]