[{"data":1,"prerenderedAt":537},["ShallowReactive",2],{"sanity-LevEgKvCUg3Ul3GKyhTsfZIfaGswLQ-qsmdjo9-lWe4":3,"sanity-kDbcbd3Tt7Z9wSldv3KPvbIPLrCYErBGAWvOWWMx2X4":84,"shiki-block-v-0-0-0-0-0-2-0-0":533,"shiki-block-v-0-0-0-0-0-2-0-2":534,"shiki-block-v-0-0-0-0-0-4-0-0":535,"shiki-block-v-0-0-0-0-0-2-0-1":536},{"data":4},{"_createdAt":5,"_id":6,"_rev":7,"_system":8,"_type":6,"_updatedAt":11,"acceptAllLink":12,"acceptNecessaryLink":40,"bannerColorSource":50,"bannerDescription":51,"bannerTitle":52,"categories":53,"declineAllLink":54,"managePreferencesLink":63,"modalColorSource":50,"modalTitle":72,"preferencesIconColorSource":50,"provider":73,"savePreferencesLink":74,"thirdPartyEmbedCode":53,"title":83},"2026-07-28T12:06:44Z","cookieSettings","ci4zAxlS92c5lxcUZgKERY",{"base":9},{"id":6,"rev":10},"4areb77bueJ0iGsV9TVGmy","2026-09-03T17:08:03Z",{"_type":13,"newTab":14,"style":15,"title":38,"type":39},"link",false,{"_type":16,"design":17,"icon":30,"iconPosition":34,"stylePreset":35},"link.style",{"_type":18,"colorSource":19,"gradient":20,"hover":25,"shape":29,"style":29},"link.style.design","manual",{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},"gradient","to-r","linear","at-center",{"_type":26,"colorSource":27,"gradient":28},"link.style.hover","none",{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},"default",{"_type":31,"name":32,"type":33},"icon.config","pi-compass","noicon","start",{"_ref":36,"_type":37},"0a45d6ae-0177-47f2-ab3e-2dd19191fca6","reference","Accept all","button",{"_type":13,"newTab":14,"style":41,"title":49,"type":39},{"_type":16,"design":42,"icon":46,"iconPosition":34,"stylePreset":47},{"_type":18,"colorSource":19,"gradient":43,"hover":44,"shape":29,"style":29},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":26,"colorSource":27,"gradient":45},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":31,"name":32,"type":33},{"_ref":48,"_type":37},"1b28bc78-22fc-4f39-ab55-441e2a601f6e","Accept necessary","inherit","We use cookies to enhance your browsing experience and analyse our traffic. Please choose your cookie preferences below.","We use cookies",null,{"_type":13,"newTab":14,"style":55,"title":62,"type":39},{"_type":16,"design":56,"icon":60,"iconPosition":34,"stylePreset":61},{"_type":18,"colorSource":19,"gradient":57,"hover":58,"shape":29,"style":29},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":26,"colorSource":27,"gradient":59},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":31,"name":32,"type":33},{"_ref":48,"_type":37},"Decline all",{"_type":13,"newTab":14,"style":64,"title":71,"type":39},{"_type":16,"design":65,"icon":69,"iconPosition":34,"stylePreset":70},{"_type":18,"colorSource":19,"gradient":66,"hover":67,"shape":29,"style":29},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":26,"colorSource":27,"gradient":68},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":31,"name":32,"type":33},{"_ref":48,"_type":37},"Manage preferences","Cookie Preferences","custom",{"_type":13,"newTab":14,"style":75,"title":82,"type":39},{"_type":16,"design":76,"icon":80,"iconPosition":34,"stylePreset":81},{"_type":18,"colorSource":19,"gradient":77,"hover":78,"shape":29,"style":29},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":26,"colorSource":27,"gradient":79},{"_type":21,"colorSource":19,"direction":22,"gradientType":23,"radialPosition":24},{"_type":31,"name":32,"type":33},{"_ref":36,"_type":37},"Save preferences","Cookie Settings",{"data":85,"sourceMap":-1},{"_createdAt":86,"_id":87,"_rev":88,"_system":89,"_type":92,"_updatedAt":93,"components":94,"fontOptions":457,"footer":53,"intro":459,"isPublished":460,"layout":461,"navigation":53,"path":462,"routeOptions":463,"seo":468,"showFooter":460,"showNav":460,"sidebar":474,"slug":467,"title":501},"2026-08-13T15:28:54Z","afcfec8e-fad2-4ed3-88dc-6506a8c82df6","WiyFCZBpfk3HgBB1SD7AF2",{"base":90},{"id":87,"rev":91},"WiyFCZBpfk3HgBB1SD77Qy","page","2026-08-17T21:12:24Z",[95,156,245,314,361,392],{"_key":96,"_type":97,"alignment":98,"content":99,"options":150,"width":155},"56717ab0bc11","text-block","mx-auto",[100,111,119,135],{"_key":101,"_type":102,"children":103,"markDefs":109,"style":110},"e7e8568affe6","block",[104],{"_key":105,"_type":106,"marks":107,"text":108},"bb6a8c6ab9f6","span",[],"The idea",[],"h2",{"_key":112,"_type":102,"children":113,"markDefs":117,"style":118},"6cc0c946e857",[114],{"_key":105,"_type":106,"marks":115,"text":116},[],"Most CMS integrations model a page as a document with fields: a hero image, headline, three feature slots. That buys you a fast first page and an unmaintainable twentieth, because every new layout is a new document type and every layout tweak is a deploy.",[],"normal",{"_key":120,"_type":102,"children":121,"markDefs":134,"style":118},"91bf5810afda",[122,125,130],{"_key":105,"_type":106,"marks":123,"text":124},[],"Nuxion models a page as an ordered array of blocks. A renderer walks the array, checks each block's ",{"_key":126,"_type":106,"marks":127,"text":129},"f62fc25a60ab",[128],"code","_type",{"_key":131,"_type":106,"marks":132,"text":133},"390b6460436f",[],"  value in a registry, and mounts the matching component. Editors compose; the system supplies the layout primitives. Reordering a page is content editing.",[],{"_key":136,"_type":102,"children":137,"markDefs":149,"style":118},"0bbb0c497bc1",[138,141,145],{"_key":105,"_type":106,"marks":139,"text":140},[],"Blocks are imported with ",{"_key":142,"_type":106,"marks":143,"text":144},"da81513020ab",[128],"defineAsyncComponent",{"_key":146,"_type":106,"marks":147,"text":148},"69aaa363514a",[],", so a page with four blocks ships four blocks of JavaScript — not the whole library.",[],{"_type":151,"colorSource":50,"container":152,"hideSection":14,"mediaOpacity":153,"slideEffect":154,"sticky":14},"section.options","contained",0,"fade","max-w-5xl",{"_key":157,"_type":158,"accentSource":50,"heading":159,"options":160,"steps":161},"4ce75007595c","docs.steps","Adding a block",{"_type":151,"colorSource":50,"container":152,"hideSection":14,"mediaOpacity":153,"slideEffect":154,"sticky":14},[162,185,218],{"_key":163,"_type":164,"content":165,"title":184},"04be45c9e6f3","docs.step",[166,178],{"_key":167,"_type":102,"children":168,"markDefs":177,"style":118},"e7fe94b42619",[169,173],{"_key":170,"_type":106,"marks":171,"text":172},"c2f62ddd5d19",[128],"studio\u002Fschemas\u002Fweb\u002Fcustom\u002Fcustom.hero.ts",{"_key":174,"_type":106,"marks":175,"text":176},"02a07f4be992",[]," — the fields an editor sees, plus the shared section options every block includes, so layout controls stay consistent.",[],{"_key":179,"_type":180,"colorSource":50,"snippet":181},"676a450e3681","code.block",{"_type":128,"code":182,"language":183},"defineField({\n    name: 'heading',\n    title: 'Heading',\n    type: 'string',\n    validation: (rule) => rule.required(),\n    group: 'general',\n}),","typescript","A Sanity schema",{"_key":186,"_type":164,"content":187,"title":217},"6781c84ca0dd",[188,204,209],{"_key":189,"_type":102,"children":190,"markDefs":203,"style":118},"21e043786ce3",[191,195,199],{"_key":192,"_type":106,"marks":193,"text":194},"ffbfdeea6497",[],"`",{"_key":196,"_type":106,"marks":197,"text":198},"185585f8494f",[128],"app\u002Fcomponents\u002Fcustom\u002FCustomHero.vue",{"_key":200,"_type":106,"marks":201,"text":202},"4d9fd979ca86",[],"` — props are typed from the generated Sanity types, so the schema and the component cannot drift.",[],{"_key":205,"_type":180,"colorSource":50,"snippet":206},"17a00b40216e",{"_type":128,"code":207,"language":208},"\u003Cscript setup lang=\"ts\">\nimport type { CustomHero, ComponentProps } from '~~\u002Ftypes'\n\ninterface Props extends ComponentProps\u003CCustomHero> {}\nconst props = defineProps\u003CProps>()\n\u003C\u002Fscript>","vue",{"_key":210,"_type":102,"children":211,"markDefs":216,"style":118},"23d163c2e3a6",[212],{"_key":213,"_type":106,"marks":214,"text":215},"bbbcbb44aaa7",[],"",[],"A Vue component",{"_key":219,"_type":164,"content":220,"title":244},"2530279e6175",[221,240],{"_key":222,"_type":102,"children":223,"markDefs":239,"style":118},"62802023d2e3",[224,228,232,235],{"_key":225,"_type":106,"marks":226,"text":227},"7852df17223c",[128],"app\u002Fcomponents\u002Fcustom\u002Findex.ts",{"_key":229,"_type":106,"marks":230,"text":231},"9718d6315c18",[]," — The key is the Sanity ",{"_key":233,"_type":106,"marks":234,"text":129},"358b5a419941",[128],{"_key":236,"_type":106,"marks":237,"text":238},"ac541a8972db",[],", exactly.",[],{"_key":241,"_type":180,"colorSource":50,"snippet":242},"da84719e4faf",{"_type":128,"code":243,"language":183},"'custom.hero': {\n    element: defineAsyncComponent(() => import('.\u002FCustomHero.vue')),\n    props: { ...data },\n},","One line of registration",{"_key":246,"_type":97,"alignment":98,"content":247,"options":310,"width":155},"bfeb983b68cb",[248,256],{"_key":249,"_type":102,"children":250,"markDefs":255,"style":110},"c3ad532207c3",[251],{"_key":252,"_type":106,"marks":253,"text":254},"bbd44ef1e735",[],"Naming",[],{"_key":257,"_type":102,"children":258,"markDefs":309,"style":118},"893919843164",[259,263,267,271,275,278,282,286,290,293,297,301,305],{"_key":260,"_type":106,"marks":261,"text":262},"15fad6f3217d",[],"One convention, applied everywhere: ",{"_key":264,"_type":106,"marks":265,"text":266},"0fead83fdc16",[128],"nuxion.hero",{"_key":268,"_type":106,"marks":269,"text":270},"e1cbe8913b9f",[]," → ",{"_key":272,"_type":106,"marks":273,"text":274},"ef3ad1d794a0",[128],"NuxionHero.vue",{"_key":276,"_type":106,"marks":277,"text":270},"6afe79438c2d",[],{"_key":279,"_type":106,"marks":280,"text":281},"5f4fd1e95bfe",[128],"nuxion.hero.ts",{"_key":283,"_type":106,"marks":284,"text":285},"9b3b7c489d6c",[],". Every dot- or hyphen-separated segment is capitalised and joined, so ",{"_key":287,"_type":106,"marks":288,"text":289},"d9bc7e444f79",[128],"custom.logo-strip",{"_key":291,"_type":106,"marks":292,"text":270},"e86a47a49d39",[],{"_key":294,"_type":106,"marks":295,"text":296},"9ebef35c2085",[128],"CustomLogoStrip.vue",{"_key":298,"_type":106,"marks":299,"text":300},"409b0273672e",[],". The namespace is yours to pick; ",{"_key":302,"_type":106,"marks":303,"text":304},"02271c0d810e",[128],"custom.",{"_key":306,"_type":106,"marks":307,"text":308},"3f068c1e7ed5",[]," is a suggestion, not a rule — and it's the same rule Sanity's TypeGen uses, so the generated TypeScript type matches too. Once you know a block's Sanity type, you know both filenames without looking.\n",[],{"_type":151,"colorSource":50,"container":152,"hideSection":14,"mediaOpacity":153,"padding":311,"slideEffect":154,"sticky":14,"tocLabel":254},{"_type":312,"bottom":313,"top":313},"padding.options",30,{"_key":315,"_type":97,"alignment":98,"content":316,"options":360,"width":155},"cec08a925d17",[317,325,332,337],{"_key":318,"_type":102,"children":319,"markDefs":324,"style":110},"b7385349d49c",[320],{"_key":321,"_type":106,"marks":322,"text":323},"76007dcdba84",[],"The scaffolder",[],{"_key":326,"_type":102,"children":327,"markDefs":331,"style":118},"6de286d5f200",[328],{"_key":321,"_type":106,"marks":329,"text":330},[],"You rarely write those three files by hand.",[],{"_key":333,"_type":180,"colorSource":50,"markDefs":53,"snippet":334},"6eae4e7cc972",{"_type":128,"code":335,"language":336},"npm run scaffold:component -- custom.pricing-table","bash",{"_key":338,"_type":102,"children":339,"markDefs":359,"style":118},"371087022d06",[340,343,347,351,355],{"_key":321,"_type":106,"marks":341,"text":342},[],"That generates the schema, the component, and every registration, then regenerates the TypeScript types. ",{"_key":344,"_type":106,"marks":345,"text":346},"7550055c0295",[128],"--kind navigation",{"_key":348,"_type":106,"marks":349,"text":350},"748e3fad4ab6",[]," and ",{"_key":352,"_type":106,"marks":353,"text":354},"29b805a4ba6e",[128],"--kind footer",{"_key":356,"_type":106,"marks":357,"text":358},"c85ac6107cc1",[]," produce navigation bars and footer blocks instead, wired into the right slots — those used to be hand-threaded across three files.",[],{"_type":151,"colorSource":50,"container":152,"hideSection":14,"mediaOpacity":153,"slideEffect":154,"sticky":14},{"_key":362,"_type":363,"content":364,"options":389,"title":390,"tone":391},"9f4dab3ddbad","docs.callout",[365],{"_key":366,"_type":102,"children":367,"markDefs":388,"style":118},"673118c26f19",[368,372,376,380,384],{"_key":369,"_type":106,"marks":370,"text":371},"9835c2bdc8e0",[],"The component registry is closed with a ",{"_key":373,"_type":106,"marks":374,"text":375},"de67b380a835",[128],"satisfies",{"_key":377,"_type":106,"marks":378,"text":379},"d6692309fc4a",[]," clause against a union generated from your Sanity schemas. Rename a schema and forget the registry, and ",{"_key":381,"_type":106,"marks":382,"text":383},"bdea16bca7a9",[128],"typecheck",{"_key":385,"_type":106,"marks":386,"text":387},"28922583d314",[]," fails in CI. Not in production, not in a client email — in CI.",[],{"_type":151,"colorSource":50,"container":152,"hideSection":14,"mediaOpacity":153,"slideEffect":154,"sticky":14},"The registry is type-checked","important",{"_key":393,"_type":97,"alignment":98,"content":394,"options":453,"width":155},"34d115a30410",[395,403,410,424,435,446],{"_key":396,"_type":102,"children":397,"markDefs":402,"style":110},"fd5faa31ad85",[398],{"_key":399,"_type":106,"marks":400,"text":401},"bec191087cce",[],"Who owns width",[],{"_key":404,"_type":102,"children":405,"markDefs":409,"style":118},"397334801c6f",[406],{"_key":399,"_type":106,"marks":407,"text":408},[],"Blocks provide vertical rhythm and content. Horizontal width and gutter belong to the section wrapper, which offers three named intents rather than a padding input:",[],{"_key":411,"_type":102,"children":412,"level":421,"listItem":422,"markDefs":423,"style":118},"53149b91d7ba",[413,417],{"_key":399,"_type":106,"marks":414,"text":416},[415],"strong","Contained",{"_key":418,"_type":106,"marks":419,"text":420},"48d30f947c9c",[]," — a max width with a gutter. The default.",1,"bullet",[],{"_key":425,"_type":102,"children":426,"level":421,"listItem":422,"markDefs":434,"style":118},"d289b93c3d86",[427,430],{"_key":399,"_type":106,"marks":428,"text":429},[415],"Full",{"_key":431,"_type":106,"marks":432,"text":433},"3fee0efdcbfa",[]," — full-width band, content still inset.",[],{"_key":436,"_type":102,"children":437,"level":421,"listItem":422,"markDefs":445,"style":118},"de05d8fd634d",[438,441],{"_key":399,"_type":106,"marks":439,"text":440},[415],"Bleed",{"_key":442,"_type":106,"marks":443,"text":444},"19cd66c82341",[]," — edge-to-edge, for media, carousels and maps.",[],{"_key":447,"_type":102,"children":448,"markDefs":452,"style":118},"f16120fcbcc0",[449],{"_key":399,"_type":106,"marks":450,"text":451},[],"\nThree named choices, not a padding input. It is why blocks from differentsources line up on the left edge without anyone coordinating.",[],{"_type":151,"colorSource":50,"container":152,"hideSection":14,"mediaOpacity":153,"padding":454,"slideEffect":154,"sticky":14,"tocLabel":456},{"_type":312,"top":455},40,"Layout ownership",{"_type":458,"bodyFont":215,"primaryFont":215},"font.options","How a Sanity type becomes a Vue component, and why adding one requires three files.",true,"documentation","\u002Fdocs\u002Fpage-builder",{"_type":464,"includeInSitemap":460,"slug":465},"page.routing.options",{"_type":466,"current":467},"slug","docs\u002Fpage-builder",{"_type":469,"favicon":470,"image":53,"schema":471,"socialImages":473},"seo",{"mimeType":53,"url":53},{"organizationType":472},"Organization",{"facebook":53,"linkedin":53,"twitter":53},{"_id":475,"_type":476,"groups":477,"title":532},"59fde457-2b98-4571-9d63-57f3f505f4c4","docs.navigation",[478,497,518],{"_key":479,"items":480,"title":496},"b1d02b598607",[481,486,491],{"_id":482,"_type":92,"slug":483,"title":484,"url":485},"c6fe71b8-698e-4891-bc01-13bff89ed46c","docs","Introduction","\u002Fdocs",{"_id":487,"_type":92,"slug":488,"title":489,"url":490},"9e45c218-c8d2-405d-be9a-4d07deb63510","docs\u002Fquick-start","Quick start","\u002Fdocs\u002Fquick-start",{"_id":492,"_type":92,"slug":493,"title":494,"url":495},"be1523b9-037b-438f-8753-f8149456ed44","docs\u002Fproject-structure","Project structure","\u002Fdocs\u002Fproject-structure","Get started",{"_key":498,"items":499,"title":517},"1fb624003506",[500,502,507,512],{"_id":87,"_type":92,"slug":467,"title":501,"url":462},"The page builder",{"_id":503,"_type":92,"slug":504,"title":505,"url":506},"d09e9c43-5d71-4fb4-bf42-2682568d5b0a","docs\u002Fblock-library","Block library","\u002Fdocs\u002Fblock-library",{"_id":508,"_type":92,"slug":509,"title":510,"url":511},"c518286f-0bc6-465e-b498-53e65bdc0548","theming-and-fonts","Theming & fonts","\u002Ftheming-and-fonts",{"_id":513,"_type":92,"slug":514,"title":515,"url":516},"8a285811-c9d0-4f3a-94a8-be92f25d0311","docs\u002Fforms","Forms","\u002Fdocs\u002Fforms","Building pages",{"_key":519,"items":520,"title":531},"c7a7dc892511",[521,526],{"_id":522,"_type":92,"slug":523,"title":524,"url":525},"eb75dbb1-d328-44cf-a075-52a8d0d884ba","docs\u002Fdeployment","Deployment","\u002Fdocs\u002Fdeployment",{"_id":527,"_type":92,"slug":528,"title":529,"url":530},"d1bc093a-f8b7-4dc8-aac8-5f92fffcf2c3","docs\u002Fseo-and-redirects","SEO & Redirects","\u002Fdocs\u002Fseo-and-redirects","Deploying","Documentation sidebar","\u003Cpre class=\"shiki shiki-themes github-light github-dark nuxion-code__pre\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">defineField\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    name: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'heading'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    title: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Heading'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    type: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'string'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    validation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">rule\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> rule.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">required\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    group: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'general'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}),\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark nuxion-code__pre\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'custom.hero'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    element: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">defineAsyncComponent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'.\u002FCustomHero.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    props: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">data },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">},\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark nuxion-code__pre\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> scaffold:component\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> --\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> custom.pricing-table\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark nuxion-code__pre\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { CustomHero, ComponentProps } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '~~\u002Ftypes'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> extends\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ComponentProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">CustomHero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789667180660]