[{"data":1,"prerenderedAt":1987},["ShallowReactive",2],{"navigation_docs":3,"-content":49,"-content-surround":1982},[4,9,14,19,24,29,34,39,44],{"title":5,"path":6,"stem":7,"icon":8},"Introduction","\u002Fintroduction","1.introduction","i-lucide-monitor",{"title":10,"path":11,"stem":12,"icon":13},"Setup","\u002Fsetup","2.setup","i-lucide-play",{"title":15,"path":16,"stem":17,"icon":18},"Git Providers","\u002Fgit-providers","3.git-providers","i-lucide-git-branch",{"title":20,"path":21,"stem":22,"icon":23},"Auth Providers","\u002Fauth-providers","4.auth-providers","i-lucide-shield-check",{"title":25,"path":26,"stem":27,"icon":28},"Content Editors","\u002Fcontent","5.content","i-lucide-pen-tool",{"title":30,"path":31,"stem":32,"icon":33},"Media Library","\u002Fmedias","6.medias","i-lucide-image",{"title":35,"path":36,"stem":37,"icon":38},"AI Features","\u002Fai","7.ai","i-lucide-sparkles",{"title":40,"path":41,"stem":42,"icon":43},"Roadmap","\u002Froadmap","8.roadmap","i-lucide-map",{"title":45,"path":46,"stem":47,"icon":48},"Advanced","\u002Fadvanced","9.advanced","i-lucide-settings",{"id":50,"title":51,"body":52,"description":1973,"extension":1974,"links":1975,"meta":1976,"navigation":1977,"path":26,"seo":1978,"stem":27,"__hash__":1981},"docs\u002F5.content.md","Edit your content",{"type":53,"value":54,"toc":1957},"minimark",[55,59,96,104,109,116,130,133,140,156,162,167,256,260,263,266,269,1016,1028,1032,1039,1055,1058,1068,1072,1075,1093,1102,1113,1116,1123,1629,1635,1638,1682,1686,1692,1695,1699,1870,1874,1881,1892,1909,1915,1924,1934,1938,1941,1953],[56,57,58],"p",{},"Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between our different editors:",[60,61,62,76,89],"ul",{},[63,64,65,70,71,75],"li",{},[66,67,69],"a",{"href":68},"#notion-like-editor-markdown-files","Notion-like editor"," for ",[72,73,74],"code",{},"Markdown"," files",[63,77,78,70,82,85,86,75],{},[66,79,81],{"href":80},"#form-editor","Form editor",[72,83,84],{},"YAML"," and ",[72,87,88],{},"JSON",[63,90,91,95],{},[66,92,94],{"href":93},"#code-editor","Code editor"," for any kind of files (for technical users only)",[56,97,98,99,103],{},"Each editor serves its own purpose. Some users prefer visual editing, while others prefer direct code manipulation. At the end, ",[100,101,102],"strong",{},"Markdown and MDC syntax is the final output"," for both editors, with seamless conversion between visual and code modes.",[105,106,108],"h2",{"id":107},"editor-mode-switching","Editor Mode Switching",[56,110,111,112,115],{},"You can switch between the visual editor and code editor at any time by clicking the ",[100,113,114],{},"actions dropdown"," in the file header (on the right of the breadcrumb):",[60,117,118,124],{},[63,119,120,123],{},[100,121,122],{},"Visual Mode"," - Notion-like editing experience for Markdown and Form editor for YAML\u002FJSON files.",[63,125,126,129],{},[100,127,128],{},"Code Mode"," (Monaco) - Direct Markdown\u002FMDC syntax editing",[56,131,132],{},"Your preference is saved and will be used for all files.",[105,134,136,137,139],{"id":135},"tiptap-visual-editor-markdown-files","TipTap Visual Editor (",[72,138,74],{}," files)",[56,141,142,143,149,150,155],{},"The TipTap visual editor provides a modern Notion-like editing experience for Markdown content, powered by the popular ",[66,144,148],{"href":145,"rel":146},"https:\u002F\u002Ftiptap.dev\u002F",[147],"nofollow","TipTap"," editor integrated by ",[66,151,154],{"href":152,"rel":153},"https:\u002F\u002Fui.nuxt.com\u002Fpro\u002Fcomponents\u002Feditor",[147],"Nuxt UI Editor",".",[157,158],"video",{":controls":159,":loop":159,"src":160,"poster":161},"true","https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1767647099\u002Fstudio\u002Fstudio-demo_eiofld.mp4","\u002Fvideo-thumbnail.jpg",[163,164,166],"h3",{"id":165},"key-features","Key Features",[60,168,169,175,181,187,198,204,210,223,232,238,244,250],{},[63,170,171,174],{},[100,172,173],{},"Rich Text Editing"," - Format text with headings, bold, italic, strikethrough, code, links, and more",[63,176,177,180],{},[100,178,179],{},"MDC Component Support"," - Insert and edit custom Vue components directly in the visual editor",[63,182,183,186],{},[100,184,185],{},"Vue Component Props Editor"," - Visually edit component properties through a form-based interface",[63,188,189,192,193],{},[100,190,191],{},"Data Binding"," - Bind component props to frontmatter variables using the ",[66,194,197],{"href":195,"rel":196},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#binding-data",[147],"MDC binding syntax",[63,199,200,203],{},[100,201,202],{},"Span-style Formatting"," - Apply inline text styles using the toolbar button for custom text formatting",[63,205,206,209],{},[100,207,208],{},"Media Integration"," - Browse in media picker to insert images from your library",[63,211,212,215,216,219,220],{},[100,213,214],{},"Emoji Integration"," - Type ",[72,217,218],{},":"," followed by an emoji name to insert emojis, or use the slash command ",[72,221,222],{},"\u002Femoji",[63,224,225,215,228,231],{},[100,226,227],{},"Slash Commands",[72,229,230],{},"\u002F"," to access a menu of formatting options and components",[63,233,234,237],{},[100,235,236],{},"Drag & Drop"," - Reorder content blocks by dragging them",[63,239,240,243],{},[100,241,242],{},"Link Editor"," - Floating popover for editing links with external link support",[63,245,246,249],{},[100,247,248],{},"Toolbar"," - Bubble toolbar appears when you select text, providing quick access to formatting options",[63,251,252,255],{},[100,253,254],{},"Real-time Conversion"," - Seamlessly converts between visual content and MDC\u002FMarkdown syntax",[163,257,259],{"id":258},"integrate-components","Integrate Components",[56,261,262],{},"One of the TipTap visual editor's standout features is its ability to integrate and edit custom Vue components directly within the editor interface.",[157,264],{":controls":159,":loop":159,"src":265,"poster":161,":muted":159},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1767981444\u002Fstudio\u002Fvidefinalfainalfinalvibecoding_tjuudu.mp4",[56,267,268],{},"Developers can create visually complex components, and editors can use them without technical knowledge. The visual editor handles component integration seamlessly.",[270,271,273,278,640,644,652,711,715,724,730,826,829,986,990,994],"steps",{"level":272},"4",[274,275,277],"h4",{"id":276},"create-your-component","Create your component",[279,280,286],"pre",{"className":281,"code":282,"filename":283,"language":284,"meta":285,"style":285},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"flex items-start gap-3\">\n    \u003Cdiv class=\"flex items-center justify-center border rounded-lg p-1.5\">\n      \u003CUIcon :name=\"icon\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"flex flex-col\">\n      \u003Ch3 class=\"font-semibold\">\n        \u003Cslot name=\"title\" \u002F>\n      \u003C\u002Fh3>\n      \u003Cspan>\n        \u003Cslot name=\"description\" \u002F>\n      \u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\ndefineProps({\n  icon: {\n    type: String,\n    default: 'i-lucide-cursor-click',\n  },\n})\n\u003C\u002Fscript>\n","components\u002Fcontent\u002FHomeFeature.vue","vue","",[72,287,288,304,331,352,376,386,406,426,449,459,468,488,497,506,516,526,533,558,572,583,597,616,622,631],{"__ignoreMap":285},[289,290,293,297,301],"span",{"class":291,"line":292},"line",1,[289,294,296],{"class":295},"sMK4o","\u003C",[289,298,300],{"class":299},"swJcz","template",[289,302,303],{"class":295},">\n",[289,305,307,310,313,317,320,323,327,329],{"class":291,"line":306},2,[289,308,309],{"class":295},"  \u003C",[289,311,312],{"class":299},"div",[289,314,316],{"class":315},"spNyl"," class",[289,318,319],{"class":295},"=",[289,321,322],{"class":295},"\"",[289,324,326],{"class":325},"sfazB","flex items-start gap-3",[289,328,322],{"class":295},[289,330,303],{"class":295},[289,332,334,337,339,341,343,345,348,350],{"class":291,"line":333},3,[289,335,336],{"class":295},"    \u003C",[289,338,312],{"class":299},[289,340,316],{"class":315},[289,342,319],{"class":295},[289,344,322],{"class":295},[289,346,347],{"class":325},"flex items-center justify-center border rounded-lg p-1.5",[289,349,322],{"class":295},[289,351,303],{"class":295},[289,353,355,358,361,364,366,368,371,373],{"class":291,"line":354},4,[289,356,357],{"class":295},"      \u003C",[289,359,360],{"class":299},"UIcon",[289,362,363],{"class":315}," :name",[289,365,319],{"class":295},[289,367,322],{"class":295},[289,369,370],{"class":325},"icon",[289,372,322],{"class":295},[289,374,375],{"class":295}," \u002F>\n",[289,377,379,382,384],{"class":291,"line":378},5,[289,380,381],{"class":295},"    \u003C\u002F",[289,383,312],{"class":299},[289,385,303],{"class":295},[289,387,389,391,393,395,397,399,402,404],{"class":291,"line":388},6,[289,390,336],{"class":295},[289,392,312],{"class":299},[289,394,316],{"class":315},[289,396,319],{"class":295},[289,398,322],{"class":295},[289,400,401],{"class":325},"flex flex-col",[289,403,322],{"class":295},[289,405,303],{"class":295},[289,407,409,411,413,415,417,419,422,424],{"class":291,"line":408},7,[289,410,357],{"class":295},[289,412,163],{"class":299},[289,414,316],{"class":315},[289,416,319],{"class":295},[289,418,322],{"class":295},[289,420,421],{"class":325},"font-semibold",[289,423,322],{"class":295},[289,425,303],{"class":295},[289,427,429,432,435,438,440,442,445,447],{"class":291,"line":428},8,[289,430,431],{"class":295},"        \u003C",[289,433,434],{"class":299},"slot",[289,436,437],{"class":315}," name",[289,439,319],{"class":295},[289,441,322],{"class":295},[289,443,444],{"class":325},"title",[289,446,322],{"class":295},[289,448,375],{"class":295},[289,450,452,455,457],{"class":291,"line":451},9,[289,453,454],{"class":295},"      \u003C\u002F",[289,456,163],{"class":299},[289,458,303],{"class":295},[289,460,462,464,466],{"class":291,"line":461},10,[289,463,357],{"class":295},[289,465,289],{"class":299},[289,467,303],{"class":295},[289,469,471,473,475,477,479,481,484,486],{"class":291,"line":470},11,[289,472,431],{"class":295},[289,474,434],{"class":299},[289,476,437],{"class":315},[289,478,319],{"class":295},[289,480,322],{"class":295},[289,482,483],{"class":325},"description",[289,485,322],{"class":295},[289,487,375],{"class":295},[289,489,491,493,495],{"class":291,"line":490},12,[289,492,454],{"class":295},[289,494,289],{"class":299},[289,496,303],{"class":295},[289,498,500,502,504],{"class":291,"line":499},13,[289,501,381],{"class":295},[289,503,312],{"class":299},[289,505,303],{"class":295},[289,507,509,512,514],{"class":291,"line":508},14,[289,510,511],{"class":295},"  \u003C\u002F",[289,513,312],{"class":299},[289,515,303],{"class":295},[289,517,519,522,524],{"class":291,"line":518},15,[289,520,521],{"class":295},"\u003C\u002F",[289,523,300],{"class":299},[289,525,303],{"class":295},[289,527,529],{"class":291,"line":528},16,[289,530,532],{"emptyLinePlaceholder":531},true,"\n",[289,534,536,538,541,544,547,549,551,554,556],{"class":291,"line":535},17,[289,537,296],{"class":295},[289,539,540],{"class":299},"script",[289,542,543],{"class":315}," setup",[289,545,546],{"class":315}," lang",[289,548,319],{"class":295},[289,550,322],{"class":295},[289,552,553],{"class":325},"ts",[289,555,322],{"class":295},[289,557,303],{"class":295},[289,559,561,565,569],{"class":291,"line":560},18,[289,562,564],{"class":563},"s2Zo4","defineProps",[289,566,568],{"class":567},"sTEyZ","(",[289,570,571],{"class":295},"{\n",[289,573,575,578,580],{"class":291,"line":574},19,[289,576,577],{"class":299},"  icon",[289,579,218],{"class":295},[289,581,582],{"class":295}," {\n",[289,584,586,589,591,594],{"class":291,"line":585},20,[289,587,588],{"class":299},"    type",[289,590,218],{"class":295},[289,592,593],{"class":567}," String",[289,595,596],{"class":295},",\n",[289,598,600,603,605,608,611,614],{"class":291,"line":599},21,[289,601,602],{"class":299},"    default",[289,604,218],{"class":295},[289,606,607],{"class":295}," '",[289,609,610],{"class":325},"i-lucide-cursor-click",[289,612,613],{"class":295},"'",[289,615,596],{"class":295},[289,617,619],{"class":291,"line":618},22,[289,620,621],{"class":295},"  },\n",[289,623,625,628],{"class":291,"line":624},23,[289,626,627],{"class":295},"}",[289,629,630],{"class":567},")\n",[289,632,634,636,638],{"class":291,"line":633},24,[289,635,521],{"class":295},[289,637,540],{"class":299},[289,639,303],{"class":295},[274,641,643],{"id":642},"use-in-markdown-with-mdc-syntax","Use in Markdown with MDC syntax",[56,645,646,647,218],{},"Components can be integrated using ",[66,648,651],{"href":649,"rel":650},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax",[147],"MDC syntax",[279,653,658],{"className":654,"code":655,"filename":656,"language":657,"meta":285,"style":285},"language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","::home-feature\n  ---\n  icon: i-mdi-vuejs\n  ---\n  #title\n  Embedded Vue components\n  #description\n  Edit slots and props inside the visual editor.\n::\n","content\u002Findex.md","mdc",[72,659,660,668,673,682,686,691,696,701,706],{"__ignoreMap":285},[289,661,662,665],{"class":291,"line":292},[289,663,664],{"class":295},"::",[289,666,667],{"class":299},"home-feature\n",[289,669,670],{"class":291,"line":306},[289,671,672],{"class":567},"  ---\n",[289,674,675,677,679],{"class":291,"line":333},[289,676,577],{"class":299},[289,678,218],{"class":295},[289,680,681],{"class":325}," i-mdi-vuejs\n",[289,683,684],{"class":291,"line":354},[289,685,672],{"class":567},[289,687,688],{"class":291,"line":378},[289,689,690],{"class":315},"  #title\n",[289,692,693],{"class":291,"line":388},[289,694,695],{"class":567},"  Embedded Vue components\n",[289,697,698],{"class":291,"line":408},[289,699,700],{"class":315},"  #description\n",[289,702,703],{"class":291,"line":428},[289,704,705],{"class":567},"  Edit slots and props inside the visual editor.\n",[289,707,708],{"class":291,"line":451},[289,709,710],{"class":295},"::\n",[274,712,714],{"id":713},"ensure-components-are-listed","Ensure components are listed",[56,716,717,718,720,721,723],{},"If your component is not used in a ",[72,719,74],{}," file it won't be available in the components listed with the ",[72,722,230],{}," command.",[56,725,726,727,729],{},"To make sure components are listed with the ",[72,728,230],{}," command, make them globally registered:",[279,731,734],{"className":732,"code":733,"language":553,"meta":285,"style":285},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  components: [\n    {\n      path: '~\u002Fcomponents\u002Fcontent', \u002F\u002Fglobally register all components in the components\u002Fcontents folder\n      global: true,\n    }\n  ],  \n\n})\n",[72,735,736,752,762,767,788,801,806,816,820],{"__ignoreMap":285},[289,737,738,742,745,748,750],{"class":291,"line":292},[289,739,741],{"class":740},"s7zQu","export",[289,743,744],{"class":740}," default",[289,746,747],{"class":563}," defineNuxtConfig",[289,749,568],{"class":567},[289,751,571],{"class":295},[289,753,754,757,759],{"class":291,"line":306},[289,755,756],{"class":299},"  components",[289,758,218],{"class":295},[289,760,761],{"class":567}," [\n",[289,763,764],{"class":291,"line":333},[289,765,766],{"class":295},"    {\n",[289,768,769,772,774,776,779,781,784],{"class":291,"line":354},[289,770,771],{"class":299},"      path",[289,773,218],{"class":295},[289,775,607],{"class":295},[289,777,778],{"class":325},"~\u002Fcomponents\u002Fcontent",[289,780,613],{"class":295},[289,782,783],{"class":295},",",[289,785,787],{"class":786},"sHwdD"," \u002F\u002Fglobally register all components in the components\u002Fcontents folder\n",[289,789,790,793,795,799],{"class":291,"line":378},[289,791,792],{"class":299},"      global",[289,794,218],{"class":295},[289,796,798],{"class":797},"sfNiH"," true",[289,800,596],{"class":295},[289,802,803],{"class":291,"line":388},[289,804,805],{"class":295},"    }\n",[289,807,808,811,813],{"class":291,"line":408},[289,809,810],{"class":567},"  ]",[289,812,783],{"class":295},[289,814,815],{"class":567},"  \n",[289,817,818],{"class":291,"line":428},[289,819,532],{"emptyLinePlaceholder":531},[289,821,822,824],{"class":291,"line":451},[289,823,627],{"class":295},[289,825,630],{"class":567},[56,827,828],{},"or with perhaps more control:",[279,830,832],{"className":732,"code":831,"language":553,"meta":285,"style":285},"export default defineNuxtConfig({\n  hooks: {\n    'components:extend': (components) => {\n      const globals = components.filter(c => ['MyCustomComponent'].includes(c.pascalName))\n\n      globals.forEach(c => c.global = true)\n    }\n  },\n})\n",[72,833,834,846,855,882,938,942,972,976,980],{"__ignoreMap":285},[289,835,836,838,840,842,844],{"class":291,"line":292},[289,837,741],{"class":740},[289,839,744],{"class":740},[289,841,747],{"class":563},[289,843,568],{"class":567},[289,845,571],{"class":295},[289,847,848,851,853],{"class":291,"line":306},[289,849,850],{"class":299},"  hooks",[289,852,218],{"class":295},[289,854,582],{"class":295},[289,856,857,860,863,865,867,870,874,877,880],{"class":291,"line":333},[289,858,859],{"class":295},"    '",[289,861,862],{"class":299},"components:extend",[289,864,613],{"class":295},[289,866,218],{"class":295},[289,868,869],{"class":295}," (",[289,871,873],{"class":872},"sHdIc","components",[289,875,876],{"class":295},")",[289,878,879],{"class":315}," =>",[289,881,582],{"class":295},[289,883,884,887,890,893,896,898,901,903,906,908,911,913,916,918,921,923,926,928,930,932,935],{"class":291,"line":354},[289,885,886],{"class":315},"      const",[289,888,889],{"class":567}," globals",[289,891,892],{"class":295}," =",[289,894,895],{"class":567}," components",[289,897,155],{"class":295},[289,899,900],{"class":563},"filter",[289,902,568],{"class":299},[289,904,905],{"class":872},"c",[289,907,879],{"class":315},[289,909,910],{"class":299}," [",[289,912,613],{"class":295},[289,914,915],{"class":325},"MyCustomComponent",[289,917,613],{"class":295},[289,919,920],{"class":299},"]",[289,922,155],{"class":295},[289,924,925],{"class":563},"includes",[289,927,568],{"class":299},[289,929,905],{"class":567},[289,931,155],{"class":295},[289,933,934],{"class":567},"pascalName",[289,936,937],{"class":299},"))\n",[289,939,940],{"class":291,"line":378},[289,941,532],{"emptyLinePlaceholder":531},[289,943,944,947,949,952,954,956,958,961,963,966,968,970],{"class":291,"line":388},[289,945,946],{"class":567},"      globals",[289,948,155],{"class":295},[289,950,951],{"class":563},"forEach",[289,953,568],{"class":299},[289,955,905],{"class":872},[289,957,879],{"class":315},[289,959,960],{"class":567}," c",[289,962,155],{"class":295},[289,964,965],{"class":567},"global",[289,967,892],{"class":295},[289,969,798],{"class":797},[289,971,630],{"class":299},[289,973,974],{"class":291,"line":408},[289,975,805],{"class":295},[289,977,978],{"class":291,"line":428},[289,979,621],{"class":295},[289,981,982,984],{"class":291,"line":451},[289,983,627],{"class":295},[289,985,630],{"class":567},[987,988,989],"note",{},"Components from external libraries (like Nuxt UI) won't appear in Studio's component list. You can use the same hook to make them available.",[274,991,993],{"id":992},"edit-in-the-visual-editor","Edit in the Visual Editor",[995,996,997,1003,1006,1009],"ol",{},[63,998,999,1000,1002],{},"Type ",[72,1001,230],{}," anywhere while editing",[63,1004,1005],{},"Search for your component in the list",[63,1007,1008],{},"Insert and edit component slots directly in the editor",[63,1010,1011,1012,1015],{},"Click on any component to open the ",[100,1013,1014],{},"Props Editor"," panel and edit properties visually",[1017,1018,1020,1021,1024,1025,155],"tip",{"to":1019},"\u002Fsetup#editor","Customize which components appear in the editor, restrict icon libraries, and filter built-in slash menu entries using the ",[72,1022,1023],{},"studio.editor"," option in your ",[72,1026,1027],{},"nuxt.config.ts",[163,1029,1031],{"id":1030},"debug-mode","Debug Mode",[56,1033,1034,1035,1038],{},"Enable ",[100,1036,1037],{},"debug mode"," from the footer menu to see the real-time conversion between:",[60,1040,1041,1044,1052],{},[63,1042,1043],{},"TipTap JSON format",[63,1045,1046,1047,876],{},"Comark Tree (the compact array-based AST produced by ",[66,1048,1051],{"href":1049,"rel":1050},"https:\u002F\u002Fgithub.com\u002Fcomarkdown\u002Fcomark",[147],"comark",[63,1053,1054],{},"Final Markdown output",[56,1056,1057],{},"This is useful for understanding how content is transformed and to share troubleshooting.",[1059,1060,1061,1062,1064,1065,155],"prose-note",{},"Studio uses ",[100,1063,1051],{}," as its Markdown parser. When you type in the visual editor, the content flows through: TipTap JSON → ComarkTree → raw Markdown. The ComarkTree is also what gets stored in the browser SQLite database and committed to Git as raw markdown via ",[72,1066,1067],{},"renderMarkdown",[105,1069,1071],{"id":1070},"form-editor","Form Editor",[56,1073,1074],{},"The form editor is used for editing:",[60,1076,1077,1085,1089],{},[63,1078,1079,1082,1083,75],{},[100,1080,1081],{},"Frontmatter"," in ",[72,1084,74],{},[63,1086,1087,75],{},[100,1088,84],{},[63,1090,1091,75],{},[100,1092,88],{},[56,1094,1095,1096,1101],{},"It eliminates the need to interact directly with complex file syntax. Instead, forms are automatically generated based on your Nuxt Content ",[66,1097,1100],{"href":1098,"rel":1099},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Fcollections\u002Fdefine",[147],"collection schema"," definition.",[163,1103,1105,1108,1109,1112],{"id":1104},"defining-your-form-with-zod-schema",[100,1106,1107],{},"Defining your form with"," ",[72,1110,1111],{},"zod"," Schema",[987,1114,1115],{"to":1098},"Learn more about schema collection definition in the Nuxt Content documentation.",[56,1117,1118,1119,1122],{},"Once the ",[72,1120,1121],{},"schema"," property has been defined in your collection, this will automatically generate the corresponding form on Studio interface.",[1124,1125,1126,1133],"code-group",{},[312,1127,1130],{"icon":1128,"label":1129},"i-lucide-eye","Generated Form",[157,1131],{":controls":159,":loop":159,"src":1132},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1767887481\u002Fstudio\u002Fschemaform_tmd4db.mp4",[279,1134,1137],{"className":732,"code":1135,"filename":1136,"language":553,"meta":285,"style":285},"export default defineContentConfig({\n  collections: {\n    authors: defineCollection({\n      type: 'data',\n      source: 'authors\u002F**\u002F*',\n      schema: z.object({\n        name: z.string(),\n        avatar: z.object({\n          src: z.string().editor({ input: 'media' }),\n          alt: z.string(),\n        }),\n        to: z.string(),\n        username: z.string(),\n        role: z.enum(['creator', 'maintainer', 'contributor']),\n        order: z.number().default(0),\n        birthDate: z.string().date(),\n        lastCommitAt: z.string().datetime(),\n        icon: z.string().editor({\n          input: 'icon',\n          iconLibraries: ['lucide']\n        }),\n        isOpenSourceLover: z.boolean().default(true),\n        modules: z.array(z.string()),\n    })\n  },\n})\n","content.config.ts",[72,1138,1139,1152,1161,1175,1191,1207,1226,1245,1262,1306,1323,1332,1349,1366,1413,1444,1468,1492,1515,1530,1549,1557,1585,1611,1618,1623],{"__ignoreMap":285},[289,1140,1141,1143,1145,1148,1150],{"class":291,"line":292},[289,1142,741],{"class":740},[289,1144,744],{"class":740},[289,1146,1147],{"class":563}," defineContentConfig",[289,1149,568],{"class":567},[289,1151,571],{"class":295},[289,1153,1154,1157,1159],{"class":291,"line":306},[289,1155,1156],{"class":299},"  collections",[289,1158,218],{"class":295},[289,1160,582],{"class":295},[289,1162,1163,1166,1168,1171,1173],{"class":291,"line":333},[289,1164,1165],{"class":299},"    authors",[289,1167,218],{"class":295},[289,1169,1170],{"class":563}," defineCollection",[289,1172,568],{"class":567},[289,1174,571],{"class":295},[289,1176,1177,1180,1182,1184,1187,1189],{"class":291,"line":354},[289,1178,1179],{"class":299},"      type",[289,1181,218],{"class":295},[289,1183,607],{"class":295},[289,1185,1186],{"class":325},"data",[289,1188,613],{"class":295},[289,1190,596],{"class":295},[289,1192,1193,1196,1198,1200,1203,1205],{"class":291,"line":378},[289,1194,1195],{"class":299},"      source",[289,1197,218],{"class":295},[289,1199,607],{"class":295},[289,1201,1202],{"class":325},"authors\u002F**\u002F*",[289,1204,613],{"class":295},[289,1206,596],{"class":295},[289,1208,1209,1212,1214,1217,1219,1222,1224],{"class":291,"line":388},[289,1210,1211],{"class":299},"      schema",[289,1213,218],{"class":295},[289,1215,1216],{"class":567}," z",[289,1218,155],{"class":295},[289,1220,1221],{"class":563},"object",[289,1223,568],{"class":567},[289,1225,571],{"class":295},[289,1227,1228,1231,1233,1235,1237,1240,1243],{"class":291,"line":408},[289,1229,1230],{"class":299},"        name",[289,1232,218],{"class":295},[289,1234,1216],{"class":567},[289,1236,155],{"class":295},[289,1238,1239],{"class":563},"string",[289,1241,1242],{"class":567},"()",[289,1244,596],{"class":295},[289,1246,1247,1250,1252,1254,1256,1258,1260],{"class":291,"line":428},[289,1248,1249],{"class":299},"        avatar",[289,1251,218],{"class":295},[289,1253,1216],{"class":567},[289,1255,155],{"class":295},[289,1257,1221],{"class":563},[289,1259,568],{"class":567},[289,1261,571],{"class":295},[289,1263,1264,1267,1269,1271,1273,1275,1277,1279,1282,1284,1287,1290,1292,1294,1297,1299,1302,1304],{"class":291,"line":451},[289,1265,1266],{"class":299},"          src",[289,1268,218],{"class":295},[289,1270,1216],{"class":567},[289,1272,155],{"class":295},[289,1274,1239],{"class":563},[289,1276,1242],{"class":567},[289,1278,155],{"class":295},[289,1280,1281],{"class":563},"editor",[289,1283,568],{"class":567},[289,1285,1286],{"class":295},"{",[289,1288,1289],{"class":299}," input",[289,1291,218],{"class":295},[289,1293,607],{"class":295},[289,1295,1296],{"class":325},"media",[289,1298,613],{"class":295},[289,1300,1301],{"class":295}," }",[289,1303,876],{"class":567},[289,1305,596],{"class":295},[289,1307,1308,1311,1313,1315,1317,1319,1321],{"class":291,"line":461},[289,1309,1310],{"class":299},"          alt",[289,1312,218],{"class":295},[289,1314,1216],{"class":567},[289,1316,155],{"class":295},[289,1318,1239],{"class":563},[289,1320,1242],{"class":567},[289,1322,596],{"class":295},[289,1324,1325,1328,1330],{"class":291,"line":470},[289,1326,1327],{"class":295},"        }",[289,1329,876],{"class":567},[289,1331,596],{"class":295},[289,1333,1334,1337,1339,1341,1343,1345,1347],{"class":291,"line":490},[289,1335,1336],{"class":299},"        to",[289,1338,218],{"class":295},[289,1340,1216],{"class":567},[289,1342,155],{"class":295},[289,1344,1239],{"class":563},[289,1346,1242],{"class":567},[289,1348,596],{"class":295},[289,1350,1351,1354,1356,1358,1360,1362,1364],{"class":291,"line":499},[289,1352,1353],{"class":299},"        username",[289,1355,218],{"class":295},[289,1357,1216],{"class":567},[289,1359,155],{"class":295},[289,1361,1239],{"class":563},[289,1363,1242],{"class":567},[289,1365,596],{"class":295},[289,1367,1368,1371,1373,1375,1377,1380,1383,1385,1388,1390,1392,1394,1397,1399,1401,1403,1406,1408,1411],{"class":291,"line":508},[289,1369,1370],{"class":299},"        role",[289,1372,218],{"class":295},[289,1374,1216],{"class":567},[289,1376,155],{"class":295},[289,1378,1379],{"class":563},"enum",[289,1381,1382],{"class":567},"([",[289,1384,613],{"class":295},[289,1386,1387],{"class":325},"creator",[289,1389,613],{"class":295},[289,1391,783],{"class":295},[289,1393,607],{"class":295},[289,1395,1396],{"class":325},"maintainer",[289,1398,613],{"class":295},[289,1400,783],{"class":295},[289,1402,607],{"class":295},[289,1404,1405],{"class":325},"contributor",[289,1407,613],{"class":295},[289,1409,1410],{"class":567},"])",[289,1412,596],{"class":295},[289,1414,1415,1418,1420,1422,1424,1427,1429,1431,1434,1436,1440,1442],{"class":291,"line":518},[289,1416,1417],{"class":299},"        order",[289,1419,218],{"class":295},[289,1421,1216],{"class":567},[289,1423,155],{"class":295},[289,1425,1426],{"class":563},"number",[289,1428,1242],{"class":567},[289,1430,155],{"class":295},[289,1432,1433],{"class":563},"default",[289,1435,568],{"class":567},[289,1437,1439],{"class":1438},"sbssI","0",[289,1441,876],{"class":567},[289,1443,596],{"class":295},[289,1445,1446,1449,1451,1453,1455,1457,1459,1461,1464,1466],{"class":291,"line":528},[289,1447,1448],{"class":299},"        birthDate",[289,1450,218],{"class":295},[289,1452,1216],{"class":567},[289,1454,155],{"class":295},[289,1456,1239],{"class":563},[289,1458,1242],{"class":567},[289,1460,155],{"class":295},[289,1462,1463],{"class":563},"date",[289,1465,1242],{"class":567},[289,1467,596],{"class":295},[289,1469,1470,1473,1475,1477,1479,1481,1483,1485,1488,1490],{"class":291,"line":535},[289,1471,1472],{"class":299},"        lastCommitAt",[289,1474,218],{"class":295},[289,1476,1216],{"class":567},[289,1478,155],{"class":295},[289,1480,1239],{"class":563},[289,1482,1242],{"class":567},[289,1484,155],{"class":295},[289,1486,1487],{"class":563},"datetime",[289,1489,1242],{"class":567},[289,1491,596],{"class":295},[289,1493,1494,1497,1499,1501,1503,1505,1507,1509,1511,1513],{"class":291,"line":560},[289,1495,1496],{"class":299},"        icon",[289,1498,218],{"class":295},[289,1500,1216],{"class":567},[289,1502,155],{"class":295},[289,1504,1239],{"class":563},[289,1506,1242],{"class":567},[289,1508,155],{"class":295},[289,1510,1281],{"class":563},[289,1512,568],{"class":567},[289,1514,571],{"class":295},[289,1516,1517,1520,1522,1524,1526,1528],{"class":291,"line":574},[289,1518,1519],{"class":299},"          input",[289,1521,218],{"class":295},[289,1523,607],{"class":295},[289,1525,370],{"class":325},[289,1527,613],{"class":295},[289,1529,596],{"class":295},[289,1531,1532,1535,1537,1539,1541,1544,1546],{"class":291,"line":585},[289,1533,1534],{"class":299},"          iconLibraries",[289,1536,218],{"class":295},[289,1538,910],{"class":567},[289,1540,613],{"class":295},[289,1542,1543],{"class":325},"lucide",[289,1545,613],{"class":295},[289,1547,1548],{"class":567},"]\n",[289,1550,1551,1553,1555],{"class":291,"line":599},[289,1552,1327],{"class":295},[289,1554,876],{"class":567},[289,1556,596],{"class":295},[289,1558,1559,1562,1564,1566,1568,1571,1573,1575,1577,1579,1581,1583],{"class":291,"line":618},[289,1560,1561],{"class":299},"        isOpenSourceLover",[289,1563,218],{"class":295},[289,1565,1216],{"class":567},[289,1567,155],{"class":295},[289,1569,1570],{"class":563},"boolean",[289,1572,1242],{"class":567},[289,1574,155],{"class":295},[289,1576,1433],{"class":563},[289,1578,568],{"class":567},[289,1580,159],{"class":797},[289,1582,876],{"class":567},[289,1584,596],{"class":295},[289,1586,1587,1590,1592,1594,1596,1599,1602,1604,1606,1609],{"class":291,"line":624},[289,1588,1589],{"class":299},"        modules",[289,1591,218],{"class":295},[289,1593,1216],{"class":567},[289,1595,155],{"class":295},[289,1597,1598],{"class":563},"array",[289,1600,1601],{"class":567},"(z",[289,1603,155],{"class":295},[289,1605,1239],{"class":563},[289,1607,1608],{"class":567},"())",[289,1610,596],{"class":295},[289,1612,1613,1616],{"class":291,"line":633},[289,1614,1615],{"class":295},"    }",[289,1617,630],{"class":567},[289,1619,1621],{"class":291,"line":1620},25,[289,1622,621],{"class":295},[289,1624,1626],{"class":291,"line":1625},26,[289,1627,1628],{"class":567},"})\n",[163,1630,1632],{"id":1631},"native-inputs-mapping",[100,1633,1634],{},"Native Inputs Mapping",[56,1636,1637],{},"Primitive Zod types are automatically mapped to appropriate form inputs in:",[60,1639,1640,1646,1652,1658,1664,1670,1676],{},[63,1641,1642,1645],{},[100,1643,1644],{},"String"," → Text input",[63,1647,1648,1651],{},[100,1649,1650],{},"Date"," → Date picker",[63,1653,1654,1657],{},[100,1655,1656],{},"Number"," → Number input",[63,1659,1660,1663],{},[100,1661,1662],{},"Boolean"," → Toggle switch",[63,1665,1666,1669],{},[100,1667,1668],{},"Enum"," → Select dropdown ",[63,1671,1672,1675],{},[100,1673,1674],{},"Arrays of strings"," → List of badge inputs",[63,1677,1678,1681],{},[100,1679,1680],{},"Arrays of objects"," → Accordion of items with embedded form",[163,1683,1685],{"id":1684},"custom-inputs-mapping","Custom Inputs Mapping",[56,1687,1688,1689,1691],{},"Studio goes beyond primitive types. You can customise form fields using the ",[72,1690,1281],{}," method, which extends Zod types with metadata to empower editor interface.",[56,1693,1694],{},"This allows you to define custom inputs or hide fields.",[274,1696,1698],{"id":1697},"usage","Usage",[279,1700,1702],{"className":732,"code":1701,"filename":1136,"language":553,"meta":285,"style":285},"\u002F\u002F Icon\nicon: property(z.string()).editor({ input: 'icon', iconLibraries: ['lucide', 'simple-icons'] })\n\n\u002F\u002F Media\nimage: property(z.string()).editor({ input: 'media' })\n\n\u002F\u002F Textarea\ndescription: z.string().editor({ input: 'textarea' })\n",[72,1703,1704,1709,1776,1780,1785,1824,1828,1833],{"__ignoreMap":285},[289,1705,1706],{"class":291,"line":292},[289,1707,1708],{"class":786},"\u002F\u002F Icon\n",[289,1710,1711,1714,1716,1719,1721,1723,1725,1727,1729,1731,1733,1735,1737,1739,1741,1743,1745,1747,1750,1752,1754,1756,1758,1760,1762,1764,1767,1769,1772,1774],{"class":291,"line":306},[289,1712,370],{"class":1713},"sBMFI",[289,1715,218],{"class":295},[289,1717,1718],{"class":563}," property",[289,1720,1601],{"class":567},[289,1722,155],{"class":295},[289,1724,1239],{"class":563},[289,1726,1608],{"class":567},[289,1728,155],{"class":295},[289,1730,1281],{"class":563},[289,1732,568],{"class":567},[289,1734,1286],{"class":295},[289,1736,1289],{"class":299},[289,1738,218],{"class":295},[289,1740,607],{"class":295},[289,1742,370],{"class":325},[289,1744,613],{"class":295},[289,1746,783],{"class":295},[289,1748,1749],{"class":299}," iconLibraries",[289,1751,218],{"class":295},[289,1753,910],{"class":567},[289,1755,613],{"class":295},[289,1757,1543],{"class":325},[289,1759,613],{"class":295},[289,1761,783],{"class":295},[289,1763,607],{"class":295},[289,1765,1766],{"class":325},"simple-icons",[289,1768,613],{"class":295},[289,1770,1771],{"class":567},"] ",[289,1773,627],{"class":295},[289,1775,630],{"class":567},[289,1777,1778],{"class":291,"line":333},[289,1779,532],{"emptyLinePlaceholder":531},[289,1781,1782],{"class":291,"line":354},[289,1783,1784],{"class":786},"\u002F\u002F Media\n",[289,1786,1787,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822],{"class":291,"line":378},[289,1788,1789],{"class":1713},"image",[289,1791,218],{"class":295},[289,1793,1718],{"class":563},[289,1795,1601],{"class":567},[289,1797,155],{"class":295},[289,1799,1239],{"class":563},[289,1801,1608],{"class":567},[289,1803,155],{"class":295},[289,1805,1281],{"class":563},[289,1807,568],{"class":567},[289,1809,1286],{"class":295},[289,1811,1289],{"class":299},[289,1813,218],{"class":295},[289,1815,607],{"class":295},[289,1817,1296],{"class":325},[289,1819,613],{"class":295},[289,1821,1301],{"class":295},[289,1823,630],{"class":567},[289,1825,1826],{"class":291,"line":388},[289,1827,532],{"emptyLinePlaceholder":531},[289,1829,1830],{"class":291,"line":408},[289,1831,1832],{"class":786},"\u002F\u002F Textarea\n",[289,1834,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1864,1866,1868],{"class":291,"line":428},[289,1836,483],{"class":1713},[289,1838,218],{"class":295},[289,1840,1216],{"class":567},[289,1842,155],{"class":295},[289,1844,1239],{"class":563},[289,1846,1242],{"class":567},[289,1848,155],{"class":295},[289,1850,1281],{"class":563},[289,1852,568],{"class":567},[289,1854,1286],{"class":295},[289,1856,1289],{"class":299},[289,1858,218],{"class":295},[289,1860,607],{"class":295},[289,1862,1863],{"class":325},"textarea",[289,1865,613],{"class":295},[289,1867,1301],{"class":295},[289,1869,630],{"class":567},[274,1871,1873],{"id":1872},"options","Options",[1875,1876,1878],"h5",{"id":1877},"input-media-icon-textarea",[72,1879,1880],{},"input: 'media' | 'icon' | 'textarea'",[56,1882,1883,1884,1886,1887,85,1889,1891],{},"You can set the editor input type. Currently ",[72,1885,370],{},", ",[72,1888,1296],{},[72,1890,1863],{}," are available.",[60,1893,1894,1899,1904],{},[63,1895,1896,1898],{},[72,1897,370],{}," - Opens an icon picker with searchable Iconify libraries",[63,1900,1901,1903],{},[72,1902,1296],{}," - Opens the media picker to select images from your library",[63,1905,1906,1908],{},[72,1907,1863],{}," - Renders a multi-line text input instead of a single-line text field",[1875,1910,1912],{"id":1911},"iconlibraries-arraystring",[72,1913,1914],{},"iconLibraries: Array\u003Cstring>",[56,1916,1917,1918,1923],{},"Specifies which ",[66,1919,1922],{"href":1920,"rel":1921},"https:\u002F\u002Ficones.js.org\u002F",[147],"Iconify"," libraries to display. Use this option to filter and limit the available icon sets.",[1017,1925,1927,1928,1931,1932,155],{"to":1926},"\u002Fsetup#icon-libraries","You can restrict icon libraries globally for all Studio icon pickers via ",[72,1929,1930],{},"studio.editor.iconLibraries"," in your ",[72,1933,1027],{},[105,1935,1937],{"id":1936},"code-editor","Code Editor",[56,1939,1940],{},"The Monaco code editor provides full control over your content, allowing you to write raw content directly:",[56,1942,1943,1944,1946,1947,1949,1950,1952],{},"MDC syntax for ",[72,1945,74],{}," files or ",[72,1948,88],{}," or ",[72,1951,84],{}," syntax for others.",[1954,1955,1956],"style",{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":285,"searchDepth":306,"depth":306,"links":1958},[1959,1960,1966,1972],{"id":107,"depth":306,"text":108},{"id":135,"depth":306,"text":1961,"children":1962},"TipTap Visual Editor (Markdown files)",[1963,1964,1965],{"id":165,"depth":333,"text":166},{"id":258,"depth":333,"text":259},{"id":1030,"depth":333,"text":1031},{"id":1070,"depth":306,"text":1071,"children":1967},[1968,1970,1971],{"id":1104,"depth":333,"text":1969},"Defining your form with zod Schema",{"id":1631,"depth":333,"text":1634},{"id":1684,"depth":333,"text":1685},{"id":1936,"depth":306,"text":1937},"Discover and select your favorite way to manage your content between the visual or the code editor.","md",null,{},{"title":25,"icon":28},{"title":1979,"description":1980},"Edit your Nuxt Content website with our editors","Overview of our different Studio CMS editors to manage your content and your medias. Choose between our visual editors and our code editor.","4K0SvUfwHVJ4UKTl42ixmUFNHwIb3X7PIJBUthpRAuo",[1983,1985],{"title":20,"path":21,"stem":22,"description":1984,"icon":23,"children":-1},"Configure authentication providers to control access to Nuxt Studio.",{"title":30,"path":31,"stem":32,"description":1986,"icon":33,"children":-1},"Explore how to browse and manage media files, including external storage with NuxtHub blob storage, and integrate them into your projects.",1778168234694]