[{"data":1,"prerenderedAt":693},["ShallowReactive",2],{"$f-xfxRc-D6LDCpQEdOoW-Gr1pO2noixcaQc2J7v4jYqs":3},{"slug":4,"title":5,"description":6,"pubDate":7,"tags":8,"tree":12},"nuxt-ui-integration","Integrating Comark with Nuxt UI","How the Comark + Nuxt UI integration works under the hood.","2026-01-10",[9,10,11],"comark","nuxt","integration",{"frontmatter":13,"meta":15,"nodes":16},{"title":5,"description":6,"pubDate":7,"tags":14},[9,10,11],{},[17,21,26,41,93,252,409,416,420,438,484,489,493,496,684],[18,19,20],"p",{},"This example uses Nuxt 4 with Comark as the Markdown renderer and Nuxt UI for styled prose components.",[22,23,25],"h2",{"id":24},"how-it-works","How it works",[18,27,28,29,33,34,33,37,40],{},"Instead of the typical ",[30,31,32],"code",{},"gray-matter"," + ",[30,35,36],{},"remark",[30,38,39],{},"rehype"," pipeline, we use Comark's framework-agnostic API:",[42,43,44,60,70,80],"ol",{},[45,46,47,51,52,55,56,59],"li",{},[48,49,50],"strong",{},"Read markdown files"," — Load ",[30,53,54],{},".md"," files from the ",[30,57,58],{},"content\u002Fposts\u002F"," directory via a server route",[45,61,62,65,66,69],{},[48,63,64],{},"Parse with Comark"," — Call ",[30,67,68],{},"parse()"," to build the AST and extract frontmatter",[45,71,72,75,76,79],{},[48,73,74],{},"Static generation"," — Use ",[30,77,78],{},"nuxt generate"," for full SSG",[45,81,82,75,85,88,89,92],{},[48,83,84],{},"Render with Vue",[30,86,87],{},"ComarkRenderer"," from ",[30,90,91],{},"@comark\u002Fnuxt"," with auto-discovered components",[94,95,99],"pre",{"language":96,"class":97,"tabindex":98},"ts","shiki shiki-themes material-theme-lighter material-theme-palenight","0",[30,100,102,111,112,111,141,111,158,111,160,111,186,111,206,111,214,111,216],{"class":101},"language-ts",[103,104,107],"span",{"class":105,"style":106},"line","display: inline",[103,108,110],{"style":109},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic","\u002F\u002F server\u002Fapi\u002Fposts\u002F[slug].get.ts","\n",[103,113,114,118,122,126,129,132,135,138],{"class":105,"style":106},[103,115,117],{"style":116},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[103,119,121],{"style":120},"color:#39ADB5;--shiki-dark:#89DDFF"," {",[103,123,125],{"style":124},"color:#90A4AE;--shiki-dark:#BABED8"," parse",[103,127,128],{"style":120}," }",[103,130,131],{"style":116}," from",[103,133,134],{"style":120}," '",[103,136,9],{"style":137},"color:#91B859;--shiki-dark:#C3E88D",[103,139,140],{"style":120},"'",[103,142,143,145,148,151,153,156],{"class":105,"style":106},[103,144,117],{"style":116},[103,146,147],{"style":124}," highlight ",[103,149,150],{"style":116},"from",[103,152,134],{"style":120},[103,154,155],{"style":137},"comark\u002Fplugins\u002Fhighlight",[103,157,140],{"style":120},[103,159],{"class":105,"style":106},[103,161,162,166,169,172,175,178,181,184],{"class":105,"style":106},[103,163,165],{"style":164},"color:#9C3EDA;--shiki-dark:#C792EA","const",[103,167,168],{"style":124}," tree ",[103,170,171],{"style":120},"=",[103,173,174],{"style":116}," await",[103,176,125],{"style":177},"color:#6182B8;--shiki-dark:#82AAFF",[103,179,180],{"style":124},"(content",[103,182,183],{"style":120},",",[103,185,121],{"style":120},[103,187,188,192,195,198,201,204],{"class":105,"style":106},[103,189,191],{"style":190},"color:#E53935;--shiki-dark:#F07178","  plugins",[103,193,194],{"style":120},":",[103,196,197],{"style":124}," [",[103,199,200],{"style":177},"highlight",[103,202,203],{"style":124},"()]",[103,205,183],{"style":120},[103,207,208,211],{"class":105,"style":106},[103,209,210],{"style":120},"}",[103,212,213],{"style":124},")",[103,215],{"class":105,"style":106},[103,217,218,221,223,226,228,231,233,236,238,241,243,246,248,250],{"class":105,"style":106},[103,219,220],{"style":116},"return",[103,222,121],{"style":120},[103,224,225],{"style":124}," slug",[103,227,183],{"style":120},[103,229,230],{"style":124}," title",[103,232,183],{"style":120},[103,234,235],{"style":124}," description",[103,237,183],{"style":120},[103,239,240],{"style":124}," pubDate",[103,242,183],{"style":120},[103,244,245],{"style":124}," tags",[103,247,183],{"style":120},[103,249,168],{"style":124},[103,251,210],{"style":120},[94,253,255],{"language":254,"class":97,"tabindex":98},"vue",[30,256,258,111,263,111,289,111,304,111,359,111,368,111,370,111,379,111,401],{"class":257},"language-vue",[103,259,260],{"class":105,"style":106},[103,261,262],{"style":109},"\u003C!-- app\u002Fpages\u002Fblog\u002F[slug].vue -->",[103,264,265,268,271,274,277,279,282,284,286],{"class":105,"style":106},[103,266,267],{"style":120},"\u003C",[103,269,270],{"style":190},"script",[103,272,273],{"style":164}," setup",[103,275,276],{"style":164}," lang",[103,278,171],{"style":120},[103,280,281],{"style":120},"\"",[103,283,96],{"style":137},[103,285,281],{"style":120},[103,287,288],{"style":120},">",[103,290,291,293,296,298,301],{"class":105,"style":106},[103,292,165],{"style":164},[103,294,295],{"style":124}," route ",[103,297,171],{"style":120},[103,299,300],{"style":177}," useRoute",[103,302,303],{"style":124},"()",[103,305,306,308,310,313,315,318,320,323,325,328,331,334,337,340,343,346,349,351,354,357],{"class":105,"style":106},[103,307,165],{"style":164},[103,309,121],{"style":120},[103,311,312],{"style":190}," data",[103,314,194],{"style":120},[103,316,317],{"style":124}," post ",[103,319,210],{"style":120},[103,321,322],{"style":120}," =",[103,324,174],{"style":116},[103,326,327],{"style":177}," useFetch",[103,329,330],{"style":124},"(",[103,332,333],{"style":120},"`",[103,335,336],{"style":137},"\u002Fapi\u002Fposts\u002F",[103,338,339],{"style":120},"${",[103,341,342],{"style":124},"route",[103,344,345],{"style":120},".",[103,347,348],{"style":124},"params",[103,350,345],{"style":120},[103,352,353],{"style":124},"slug",[103,355,356],{"style":120},"}`",[103,358,213],{"style":124},[103,360,361,364,366],{"class":105,"style":106},[103,362,363],{"style":120},"\u003C\u002F",[103,365,270],{"style":190},[103,367,288],{"style":120},[103,369],{"class":105,"style":106},[103,371,372,374,377],{"class":105,"style":106},[103,373,267],{"style":120},[103,375,376],{"style":190},"template",[103,378,288],{"style":120},[103,380,381,384,386,389,391,393,396,398],{"class":105,"style":106},[103,382,383],{"style":120},"  \u003C",[103,385,87],{"style":190},[103,387,388],{"style":164}," :tree",[103,390,171],{"style":120},[103,392,281],{"style":120},[103,394,395],{"style":137},"post.tree",[103,397,281],{"style":120},[103,399,400],{"style":120}," \u002F>",[103,402,403,405,407],{"class":105,"style":106},[103,404,363],{"style":120},[103,406,376],{"style":190},[103,408,288],{"style":120},[410,411,413,415],"alert",{"type":412},"info",[30,414,91],{}," automatically detects Nuxt UI and enables its prose components — no extra configuration needed.",[22,417,419],{"id":418},"nuxt-ui-prose-components","Nuxt UI prose components",[18,421,422,423,425,426,429,430,433,434,437],{},"When both ",[30,424,91],{}," and ",[30,427,428],{},"@nuxt\u002Fui"," are installed, the module sets ",[30,431,432],{},"ui.content = true",". This registers Nuxt UI's ",[30,435,436],{},"Prose*"," components globally:",[439,440,441,454,460,469,481],"ul",{},[45,442,443,446,447,446,450,453],{},[30,444,445],{},"ProseH1",", ",[30,448,449],{},"ProseH2",[30,451,452],{},"ProseH3"," for headings",[45,455,456,459],{},[30,457,458],{},"ProseP"," for paragraphs",[45,461,462,446,465,468],{},[30,463,464],{},"ProseCode",[30,466,467],{},"ProsePre"," for code",[45,470,471,446,474,446,477,480],{},[30,472,473],{},"ProseUl",[30,475,476],{},"ProseOl",[30,478,479],{},"ProseLi"," for lists",[45,482,483],{},"And more…",[18,485,486,488],{},[30,487,87],{}," automatically picks these up — no manual wiring required.",[22,490,492],{"id":491},"custom-components","Custom components",[18,494,495],{},"You can still register custom components. Each one receives props and children from the Comark AST:",[94,497,498],{"language":254,"class":97,"tabindex":98},[30,499,500,111,505,111,525,111,578,111,586,111,588,111,596,111,641,111,667,111,676],{"class":257},[103,501,502],{"class":105,"style":106},[103,503,504],{"style":109},"\u003C!-- app\u002Fcomponents\u002FAlert.vue -->",[103,506,507,509,511,513,515,517,519,521,523],{"class":105,"style":106},[103,508,267],{"style":120},[103,510,270],{"style":190},[103,512,273],{"style":164},[103,514,276],{"style":164},[103,516,171],{"style":120},[103,518,281],{"style":120},[103,520,96],{"style":137},[103,522,281],{"style":120},[103,524,288],{"style":120},[103,526,527,530,533,536,539,541,543,545,548,550,553,555,557,559,562,564,566,568,571,573,576],{"class":105,"style":106},[103,528,529],{"style":177},"defineProps",[103,531,532],{"style":120},"\u003C{",[103,534,535],{"style":190}," type",[103,537,538],{"style":120},"?:",[103,540,134],{"style":120},[103,542,412],{"style":137},[103,544,140],{"style":120},[103,546,547],{"style":120}," |",[103,549,134],{"style":120},[103,551,552],{"style":137},"warning",[103,554,140],{"style":120},[103,556,547],{"style":120},[103,558,134],{"style":120},[103,560,561],{"style":137},"success",[103,563,140],{"style":120},[103,565,547],{"style":120},[103,567,134],{"style":120},[103,569,570],{"style":137},"danger",[103,572,140],{"style":120},[103,574,575],{"style":120}," }>",[103,577,303],{"style":124},[103,579,580,582,584],{"class":105,"style":106},[103,581,363],{"style":120},[103,583,270],{"style":190},[103,585,288],{"style":120},[103,587],{"class":105,"style":106},[103,589,590,592,594],{"class":105,"style":106},[103,591,267],{"style":120},[103,593,376],{"style":190},[103,595,288],{"style":120},[103,597,598,600,603,606,608,610,613,615,618,620,622,625,627,630,632,634,637,639],{"class":105,"style":106},[103,599,383],{"style":120},[103,601,602],{"style":190},"UAlert",[103,604,605],{"style":164}," :color",[103,607,171],{"style":120},[103,609,281],{"style":120},[103,611,612],{"style":137},"...",[103,614,281],{"style":120},[103,616,617],{"style":164}," variant",[103,619,171],{"style":120},[103,621,281],{"style":120},[103,623,624],{"style":137},"soft",[103,626,281],{"style":120},[103,628,629],{"style":164}," class",[103,631,171],{"style":120},[103,633,281],{"style":120},[103,635,636],{"style":137},"my-4",[103,638,281],{"style":120},[103,640,288],{"style":120},[103,642,643,646,648,651,654,657,660,663,665],{"class":105,"style":106},[103,644,645],{"style":120},"    \u003C",[103,647,376],{"style":190},[103,649,650],{"style":120}," #",[103,652,653],{"style":164},"description",[103,655,656],{"style":120},">\u003C",[103,658,659],{"style":190},"slot",[103,661,662],{"style":120}," \u002F>\u003C\u002F",[103,664,376],{"style":190},[103,666,288],{"style":120},[103,668,669,672,674],{"class":105,"style":106},[103,670,671],{"style":120},"  \u003C\u002F",[103,673,602],{"style":190},[103,675,288],{"style":120},[103,677,678,680,682],{"class":105,"style":106},[103,679,363],{"style":120},[103,681,376],{"style":190},[103,683,288],{"style":120},[18,685,686,687,446,690,692],{},"Since Nuxt auto-registers components in ",[30,688,689],{},"app\u002Fcomponents\u002F",[30,691,87],{}," resolves them automatically.",1777478250999]