[{"data":1,"prerenderedAt":857},["ShallowReactive",2],{"navigation":3,"/changelog/frontmatter-form":179},[4,24,43,61,83,101,119,149],{"title":5,"path":6,"stem":7,"children":8,"icon":23},"Getting Started","/docs/getting-started","docs/1.getting-started/1.index",[9,11,15,19],{"title":10,"path":6,"stem":7},"Introduction",{"title":12,"path":13,"stem":14},"Installation","/docs/getting-started/installation","docs/1.getting-started/2.installation",{"title":16,"path":17,"stem":18},"Configuration","/docs/getting-started/configuration","docs/1.getting-started/3.configuration",{"title":20,"path":21,"stem":22},"Migration","/docs/getting-started/migration","docs/1.getting-started/4.migration","i-lucide-square-play",{"title":25,"icon":26,"path":27,"stem":28,"children":29,"page":42},"Collections","i-lucide-database","/docs/collections","docs/2.collections",[30,34,38],{"title":31,"path":32,"stem":33},"Define","/docs/collections/define","docs/2.collections/1.define",{"title":35,"path":36,"stem":37},"Types","/docs/collections/types","docs/2.collections/2.types",{"title":39,"path":40,"stem":41},"Sources","/docs/collections/sources","docs/2.collections/3.sources",false,{"title":44,"icon":45,"path":46,"stem":47,"children":48,"page":42},"Files","i-lucide-file","/docs/files","docs/3.files",[49,53,57],{"title":50,"path":51,"stem":52},"Markdown","/docs/files/markdown","docs/3.files/1.markdown",{"title":54,"path":55,"stem":56},"YAML","/docs/files/yaml","docs/3.files/2.yaml",{"title":58,"path":59,"stem":60},"JSON","/docs/files/json","docs/3.files/3.json",{"title":62,"icon":63,"path":64,"stem":65,"children":66,"page":42},"Query Utils","i-lucide-square-function","/docs/utils","docs/4.utils",[67,71,75,79],{"title":68,"path":69,"stem":70},"queryCollection","/docs/utils/query-collection","docs/4.utils/1.query-collection",{"title":72,"path":73,"stem":74},"queryCollectionNavigation","/docs/utils/query-collection-navigation","docs/4.utils/2.query-collection-navigation",{"title":76,"path":77,"stem":78},"queryCollectionItemSurroundings","/docs/utils/query-collection-item-surroundings","docs/4.utils/3.query-collection-item-surroundings",{"title":80,"path":81,"stem":82},"queryCollectionSearchSections","/docs/utils/query-collection-search-sections","docs/4.utils/4.query-collection-search-sections",{"title":84,"icon":85,"path":86,"stem":87,"children":88,"page":42},"Components","i-lucide-square-code","/docs/components","docs/5.components",[89,93,97],{"title":90,"path":91,"stem":92},"ContentRenderer","/docs/components/content-renderer","docs/5.components/0.content-renderer",{"title":94,"path":95,"stem":96},"Slot","/docs/components/slot","docs/5.components/1.slot",{"title":98,"path":99,"stem":100},"Prose Components","/docs/components/prose","docs/5.components/2.prose",{"title":102,"icon":103,"path":104,"stem":105,"children":106,"page":42},"Deploy","i-lucide-cloud-upload","/docs/deploy","docs/6.deploy",[107,111,115],{"title":108,"path":109,"stem":110},"Server","/docs/deploy/server","docs/6.deploy/1.server",{"title":112,"path":113,"stem":114},"Serverless","/docs/deploy/serverless","docs/6.deploy/2.serverless",{"title":116,"path":117,"stem":118},"Static","/docs/deploy/static","docs/6.deploy/3.static",{"title":120,"icon":121,"path":122,"stem":123,"children":124,"page":42},"Advanced","i-lucide-code-xml","/docs/advanced","docs/7.advanced",[125,129,133,137,141,145],{"title":126,"path":127,"stem":128},"Full-Text Search","/docs/advanced/fulltext-search","docs/7.advanced/1.fulltext-search",{"title":130,"path":131,"stem":132},"Raw Content","/docs/advanced/raw-content","docs/7.advanced/2.raw-content",{"title":134,"path":135,"stem":136},"SQL Storage","/docs/advanced/database","docs/7.advanced/3.database",{"title":138,"path":139,"stem":140},"Debugging tools","/docs/advanced/tools","docs/7.advanced/4.tools",{"title":142,"path":143,"stem":144},"Hooks","/docs/advanced/hooks","docs/7.advanced/5.hooks",{"title":146,"path":147,"stem":148},"Custom Source","/docs/advanced/custom-source","docs/7.advanced/6.custom-source",{"title":150,"icon":151,"path":152,"stem":153,"children":154,"page":42},"Studio","i-lucide-monitor","/docs/studio","docs/8.studio",[155,159,163,167,171,175],{"title":156,"path":157,"stem":158},"Setup","/docs/studio/setup","docs/8.studio/1.setup",{"title":160,"path":161,"stem":162},"Synchronization","/docs/studio/github","docs/8.studio/2.github",{"title":164,"path":165,"stem":166},"Content editors","/docs/studio/content","docs/8.studio/3.content",{"title":168,"path":169,"stem":170},"Medias","/docs/studio/medias","docs/8.studio/4.medias",{"title":172,"path":173,"stem":174},"App Config","/docs/studio/config","docs/8.studio/5.config",{"title":176,"path":177,"stem":178},"Local Debug","/docs/studio/debug","docs/8.studio/6.debug",{"page":180,"surround":850},{"id":181,"title":182,"authors":183,"body":189,"category":840,"date":841,"description":842,"draft":42,"extension":843,"image":844,"meta":846,"navigation":390,"path":847,"seo":848,"stem":849},"posts/changelog/frontmatter-form.md","Visual front-matter edition",[184],{"name":185,"avatar":186,"to":188},"Baptiste Leproux",{"src":187},"https://avatars.githubusercontent.com/u/7290030?v=4","https://x.com/_larbish",{"type":190,"value":191,"toc":826},"minimal",[192,216,221,228,234,238,247,254,258,261,264,268,276,280,292,295,300,308,311,315,318,323,330,334,337,685,689,692,695,816,822],[193,194,195],"warning",{},[196,197,198,199,206,207,211,212,215],"p",{},"This article was published before the merge of the ",[200,201,205],"a",{"href":202,"rel":203},"https://github.com/nuxt/content",[204],"nofollow","Content"," and ",[200,208,150],{"href":209,"rel":210},"https://github.com/nuxtlabs/studio-module",[204]," modules on January 6, 2025. As a result, it may contain some inconsistencies. The Studio module is now deprecated and available as an opt-in feature of the Content module. Learn how to enable it in ",[200,213,214],{"href":6},"this guide",".",[217,218,220],"h2",{"id":219},"visual-front-matter-editing","Visual Front-Matter editing",[196,222,223,224,227],{},"You can now edit your markdown front-matter without writing in the ",[225,226,54],"code",{}," syntax. Instead, Nuxt Studio automatically generates a user-friendly form that simplifies metadata editing.",[229,230],"video",{":autoplay":231,":controls":231,":loop":231,"poster":232,"src":233},"true","https://res.cloudinary.com/nuxt/video/upload/v1729157955/frontmatterform2_rmh58v.jpg","https://res.cloudinary.com/nuxt/video/upload/v1729157955/frontmatterform2_rmh58v.mp4",[217,235,237],{"id":236},"what-is-the-front-matter","What is the front-matter?",[196,239,240,241,246],{},"Front-matter is a convention used in Markdown-based CMSs to provide metadata for pages, such as descriptions, titles, and more. In ",[200,242,245],{"href":243,"rel":244},"https://content.nuxt.com/usage/markdown#front-matter",[204],"Nuxt Content",", the front-matter uses the YAML syntax.",[248,249,251],"callout",{"icon":250,"to":243},"i-ph-info",[196,252,253],{},"For more detailed information about front-matter syntax, visit the Nuxt Content documentation.",[217,255,257],{"id":256},"the-last-piece-of-our-non-technical-editor","The last piece of our non-technical editor",[196,259,260],{},"Nuxt Studio has been designed with non-technical users in mind, mainly since our editor has been released. Our goal is to make markdown and content edition accessible to everyone.",[196,262,263],{},"The automatic form generation for front-matter is the next logical step. By moving away from the complexities of YAML syntax, we’re simplifying the process for non-developers, offering dynamic input options like image pickers, date pickers, boolean toggles and more. This enhancement brings us to a fully visual, user-friendly content management experience.",[217,265,267],{"id":266},"expanding-to-all-yaml-and-json-files","Expanding to all YAML and JSON files",[196,269,270,271,206,273,275],{},"Soon, the form generation feature will extend to all ",[225,272,54],{},[225,274,58],{}," files you edit within Nuxt Studio, making it easier than ever to work with structured data.",[217,277,279],{"id":278},"looking-ahead-to-nuxt-content-v3","Looking ahead to Nuxt Content v3",[248,281,283],{"icon":282},"i-ph-lightbulb",[196,284,285,286,291],{},"This section is just a teaser of ",[200,287,290],{"href":288,"rel":289},"https://github.com/nuxt/content/tree/v3",[204],"Nuxt Content v3",". We will publish a more detailed blog post soon.",[196,293,294],{},"We're actively working on the next major update of Nuxt Content which will bring significant performance improvements and new features to further enhance your content management experience.",[296,297,299],"h3",{"id":298},"improved-performance","Improved Performance",[196,301,302,303,215],{},"A key challenge with Nuxt Content v2 was the large bundle size required to store all content files. It was an issue when deploying to edge platforms like ",[200,304,307],{"href":305,"rel":306},"https://hub.nuxt.com/",[204],"NuxtHub",[196,309,310],{},"To address this, Nuxt Content v3 moves away from the file based storing in production and leverage SQL database system. This switch is transparent to users. We're providing a zero config support for development mode, static generation, server rendering and  edge deployments with NuxtHub.",[296,312,314],{"id":313},"introducing-collections","Introducing Collections",[196,316,317],{},"Collections are groups of related content items within your Nuxt Content project. They help organize and manage large datasets more efficiently.",[319,320,322],"h4",{"id":321},"define-collections","Define collections",[196,324,325,326,329],{},"You'll be able to define collections in the ",[225,327,328],{},"content.config.ts"," file which is used by Nuxt Content to configure database structures, utility types, and methods for finding, parsing, and querying content.",[319,331,333],{"id":332},"collections-schema","Collections schema",[196,335,336],{},"Schemas enforce consistency within collections and improve TypeScript typings for better integration with Nuxt Content utilities.",[338,339,344],"pre",{"className":340,"code":341,"filename":328,"language":342,"meta":343,"style":343},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineCollection, z } from '@nuxt/content'\n\n// Export collections\nexport const collections = {\n  // Define collection using `defineCollection` utility\n  posts: defineCollection({\n    // Specify the type of content in this collection\n    type: 'page',\n    // Load every file matching this pattern\n    source: 'blog/**/*.md',\n    // Define custom schema for this collection\n    schema: z.object({\n      date: z.date(),\n      image: z.object({\n        src: z.string(),\n        alt: z.string()\n      }),\n      badge: z.object({\n        label: z.string(),\n        color: z.string()\n      })\n    })\n  }),\n}\n","ts","",[225,345,346,385,392,399,418,424,443,449,468,474,491,497,516,536,554,573,590,601,619,637,653,661,669,679],{"__ignoreMap":343},[347,348,351,355,359,363,366,369,372,375,378,382],"span",{"class":349,"line":350},"line",1,[347,352,354],{"class":353},"s8pZq","import",[347,356,358],{"class":357},"s86vT"," {",[347,360,362],{"class":361},"sndM8"," defineCollection",[347,364,365],{"class":357},",",[347,367,368],{"class":361}," z",[347,370,371],{"class":357}," }",[347,373,374],{"class":353}," from",[347,376,377],{"class":357}," '",[347,379,381],{"class":380},"sIEYB","@nuxt/content",[347,383,384],{"class":357},"'\n",[347,386,388],{"class":349,"line":387},2,[347,389,391],{"emptyLinePlaceholder":390},true,"\n",[347,393,395],{"class":349,"line":394},3,[347,396,398],{"class":397},"syuKq","// Export collections\n",[347,400,402,405,409,412,415],{"class":349,"line":401},4,[347,403,404],{"class":353},"export",[347,406,408],{"class":407},"s50WR"," const",[347,410,411],{"class":361}," collections ",[347,413,414],{"class":357},"=",[347,416,417],{"class":357}," {\n",[347,419,421],{"class":349,"line":420},5,[347,422,423],{"class":397},"  // Define collection using `defineCollection` utility\n",[347,425,427,431,434,437,440],{"class":349,"line":426},6,[347,428,430],{"class":429},"sd2Uz","  posts",[347,432,433],{"class":357},":",[347,435,362],{"class":436},"swgpB",[347,438,439],{"class":361},"(",[347,441,442],{"class":357},"{\n",[347,444,446],{"class":349,"line":445},7,[347,447,448],{"class":397},"    // Specify the type of content in this collection\n",[347,450,452,455,457,459,462,465],{"class":349,"line":451},8,[347,453,454],{"class":429},"    type",[347,456,433],{"class":357},[347,458,377],{"class":357},[347,460,461],{"class":380},"page",[347,463,464],{"class":357},"'",[347,466,467],{"class":357},",\n",[347,469,471],{"class":349,"line":470},9,[347,472,473],{"class":397},"    // Load every file matching this pattern\n",[347,475,477,480,482,484,487,489],{"class":349,"line":476},10,[347,478,479],{"class":429},"    source",[347,481,433],{"class":357},[347,483,377],{"class":357},[347,485,486],{"class":380},"blog/**/*.md",[347,488,464],{"class":357},[347,490,467],{"class":357},[347,492,494],{"class":349,"line":493},11,[347,495,496],{"class":397},"    // Define custom schema for this collection\n",[347,498,500,503,505,507,509,512,514],{"class":349,"line":499},12,[347,501,502],{"class":429},"    schema",[347,504,433],{"class":357},[347,506,368],{"class":361},[347,508,215],{"class":357},[347,510,511],{"class":436},"object",[347,513,439],{"class":361},[347,515,442],{"class":357},[347,517,519,522,524,526,528,531,534],{"class":349,"line":518},13,[347,520,521],{"class":429},"      date",[347,523,433],{"class":357},[347,525,368],{"class":361},[347,527,215],{"class":357},[347,529,530],{"class":436},"date",[347,532,533],{"class":361},"()",[347,535,467],{"class":357},[347,537,539,542,544,546,548,550,552],{"class":349,"line":538},14,[347,540,541],{"class":429},"      image",[347,543,433],{"class":357},[347,545,368],{"class":361},[347,547,215],{"class":357},[347,549,511],{"class":436},[347,551,439],{"class":361},[347,553,442],{"class":357},[347,555,557,560,562,564,566,569,571],{"class":349,"line":556},15,[347,558,559],{"class":429},"        src",[347,561,433],{"class":357},[347,563,368],{"class":361},[347,565,215],{"class":357},[347,567,568],{"class":436},"string",[347,570,533],{"class":361},[347,572,467],{"class":357},[347,574,576,579,581,583,585,587],{"class":349,"line":575},16,[347,577,578],{"class":429},"        alt",[347,580,433],{"class":357},[347,582,368],{"class":361},[347,584,215],{"class":357},[347,586,568],{"class":436},[347,588,589],{"class":361},"()\n",[347,591,593,596,599],{"class":349,"line":592},17,[347,594,595],{"class":357},"      }",[347,597,598],{"class":361},")",[347,600,467],{"class":357},[347,602,604,607,609,611,613,615,617],{"class":349,"line":603},18,[347,605,606],{"class":429},"      badge",[347,608,433],{"class":357},[347,610,368],{"class":361},[347,612,215],{"class":357},[347,614,511],{"class":436},[347,616,439],{"class":361},[347,618,442],{"class":357},[347,620,622,625,627,629,631,633,635],{"class":349,"line":621},19,[347,623,624],{"class":429},"        label",[347,626,433],{"class":357},[347,628,368],{"class":361},[347,630,215],{"class":357},[347,632,568],{"class":436},[347,634,533],{"class":361},[347,636,467],{"class":357},[347,638,640,643,645,647,649,651],{"class":349,"line":639},20,[347,641,642],{"class":429},"        color",[347,644,433],{"class":357},[347,646,368],{"class":361},[347,648,215],{"class":357},[347,650,568],{"class":436},[347,652,589],{"class":361},[347,654,656,658],{"class":349,"line":655},21,[347,657,595],{"class":357},[347,659,660],{"class":361},")\n",[347,662,664,667],{"class":349,"line":663},22,[347,665,666],{"class":357},"    }",[347,668,660],{"class":361},[347,670,672,675,677],{"class":349,"line":671},23,[347,673,674],{"class":357},"  }",[347,676,598],{"class":361},[347,678,467],{"class":357},[347,680,682],{"class":349,"line":681},24,[347,683,684],{"class":357},"}\n",[296,686,688],{"id":687},"built-with-nuxt-studio-in-mind","Built with Nuxt Studio in mind",[196,690,691],{},"Nuxt Studio was originally developed alongside Nuxt Content v2, but with v3, we're building the module with Nuxt Studio experience in mind. Our goal is to create the best CMS platform for content editing, while still offering the best developers experience.",[196,693,694],{},"For example, collection schemas will help us further enhance form generation in Studio. Among other things, you'll be able to set the editor type for a field directly in your schema.",[338,696,698],{"className":340,"code":697,"filename":328,"language":342,"meta":343,"style":343},"image: z.object({\n    src: z.string().editor({ type: 'media' })\n    alt: z.string()\n}),\nicon: z.string().editor({ type: 'icon' })\n",[225,699,700,718,759,770,779],{"__ignoreMap":343},[347,701,702,706,708,710,712,714,716],{"class":349,"line":350},[347,703,705],{"class":704},"sYGMc","image",[347,707,433],{"class":357},[347,709,368],{"class":361},[347,711,215],{"class":357},[347,713,511],{"class":436},[347,715,439],{"class":361},[347,717,442],{"class":357},[347,719,720,723,725,727,729,731,733,735,738,740,743,746,748,750,753,755,757],{"class":349,"line":387},[347,721,722],{"class":429},"    src",[347,724,433],{"class":357},[347,726,368],{"class":361},[347,728,215],{"class":357},[347,730,568],{"class":436},[347,732,533],{"class":361},[347,734,215],{"class":357},[347,736,737],{"class":436},"editor",[347,739,439],{"class":361},[347,741,742],{"class":357},"{",[347,744,745],{"class":429}," type",[347,747,433],{"class":357},[347,749,377],{"class":357},[347,751,752],{"class":380},"media",[347,754,464],{"class":357},[347,756,371],{"class":357},[347,758,660],{"class":361},[347,760,761,764,766,768],{"class":349,"line":394},[347,762,763],{"class":361},"    alt: z",[347,765,215],{"class":357},[347,767,568],{"class":436},[347,769,589],{"class":361},[347,771,772,775,777],{"class":349,"line":401},[347,773,774],{"class":357},"}",[347,776,598],{"class":361},[347,778,467],{"class":357},[347,780,781,784,786,788,790,792,794,796,798,800,802,804,806,808,810,812,814],{"class":349,"line":420},[347,782,783],{"class":704},"icon",[347,785,433],{"class":357},[347,787,368],{"class":361},[347,789,215],{"class":357},[347,791,568],{"class":436},[347,793,533],{"class":361},[347,795,215],{"class":357},[347,797,737],{"class":436},[347,799,439],{"class":361},[347,801,742],{"class":357},[347,803,745],{"class":429},[347,805,433],{"class":357},[347,807,377],{"class":357},[347,809,783],{"class":380},[347,811,464],{"class":357},[347,813,371],{"class":357},[347,815,660],{"class":361},[248,817,819],{"icon":282,"to":818},"https://github.com/nuxt/content/tree/main",[196,820,821],{},"Nuxt Content v3 has been officially released. Don't hesitate to try it out and give us feedback.",[823,824,825],"style",{},"html pre.shiki code .s8pZq, html code.shiki .s8pZq{--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 .s86vT, html code.shiki .s86vT{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sndM8, html code.shiki .sndM8{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sIEYB, html code.shiki .sIEYB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .syuKq, html code.shiki .syuKq{--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 .s50WR, html code.shiki .s50WR{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sd2Uz, html code.shiki .sd2Uz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .swgpB, html code.shiki .swgpB{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sYGMc, html code.shiki .sYGMc{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":343,"searchDepth":401,"depth":401,"links":827},[828,829,830,831,832],{"id":219,"depth":387,"text":220},{"id":236,"depth":387,"text":237},{"id":256,"depth":387,"text":257},{"id":266,"depth":387,"text":267},{"id":278,"depth":387,"text":279,"children":833},[834,835,839],{"id":298,"depth":394,"text":299},{"id":313,"depth":394,"text":314,"children":836},[837,838],{"id":321,"depth":401,"text":322},{"id":332,"depth":401,"text":333},{"id":687,"depth":394,"text":688},"studio","2024-10-17T00:00:00.000Z","Your page metadata is now editable through a visual interface instead of YAML.","md",{"src":845},"/blog/frontmatters.png",{"name":182},"/changelog/frontmatter-form",{"title":182,"description":842},"changelog/frontmatter-form",[851,856],{"title":852,"path":853,"stem":854,"description":855,"children":-1},"Visual YAML and JSON File Edition","/changelog/yaml-json-form","changelog/yaml-json-form","Edit YAML and JSON files with an automatically generated form.",null,1738777683718]