[{"data":1,"prerenderedAt":508},["ShallowReactive",2],{"blog-data":3},{"path":4,"data":5,"meta":10,"nodes":18},"\u002Fblog\u002Fdata",{"title":6,"description":7,"date":8,"badge":9},"Rendering YAML and JSON data","Treat structured content as data with the yaml and json plugins, then bind it to your own components.","2026-07-12","Data",{"key":11,"source":12,"stem":13,"extension":14,"kind":15,"type":16,"partial":17},"default\u002Fblog\u002Fdata.md","default","blog\u002Fdata",".md","document","text\u002Fmarkdown",false,[19,23,53,58,80,257,276,280,288,500],[20,21,6],"h1",{"id":22},"rendering-yaml-and-json-data",[24,25,26,27,31,32,37,38,45,46,52],"p",{},"Not all content is prose. Landing pages, config, navigation, and listings are\n",[28,29,30],"strong",{},"structured data",": a fixed shape you render with a layout you own. ",[33,34,36],"a",{"href":35},"https:\u002F\u002Fcomark-content-docs.vercel.app\u002F","Comark Content","\nhandles these with the ",[33,39,41],{"href":40},"https:\u002F\u002Fcomark-content-docs.vercel.app\u002Fplugins\u002Fbuilt-in\u002Fyaml",[42,43,44],"code",{},"yaml"," and\n",[33,47,49],{"href":48},"https:\u002F\u002Fcomark-content-docs.vercel.app\u002Fplugins\u002Fbuilt-in\u002Fjson",[42,50,51],{},"json"," plugins.",[54,55,57],"h2",{"id":56},"data-documents","Data documents",[24,59,60,61,64,65,64,68,71,72,75,76,79],{},"Each ",[42,62,63],{},".yaml"," \u002F ",[42,66,67],{},".yml",[42,69,70],{},".json"," file becomes a document whose ",[42,73,74],{},"data"," is the\nparsed object (its ",[42,77,78],{},"nodes"," are empty). Register the plugins once:",[81,82,86],"pre",{"language":83,"filename":84,"class":85},"ts","server\u002Fcontent.ts","shiki shiki-themes material-theme-lighter material-theme-palenight",[42,87,89,122,123,122,140,122,156,122,172,122,174,122,198,122,225,122,250],{"class":88},"language-ts",[90,91,94,98,102,106,109,112,115,119],"span",{"class":92,"style":93},"line","display: inline",[90,95,97],{"style":96},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[90,99,101],{"style":100},"color:#39ADB5;--shiki-dark:#89DDFF"," {",[90,103,105],{"style":104},"color:#90A4AE;--shiki-dark:#BABED8"," comarkContent",[90,107,108],{"style":100}," }",[90,110,111],{"style":96}," from",[90,113,114],{"style":100}," '",[90,116,118],{"style":117},"color:#91B859;--shiki-dark:#C3E88D","comark-content",[90,120,121],{"style":100},"'","\n",[90,124,125,127,130,133,135,138],{"class":92,"style":93},[90,126,97],{"style":96},[90,128,129],{"style":104}," fs ",[90,131,132],{"style":96},"from",[90,134,114],{"style":100},[90,136,137],{"style":117},"comark-content\u002Fsources\u002Ffs",[90,139,121],{"style":100},[90,141,142,144,147,149,151,154],{"class":92,"style":93},[90,143,97],{"style":96},[90,145,146],{"style":104}," yaml ",[90,148,132],{"style":96},[90,150,114],{"style":100},[90,152,153],{"style":117},"comark-content\u002Fplugins\u002Fyaml",[90,155,121],{"style":100},[90,157,158,160,163,165,167,170],{"class":92,"style":93},[90,159,97],{"style":96},[90,161,162],{"style":104}," json ",[90,164,132],{"style":96},[90,166,114],{"style":100},[90,168,169],{"style":117},"comark-content\u002Fplugins\u002Fjson",[90,171,121],{"style":100},[90,173],{"class":92,"style":93},[90,175,176,179,183,186,189,192,195],{"class":92,"style":93},[90,177,178],{"style":96},"export",[90,180,182],{"style":181},"color:#9C3EDA;--shiki-dark:#C792EA"," const",[90,184,185],{"style":104}," content ",[90,187,188],{"style":100},"=",[90,190,105],{"style":191},"color:#6182B8;--shiki-dark:#82AAFF",[90,193,194],{"style":104},"(",[90,196,197],{"style":100},"{",[90,199,200,204,207,210,212,214,217,219,222],{"class":92,"style":93},[90,201,203],{"style":202},"color:#E53935;--shiki-dark:#F07178","  source",[90,205,206],{"style":100},":",[90,208,209],{"style":191}," fs",[90,211,194],{"style":104},[90,213,121],{"style":100},[90,215,216],{"style":117},".\u002Fcontent",[90,218,121],{"style":100},[90,220,221],{"style":104},")",[90,223,224],{"style":100},",",[90,226,227,230,232,235,237,240,242,245,248],{"class":92,"style":93},[90,228,229],{"style":202},"  plugins",[90,231,206],{"style":100},[90,233,234],{"style":104}," [",[90,236,44],{"style":191},[90,238,239],{"style":104},"()",[90,241,224],{"style":100},[90,243,244],{"style":191}," json",[90,246,247],{"style":104},"()]",[90,249,224],{"style":100},[90,251,252,255],{"class":92,"style":93},[90,253,254],{"style":100},"}",[90,256,221],{"style":104},[24,258,259,260,263,264,267,268,271,272,275],{},"These documents behave like any other entry: ",[42,261,262],{},"content.get()",", ",[42,265,266],{},"content.list()",", and\n",[42,269,270],{},"content.query()"," all work, so a ",[42,273,274],{},"content\u002Flanding.yaml"," is fetchable by path just\nlike a Markdown page.",[54,277,279],{"id":278},"binding-data-to-components","Binding data to components",[24,281,282,283,287],{},"Because the file is data, ",[284,285,286],"em",{},"you"," decide how it renders. Fetch it and bind the\nfields into components in your template:",[81,289,292],{"language":290,"filename":291,"class":85},"vue","pages\u002Findex.vue",[42,293,295,122,321,122,385,122,417,122,426,122,428,122,437,122,445,122,459,122,473,122,487,122,492],{"class":294},"language-vue",[90,296,297,300,303,306,309,311,314,316,318],{"class":92,"style":93},[90,298,299],{"style":100},"\u003C",[90,301,302],{"style":202},"script",[90,304,305],{"style":181}," setup",[90,307,308],{"style":181}," lang",[90,310,188],{"style":100},[90,312,313],{"style":100},"\"",[90,315,83],{"style":117},[90,317,313],{"style":100},[90,319,320],{"style":100},">",[90,322,323,326,328,331,333,336,338,341,344,347,349,351,354,356,358,361,364,367,370,373,375,377,380,382],{"class":92,"style":93},[90,324,325],{"style":181},"const",[90,327,101],{"style":100},[90,329,330],{"style":202}," data",[90,332,206],{"style":100},[90,334,335],{"style":104}," page ",[90,337,254],{"style":100},[90,339,340],{"style":100}," =",[90,342,343],{"style":96}," await",[90,345,346],{"style":191}," useAsyncData",[90,348,194],{"style":104},[90,350,121],{"style":100},[90,352,353],{"style":117},"landing",[90,355,121],{"style":100},[90,357,224],{"style":100},[90,359,360],{"style":100}," ()",[90,362,363],{"style":181}," =>",[90,365,366],{"style":104}," clientContent",[90,368,369],{"style":100},".",[90,371,372],{"style":191},"get",[90,374,194],{"style":104},[90,376,121],{"style":100},[90,378,379],{"style":117},"\u002Flanding-yaml",[90,381,121],{"style":100},[90,383,384],{"style":104},"))",[90,386,387,389,392,394,397,399,401,403,406,408,411,414],{"class":92,"style":93},[90,388,325],{"style":181},[90,390,391],{"style":104}," data ",[90,393,188],{"style":100},[90,395,396],{"style":191}," computed",[90,398,194],{"style":104},[90,400,239],{"style":100},[90,402,363],{"style":181},[90,404,405],{"style":104}," page",[90,407,369],{"style":100},[90,409,410],{"style":104},"value",[90,412,413],{"style":100},"!.",[90,415,416],{"style":104},"data)",[90,418,419,422,424],{"class":92,"style":93},[90,420,421],{"style":100},"\u003C\u002F",[90,423,302],{"style":202},[90,425,320],{"style":100},[90,427],{"class":92,"style":93},[90,429,430,432,435],{"class":92,"style":93},[90,431,299],{"style":100},[90,433,434],{"style":202},"template",[90,436,320],{"style":100},[90,438,439,442],{"class":92,"style":93},[90,440,441],{"style":100},"  \u003C",[90,443,444],{"style":202},"UPageHero",[90,446,447,450,452,454,457],{"class":92,"style":93},[90,448,449],{"style":181},"    :title",[90,451,188],{"style":100},[90,453,313],{"style":100},[90,455,456],{"style":117},"data.hero.title",[90,458,313],{"style":100},[90,460,461,464,466,468,471],{"class":92,"style":93},[90,462,463],{"style":181},"    :description",[90,465,188],{"style":100},[90,467,313],{"style":100},[90,469,470],{"style":117},"data.hero.description",[90,472,313],{"style":100},[90,474,475,478,480,482,485],{"class":92,"style":93},[90,476,477],{"style":181},"    :links",[90,479,188],{"style":100},[90,481,313],{"style":100},[90,483,484],{"style":117},"data.hero.links",[90,486,313],{"style":100},[90,488,489],{"class":92,"style":93},[90,490,491],{"style":100},"  \u002F>",[90,493,494,496,498],{"class":92,"style":93},[90,495,421],{"style":100},[90,497,434],{"style":202},[90,499,320],{"style":100},[501,502,503,504,369],"note",{},"Reach for YAML or JSON when the shape is fixed and you want full control of the\nlayout. YAML is friendlier to hand-edit; JSON is handy when the data is\ngenerated or comes from an API. Both plugins build on ",[33,505,507],{"href":506},"https:\u002F\u002Fcomark.dev","comark",1785963366616]