[{"data":1,"prerenderedAt":2917},["ShallowReactive",2],{"navigation_docs":3,"-docs-advanced-fulltext-search":205,"-docs-advanced-fulltext-search-surround":1664,"search-data":1669},[4,24,51,73,95,112,158,171],{"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":50},"Collections","i-lucide-database","/docs/collections","docs/2.collections",[30,34,38,42,46],{"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",{"title":43,"path":44,"stem":45},"Validators","/docs/collections/validators","docs/2.collections/4.validators",{"title":47,"path":48,"stem":49},"Components","/docs/collections/inherit-schema-from-component","docs/2.collections/5.inherit-schema-from-component",false,{"title":52,"icon":53,"path":54,"stem":55,"children":56,"page":50},"Files","i-lucide-file","/docs/files","docs/3.files",[57,61,65,69],{"title":58,"path":59,"stem":60},"Markdown","/docs/files/markdown","docs/3.files/1.markdown",{"title":62,"path":63,"stem":64},"YAML","/docs/files/yaml","docs/3.files/2.yaml",{"title":66,"path":67,"stem":68},"JSON","/docs/files/json","docs/3.files/3.json",{"title":70,"path":71,"stem":72},"CSV","/docs/files/csv","docs/3.files/4.csv",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":50},"Query Utils","i-lucide-square-function","/docs/utils","docs/4.utils",[79,83,87,91],{"title":80,"path":81,"stem":82},"queryCollection","/docs/utils/query-collection","docs/4.utils/1.query-collection",{"title":84,"path":85,"stem":86},"queryCollectionNavigation","/docs/utils/query-collection-navigation","docs/4.utils/2.query-collection-navigation",{"title":88,"path":89,"stem":90},"queryCollectionItemSurroundings","/docs/utils/query-collection-item-surroundings","docs/4.utils/3.query-collection-item-surroundings",{"title":92,"path":93,"stem":94},"queryCollectionSearchSections","/docs/utils/query-collection-search-sections","docs/4.utils/4.query-collection-search-sections",{"title":47,"icon":96,"path":97,"stem":98,"children":99,"page":50},"i-lucide-square-code","/docs/components","docs/5.components",[100,104,108],{"title":101,"path":102,"stem":103},"ContentRenderer","/docs/components/content-renderer","docs/5.components/0.content-renderer",{"title":105,"path":106,"stem":107},"Slot","/docs/components/slot","docs/5.components/1.slot",{"title":109,"path":110,"stem":111},"Prose Components","/docs/components/prose","docs/5.components/2.prose",{"title":113,"icon":114,"path":115,"stem":116,"children":117,"page":50},"Deploy","i-lucide-cloud-upload","/docs/deploy","docs/6.deploy",[118,122,126,130,134,138,142,146,150,154],{"title":119,"path":120,"stem":121},"Server","/docs/deploy/server","docs/6.deploy/1.server",{"title":123,"path":124,"stem":125},"Static","/docs/deploy/static","docs/6.deploy/10.static",{"title":127,"path":128,"stem":129},"Serverless","/docs/deploy/serverless","docs/6.deploy/2.serverless",{"title":131,"path":132,"stem":133},"NuxtHub","/docs/deploy/nuxthub","docs/6.deploy/3.nuxthub",{"title":135,"path":136,"stem":137},"Cloudflare Pages","/docs/deploy/cloudflare-pages","docs/6.deploy/4.cloudflare-pages",{"title":139,"path":140,"stem":141},"Cloudflare Workers","/docs/deploy/cloudflare-workers","docs/6.deploy/5.cloudflare-workers",{"title":143,"path":144,"stem":145},"Vercel","/docs/deploy/vercel","docs/6.deploy/6.vercel",{"title":147,"path":148,"stem":149},"Netlify","/docs/deploy/netlify","docs/6.deploy/7.netlify",{"title":151,"path":152,"stem":153},"AWS Amplify","/docs/deploy/aws-amplify","docs/6.deploy/8.aws-amplify",{"title":155,"path":156,"stem":157},"Docker","/docs/deploy/docker","docs/6.deploy/9.docker",{"title":159,"icon":114,"path":160,"stem":161,"children":162,"page":50},"Integrations","/docs/integrations","docs/7.integrations",[163,167],{"title":164,"path":165,"stem":166},"Nuxt i18n","/docs/integrations/i18n","docs/7.integrations/01.i18n",{"title":168,"path":169,"stem":170},"Nuxt LLMs","/docs/integrations/llms","docs/7.integrations/02.llms",{"title":172,"icon":173,"path":174,"stem":175,"children":176,"page":50},"Advanced","i-lucide-code-xml","/docs/advanced","docs/8.advanced",[177,181,185,189,193,197,201],{"title":178,"path":179,"stem":180},"Full-Text Search","/docs/advanced/fulltext-search","docs/8.advanced/1.fulltext-search",{"title":182,"path":183,"stem":184},"Raw Content","/docs/advanced/raw-content","docs/8.advanced/2.raw-content",{"title":186,"path":187,"stem":188},"SQL Storage","/docs/advanced/database","docs/8.advanced/3.database",{"title":190,"path":191,"stem":192},"Debugging tools","/docs/advanced/tools","docs/8.advanced/4.tools",{"title":194,"path":195,"stem":196},"Hooks","/docs/advanced/hooks","docs/8.advanced/5.hooks",{"title":198,"path":199,"stem":200},"Custom Source","/docs/advanced/custom-source","docs/8.advanced/6.custom-source",{"title":202,"path":203,"stem":204},"Transformers","/docs/advanced/transformers","docs/8.advanced/8.transformers",{"id":206,"title":178,"body":207,"description":1658,"extension":1659,"links":1660,"meta":1661,"navigation":433,"path":179,"seo":1662,"stem":180,"__hash__":1663},"docs/docs/8.advanced/1.fulltext-search.md",{"type":208,"value":209,"toc":1653},"minimark",[210,240,245,255,262,572,576,581,1154,1158,1164,1649],[211,212,213,214,220,221,227,228,233,234,239],"p",{},"Content module exposes a handy utility ",[215,216,217],"a",{"href":93},[218,219,92],"code",{}," to break down content files into searchable sections. This is useful for implementing full-text search in your website. You can use the result of this utility in combination with ",[215,222,226],{"href":223,"rel":224},"https://ui.nuxt.com/pro/components/content-search",[225],"nofollow","Nuxt UI Content Search"," or other search libraries like ",[215,229,232],{"href":230,"rel":231},"https://fusejs.io/",[225],"Fuse.js",", ",[215,235,238],{"href":236,"rel":237},"https://lucaong.github.io/minisearch",[225],"minisearch",", etc.",[241,242,244],"h2",{"id":243},"nuxt-ui","Nuxt UI",[211,246,247,248,250,251,254],{},"Nuxt UI provides a ready to use component for full-text search. You can use it by passing the result of ",[218,249,92],{}," to the ",[218,252,253],{},"files"," prop of the component.",[211,256,257,258,261],{},"Read more about ",[215,259,226],{"href":223,"rel":260},[225],".",[263,264,265,564],"code-group",{},[266,267,273],"pre",{"className":268,"code":269,"filename":270,"language":271,"meta":272,"style":272},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))\nconst { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))\n\nconst searchTerm = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContentSearch\n v-model:search-term=\"searchTerm\"\n :files=\"files\"\n :navigation=\"navigation\"\n :fuse=\"{ resultLimit: 42 }\"\n />\n\u003C/template>\n","UContentSearchExample.vue","vue","",[218,274,275,310,378,428,435,456,466,471,481,490,506,520,534,549,555],{"__ignoreMap":272},[276,277,280,284,288,292,295,298,301,305,307],"span",{"class":278,"line":279},"line",1,[276,281,283],{"class":282},"sMK4o","\u003C",[276,285,287],{"class":286},"swJcz","script",[276,289,291],{"class":290},"spNyl"," setup",[276,293,294],{"class":290}," lang",[276,296,297],{"class":282},"=",[276,299,300],{"class":282},"\"",[276,302,304],{"class":303},"sfazB","ts",[276,306,300],{"class":282},[276,308,309],{"class":282},">\n",[276,311,313,316,319,322,325,329,332,335,339,343,346,349,352,354,357,360,363,366,368,370,373,375],{"class":278,"line":312},2,[276,314,315],{"class":290},"const",[276,317,318],{"class":282}," {",[276,320,321],{"class":286}," data",[276,323,324],{"class":282},":",[276,326,328],{"class":327},"sTEyZ"," navigation ",[276,330,331],{"class":282},"}",[276,333,334],{"class":282}," =",[276,336,338],{"class":337},"s7zQu"," await",[276,340,342],{"class":341},"s2Zo4"," useAsyncData",[276,344,345],{"class":327},"(",[276,347,348],{"class":282},"'",[276,350,351],{"class":303},"navigation",[276,353,348],{"class":282},[276,355,356],{"class":282},",",[276,358,359],{"class":282}," ()",[276,361,362],{"class":290}," =>",[276,364,365],{"class":341}," queryCollectionNavigation",[276,367,345],{"class":327},[276,369,348],{"class":282},[276,371,372],{"class":303},"docs",[276,374,348],{"class":282},[276,376,377],{"class":327},"))\n",[276,379,381,383,385,387,389,392,394,396,398,400,402,404,407,409,411,413,415,418,420,422,424,426],{"class":278,"line":380},3,[276,382,315],{"class":290},[276,384,318],{"class":282},[276,386,321],{"class":286},[276,388,324],{"class":282},[276,390,391],{"class":327}," files ",[276,393,331],{"class":282},[276,395,334],{"class":282},[276,397,338],{"class":337},[276,399,342],{"class":341},[276,401,345],{"class":327},[276,403,348],{"class":282},[276,405,406],{"class":303},"search",[276,408,348],{"class":282},[276,410,356],{"class":282},[276,412,359],{"class":282},[276,414,362],{"class":290},[276,416,417],{"class":341}," queryCollectionSearchSections",[276,419,345],{"class":327},[276,421,348],{"class":282},[276,423,372],{"class":303},[276,425,348],{"class":282},[276,427,377],{"class":327},[276,429,431],{"class":278,"line":430},4,[276,432,434],{"emptyLinePlaceholder":433},true,"\n",[276,436,438,440,443,445,448,450,453],{"class":278,"line":437},5,[276,439,315],{"class":290},[276,441,442],{"class":327}," searchTerm ",[276,444,297],{"class":282},[276,446,447],{"class":341}," ref",[276,449,345],{"class":327},[276,451,452],{"class":282},"''",[276,454,455],{"class":327},")\n",[276,457,459,462,464],{"class":278,"line":458},6,[276,460,461],{"class":282},"\u003C/",[276,463,287],{"class":286},[276,465,309],{"class":282},[276,467,469],{"class":278,"line":468},7,[276,470,434],{"emptyLinePlaceholder":433},[276,472,474,476,479],{"class":278,"line":473},8,[276,475,283],{"class":282},[276,477,478],{"class":286},"template",[276,480,309],{"class":282},[276,482,484,487],{"class":278,"line":483},9,[276,485,486],{"class":282}," \u003C",[276,488,489],{"class":286},"UContentSearch\n",[276,491,493,496,498,500,503],{"class":278,"line":492},10,[276,494,495],{"class":290}," v-model:search-term",[276,497,297],{"class":282},[276,499,300],{"class":282},[276,501,502],{"class":303},"searchTerm",[276,504,505],{"class":282},"\"\n",[276,507,509,512,514,516,518],{"class":278,"line":508},11,[276,510,511],{"class":290}," :files",[276,513,297],{"class":282},[276,515,300],{"class":282},[276,517,253],{"class":303},[276,519,505],{"class":282},[276,521,523,526,528,530,532],{"class":278,"line":522},12,[276,524,525],{"class":290}," :navigation",[276,527,297],{"class":282},[276,529,300],{"class":282},[276,531,351],{"class":303},[276,533,505],{"class":282},[276,535,537,540,542,544,547],{"class":278,"line":536},13,[276,538,539],{"class":290}," :fuse",[276,541,297],{"class":282},[276,543,300],{"class":282},[276,545,546],{"class":303},"{ resultLimit: 42 }",[276,548,505],{"class":282},[276,550,552],{"class":278,"line":551},14,[276,553,554],{"class":282}," />\n",[276,556,558,560,562],{"class":278,"line":557},15,[276,559,461],{"class":282},[276,561,478],{"class":286},[276,563,309],{"class":282},[565,566,569],"code-preview",{"icon":567,"label":568},"i-lucide-eye","Preview",[570,571],"example-fulltext-content-search",{},[241,573,575],{"id":574},"minisearch-example","MiniSearch example",[211,577,257,578,261],{},[215,579,238],{"href":236,"rel":580},[225],[263,582,583,1149],{},[266,584,587],{"className":268,"code":585,"filename":586,"language":271,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\nimport MiniSearch from 'minisearch'\n\nconst query = ref('')\nconst { data } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))\n\nconst miniSearch = new MiniSearch({\n fields: ['title', 'content'],\n storeFields: ['title', 'content'],\n searchOptions: {\n prefix: true,\n fuzzy: 0.2,\n },\n})\n\n// Add data to the MiniSearch instance\nminiSearch.addAll(toValue(data.value))\nconst result = computed(() => miniSearch.search(toValue(query)))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"p-4\">\n \u003CUCard>\n \u003CUInput v-model=\"query\" placeholder=\"Search...\" />\n \u003Cul>\n \u003Cli v-for=\"link of result\" :key=\"link.id\" class=\"mt-2\">\n \u003CNuxtLink :to=\"link.id\">{{ link.title }}\u003C/NuxtLink>\n \u003Cp class=\"text-gray-500 text-xs\">{{ link.content }}\u003C/p>\n \u003C/li>\n \u003C/ul>\n \u003C/UCard>\n \u003C/UContainer>\n\u003C/template>\n","MiniSearchExample.vue",[218,588,589,609,628,632,649,692,696,716,748,775,785,798,811,816,822,826,833,857,891,900,905,914,936,947,983,993,1039,1071,1100,1110,1120,1130,1140],{"__ignoreMap":272},[276,590,591,593,595,597,599,601,603,605,607],{"class":278,"line":279},[276,592,283],{"class":282},[276,594,287],{"class":286},[276,596,291],{"class":290},[276,598,294],{"class":290},[276,600,297],{"class":282},[276,602,300],{"class":282},[276,604,304],{"class":303},[276,606,300],{"class":282},[276,608,309],{"class":282},[276,610,611,614,617,620,623,625],{"class":278,"line":312},[276,612,613],{"class":337},"import",[276,615,616],{"class":327}," MiniSearch ",[276,618,619],{"class":337},"from",[276,621,622],{"class":282}," '",[276,624,238],{"class":303},[276,626,627],{"class":282},"'\n",[276,629,630],{"class":278,"line":380},[276,631,434],{"emptyLinePlaceholder":433},[276,633,634,636,639,641,643,645,647],{"class":278,"line":430},[276,635,315],{"class":290},[276,637,638],{"class":327}," query ",[276,640,297],{"class":282},[276,642,447],{"class":341},[276,644,345],{"class":327},[276,646,452],{"class":282},[276,648,455],{"class":327},[276,650,651,653,655,658,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690],{"class":278,"line":437},[276,652,315],{"class":290},[276,654,318],{"class":282},[276,656,657],{"class":327}," data ",[276,659,331],{"class":282},[276,661,334],{"class":282},[276,663,338],{"class":337},[276,665,342],{"class":341},[276,667,345],{"class":327},[276,669,348],{"class":282},[276,671,406],{"class":303},[276,673,348],{"class":282},[276,675,356],{"class":282},[276,677,359],{"class":282},[276,679,362],{"class":290},[276,681,417],{"class":341},[276,683,345],{"class":327},[276,685,348],{"class":282},[276,687,372],{"class":303},[276,689,348],{"class":282},[276,691,377],{"class":327},[276,693,694],{"class":278,"line":458},[276,695,434],{"emptyLinePlaceholder":433},[276,697,698,700,703,705,708,711,713],{"class":278,"line":468},[276,699,315],{"class":290},[276,701,702],{"class":327}," miniSearch ",[276,704,297],{"class":282},[276,706,707],{"class":282}," new",[276,709,710],{"class":341}," MiniSearch",[276,712,345],{"class":327},[276,714,715],{"class":282},"{\n",[276,717,718,721,723,726,728,731,733,735,737,740,742,745],{"class":278,"line":473},[276,719,720],{"class":286}," fields",[276,722,324],{"class":282},[276,724,725],{"class":327}," [",[276,727,348],{"class":282},[276,729,730],{"class":303},"title",[276,732,348],{"class":282},[276,734,356],{"class":282},[276,736,622],{"class":282},[276,738,739],{"class":303},"content",[276,741,348],{"class":282},[276,743,744],{"class":327},"]",[276,746,747],{"class":282},",\n",[276,749,750,753,755,757,759,761,763,765,767,769,771,773],{"class":278,"line":483},[276,751,752],{"class":286}," storeFields",[276,754,324],{"class":282},[276,756,725],{"class":327},[276,758,348],{"class":282},[276,760,730],{"class":303},[276,762,348],{"class":282},[276,764,356],{"class":282},[276,766,622],{"class":282},[276,768,739],{"class":303},[276,770,348],{"class":282},[276,772,744],{"class":327},[276,774,747],{"class":282},[276,776,777,780,782],{"class":278,"line":492},[276,778,779],{"class":286}," searchOptions",[276,781,324],{"class":282},[276,783,784],{"class":282}," {\n",[276,786,787,790,792,796],{"class":278,"line":508},[276,788,789],{"class":286}," prefix",[276,791,324],{"class":282},[276,793,795],{"class":794},"sfNiH"," true",[276,797,747],{"class":282},[276,799,800,803,805,809],{"class":278,"line":522},[276,801,802],{"class":286}," fuzzy",[276,804,324],{"class":282},[276,806,808],{"class":807},"sbssI"," 0.2",[276,810,747],{"class":282},[276,812,813],{"class":278,"line":536},[276,814,815],{"class":282}," },\n",[276,817,818,820],{"class":278,"line":551},[276,819,331],{"class":282},[276,821,455],{"class":327},[276,823,824],{"class":278,"line":557},[276,825,434],{"emptyLinePlaceholder":433},[276,827,829],{"class":278,"line":828},16,[276,830,832],{"class":831},"sHwdD","// Add data to the MiniSearch instance\n",[276,834,836,839,841,844,846,849,852,854],{"class":278,"line":835},17,[276,837,838],{"class":327},"miniSearch",[276,840,261],{"class":282},[276,842,843],{"class":341},"addAll",[276,845,345],{"class":327},[276,847,848],{"class":341},"toValue",[276,850,851],{"class":327},"(data",[276,853,261],{"class":282},[276,855,856],{"class":327},"value))\n",[276,858,860,862,865,867,870,872,875,877,880,882,884,886,888],{"class":278,"line":859},18,[276,861,315],{"class":290},[276,863,864],{"class":327}," result ",[276,866,297],{"class":282},[276,868,869],{"class":341}," computed",[276,871,345],{"class":327},[276,873,874],{"class":282},"()",[276,876,362],{"class":290},[276,878,879],{"class":327}," miniSearch",[276,881,261],{"class":282},[276,883,406],{"class":341},[276,885,345],{"class":327},[276,887,848],{"class":341},[276,889,890],{"class":327},"(query)))\n",[276,892,894,896,898],{"class":278,"line":893},19,[276,895,461],{"class":282},[276,897,287],{"class":286},[276,899,309],{"class":282},[276,901,903],{"class":278,"line":902},20,[276,904,434],{"emptyLinePlaceholder":433},[276,906,908,910,912],{"class":278,"line":907},21,[276,909,283],{"class":282},[276,911,478],{"class":286},[276,913,309],{"class":282},[276,915,917,919,922,925,927,929,932,934],{"class":278,"line":916},22,[276,918,486],{"class":282},[276,920,921],{"class":286},"UContainer",[276,923,924],{"class":290}," class",[276,926,297],{"class":282},[276,928,300],{"class":282},[276,930,931],{"class":303},"p-4",[276,933,300],{"class":282},[276,935,309],{"class":282},[276,937,939,942,945],{"class":278,"line":938},23,[276,940,941],{"class":282}," \u003C",[276,943,944],{"class":286},"UCard",[276,946,309],{"class":282},[276,948,950,953,956,959,961,963,966,968,971,973,975,978,980],{"class":278,"line":949},24,[276,951,952],{"class":282}," \u003C",[276,954,955],{"class":286},"UInput",[276,957,958],{"class":290}," v-model",[276,960,297],{"class":282},[276,962,300],{"class":282},[276,964,965],{"class":303},"query",[276,967,300],{"class":282},[276,969,970],{"class":290}," placeholder",[276,972,297],{"class":282},[276,974,300],{"class":282},[276,976,977],{"class":303},"Search...",[276,979,300],{"class":282},[276,981,982],{"class":282}," />\n",[276,984,986,988,991],{"class":278,"line":985},25,[276,987,952],{"class":282},[276,989,990],{"class":286},"ul",[276,992,309],{"class":282},[276,994,996,999,1002,1005,1007,1009,1012,1014,1017,1019,1021,1024,1026,1028,1030,1032,1035,1037],{"class":278,"line":995},26,[276,997,998],{"class":282}," \u003C",[276,1000,1001],{"class":286},"li",[276,1003,1004],{"class":290}," v-for",[276,1006,297],{"class":282},[276,1008,300],{"class":282},[276,1010,1011],{"class":303},"link of result",[276,1013,300],{"class":282},[276,1015,1016],{"class":290}," :key",[276,1018,297],{"class":282},[276,1020,300],{"class":282},[276,1022,1023],{"class":303},"link.id",[276,1025,300],{"class":282},[276,1027,924],{"class":290},[276,1029,297],{"class":282},[276,1031,300],{"class":282},[276,1033,1034],{"class":303},"mt-2",[276,1036,300],{"class":282},[276,1038,309],{"class":282},[276,1040,1042,1045,1048,1051,1053,1055,1057,1059,1062,1065,1067,1069],{"class":278,"line":1041},27,[276,1043,1044],{"class":282}," \u003C",[276,1046,1047],{"class":286},"NuxtLink",[276,1049,1050],{"class":290}," :to",[276,1052,297],{"class":282},[276,1054,300],{"class":282},[276,1056,1023],{"class":303},[276,1058,300],{"class":282},[276,1060,1061],{"class":282},">",[276,1063,1064],{"class":327},"{{ link.title }}",[276,1066,461],{"class":282},[276,1068,1047],{"class":286},[276,1070,309],{"class":282},[276,1072,1074,1076,1078,1080,1082,1084,1087,1089,1091,1094,1096,1098],{"class":278,"line":1073},28,[276,1075,1044],{"class":282},[276,1077,211],{"class":286},[276,1079,924],{"class":290},[276,1081,297],{"class":282},[276,1083,300],{"class":282},[276,1085,1086],{"class":303},"text-gray-500 text-xs",[276,1088,300],{"class":282},[276,1090,1061],{"class":282},[276,1092,1093],{"class":327},"{{ link.content }}",[276,1095,461],{"class":282},[276,1097,211],{"class":286},[276,1099,309],{"class":282},[276,1101,1103,1106,1108],{"class":278,"line":1102},29,[276,1104,1105],{"class":282}," \u003C/",[276,1107,1001],{"class":286},[276,1109,309],{"class":282},[276,1111,1113,1116,1118],{"class":278,"line":1112},30,[276,1114,1115],{"class":282}," \u003C/",[276,1117,990],{"class":286},[276,1119,309],{"class":282},[276,1121,1123,1126,1128],{"class":278,"line":1122},31,[276,1124,1125],{"class":282}," \u003C/",[276,1127,944],{"class":286},[276,1129,309],{"class":282},[276,1131,1133,1136,1138],{"class":278,"line":1132},32,[276,1134,1135],{"class":282}," \u003C/",[276,1137,921],{"class":286},[276,1139,309],{"class":282},[276,1141,1143,1145,1147],{"class":278,"line":1142},33,[276,1144,461],{"class":282},[276,1146,478],{"class":286},[276,1148,309],{"class":282},[565,1150,1151],{"icon":567,"label":568},[1152,1153],"example-fulltext-mini-search",{},[241,1155,1157],{"id":1156},"fusejs-example","Fuse.js example",[211,1159,257,1160,261],{},[215,1161,232],{"href":1162,"rel":1163},"https://fusejs.io",[225],[263,1165,1166,1644],{},[266,1167,1170],{"className":268,"code":1168,"filename":1169,"language":271,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\nimport Fuse from 'fuse.js'\n\nconst query = ref('')\nconst { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))\n\nconst fuse = new Fuse(data.value, {\n keys: ['title', 'description']\n})\n\nconst result = computed(() => fuse.search(toValue(query)).slice(0, 10))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"p-4\">\n \u003CUCard>\n \u003CUInput v-model=\"query\" placeholder=\"Search...\" class=\"w-full\" />\n \u003Cul>\n \u003Cli v-for=\"link of result\" :key=\"link.item.id\" class=\"mt-2\">\n \u003CUButton variant=\"ghost\" class=\"w-full\" :to=\"link.item.id\">\n {{ link.item.title }}\n \u003Cspan class=\"text-gray-500 text-xs\">\n {{ link.item.content?.slice(0, 100) }}...\n \u003C/span>\n \u003C/UButton>\n \u003C/li>\n \u003C/ul>\n \u003C/UCard>\n \u003C/UContainer>\n\u003C/template>\n","FusejsExample.vue",[218,1171,1172,1192,1208,1212,1228,1271,1275,1300,1327,1333,1337,1384,1392,1396,1404,1422,1430,1469,1477,1516,1557,1562,1581,1586,1595,1604,1612,1620,1628,1636],{"__ignoreMap":272},[276,1173,1174,1176,1178,1180,1182,1184,1186,1188,1190],{"class":278,"line":279},[276,1175,283],{"class":282},[276,1177,287],{"class":286},[276,1179,291],{"class":290},[276,1181,294],{"class":290},[276,1183,297],{"class":282},[276,1185,300],{"class":282},[276,1187,304],{"class":303},[276,1189,300],{"class":282},[276,1191,309],{"class":282},[276,1193,1194,1196,1199,1201,1203,1206],{"class":278,"line":312},[276,1195,613],{"class":337},[276,1197,1198],{"class":327}," Fuse ",[276,1200,619],{"class":337},[276,1202,622],{"class":282},[276,1204,1205],{"class":303},"fuse.js",[276,1207,627],{"class":282},[276,1209,1210],{"class":278,"line":380},[276,1211,434],{"emptyLinePlaceholder":433},[276,1213,1214,1216,1218,1220,1222,1224,1226],{"class":278,"line":430},[276,1215,315],{"class":290},[276,1217,638],{"class":327},[276,1219,297],{"class":282},[276,1221,447],{"class":341},[276,1223,345],{"class":327},[276,1225,452],{"class":282},[276,1227,455],{"class":327},[276,1229,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269],{"class":278,"line":437},[276,1231,315],{"class":290},[276,1233,318],{"class":282},[276,1235,657],{"class":327},[276,1237,331],{"class":282},[276,1239,334],{"class":282},[276,1241,338],{"class":337},[276,1243,342],{"class":341},[276,1245,345],{"class":327},[276,1247,348],{"class":282},[276,1249,1250],{"class":303},"search-data",[276,1252,348],{"class":282},[276,1254,356],{"class":282},[276,1256,359],{"class":282},[276,1258,362],{"class":290},[276,1260,417],{"class":341},[276,1262,345],{"class":327},[276,1264,348],{"class":282},[276,1266,372],{"class":303},[276,1268,348],{"class":282},[276,1270,377],{"class":327},[276,1272,1273],{"class":278,"line":458},[276,1274,434],{"emptyLinePlaceholder":433},[276,1276,1277,1279,1282,1284,1286,1289,1291,1293,1296,1298],{"class":278,"line":468},[276,1278,315],{"class":290},[276,1280,1281],{"class":327}," fuse ",[276,1283,297],{"class":282},[276,1285,707],{"class":282},[276,1287,1288],{"class":341}," Fuse",[276,1290,851],{"class":327},[276,1292,261],{"class":282},[276,1294,1295],{"class":327},"value",[276,1297,356],{"class":282},[276,1299,784],{"class":282},[276,1301,1302,1305,1307,1309,1311,1313,1315,1317,1319,1322,1324],{"class":278,"line":473},[276,1303,1304],{"class":286}," keys",[276,1306,324],{"class":282},[276,1308,725],{"class":327},[276,1310,348],{"class":282},[276,1312,730],{"class":303},[276,1314,348],{"class":282},[276,1316,356],{"class":282},[276,1318,622],{"class":282},[276,1320,1321],{"class":303},"description",[276,1323,348],{"class":282},[276,1325,1326],{"class":327},"]\n",[276,1328,1329,1331],{"class":278,"line":483},[276,1330,331],{"class":282},[276,1332,455],{"class":327},[276,1334,1335],{"class":278,"line":492},[276,1336,434],{"emptyLinePlaceholder":433},[276,1338,1339,1341,1343,1345,1347,1349,1351,1353,1356,1358,1360,1362,1364,1367,1369,1372,1374,1377,1379,1382],{"class":278,"line":508},[276,1340,315],{"class":290},[276,1342,864],{"class":327},[276,1344,297],{"class":282},[276,1346,869],{"class":341},[276,1348,345],{"class":327},[276,1350,874],{"class":282},[276,1352,362],{"class":290},[276,1354,1355],{"class":327}," fuse",[276,1357,261],{"class":282},[276,1359,406],{"class":341},[276,1361,345],{"class":327},[276,1363,848],{"class":341},[276,1365,1366],{"class":327},"(query))",[276,1368,261],{"class":282},[276,1370,1371],{"class":341},"slice",[276,1373,345],{"class":327},[276,1375,1376],{"class":807},"0",[276,1378,356],{"class":282},[276,1380,1381],{"class":807}," 10",[276,1383,377],{"class":327},[276,1385,1386,1388,1390],{"class":278,"line":522},[276,1387,461],{"class":282},[276,1389,287],{"class":286},[276,1391,309],{"class":282},[276,1393,1394],{"class":278,"line":536},[276,1395,434],{"emptyLinePlaceholder":433},[276,1397,1398,1400,1402],{"class":278,"line":551},[276,1399,283],{"class":282},[276,1401,478],{"class":286},[276,1403,309],{"class":282},[276,1405,1406,1408,1410,1412,1414,1416,1418,1420],{"class":278,"line":557},[276,1407,486],{"class":282},[276,1409,921],{"class":286},[276,1411,924],{"class":290},[276,1413,297],{"class":282},[276,1415,300],{"class":282},[276,1417,931],{"class":303},[276,1419,300],{"class":282},[276,1421,309],{"class":282},[276,1423,1424,1426,1428],{"class":278,"line":828},[276,1425,941],{"class":282},[276,1427,944],{"class":286},[276,1429,309],{"class":282},[276,1431,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1465,1467],{"class":278,"line":835},[276,1433,952],{"class":282},[276,1435,955],{"class":286},[276,1437,958],{"class":290},[276,1439,297],{"class":282},[276,1441,300],{"class":282},[276,1443,965],{"class":303},[276,1445,300],{"class":282},[276,1447,970],{"class":290},[276,1449,297],{"class":282},[276,1451,300],{"class":282},[276,1453,977],{"class":303},[276,1455,300],{"class":282},[276,1457,924],{"class":290},[276,1459,297],{"class":282},[276,1461,300],{"class":282},[276,1463,1464],{"class":303},"w-full",[276,1466,300],{"class":282},[276,1468,982],{"class":282},[276,1470,1471,1473,1475],{"class":278,"line":859},[276,1472,952],{"class":282},[276,1474,990],{"class":286},[276,1476,309],{"class":282},[276,1478,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499,1502,1504,1506,1508,1510,1512,1514],{"class":278,"line":893},[276,1480,998],{"class":282},[276,1482,1001],{"class":286},[276,1484,1004],{"class":290},[276,1486,297],{"class":282},[276,1488,300],{"class":282},[276,1490,1011],{"class":303},[276,1492,300],{"class":282},[276,1494,1016],{"class":290},[276,1496,297],{"class":282},[276,1498,300],{"class":282},[276,1500,1501],{"class":303},"link.item.id",[276,1503,300],{"class":282},[276,1505,924],{"class":290},[276,1507,297],{"class":282},[276,1509,300],{"class":282},[276,1511,1034],{"class":303},[276,1513,300],{"class":282},[276,1515,309],{"class":282},[276,1517,1518,1520,1523,1526,1528,1530,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555],{"class":278,"line":902},[276,1519,1044],{"class":282},[276,1521,1522],{"class":286},"UButton",[276,1524,1525],{"class":290}," variant",[276,1527,297],{"class":282},[276,1529,300],{"class":282},[276,1531,1532],{"class":303},"ghost",[276,1534,300],{"class":282},[276,1536,924],{"class":290},[276,1538,297],{"class":282},[276,1540,300],{"class":282},[276,1542,1464],{"class":303},[276,1544,300],{"class":282},[276,1546,1050],{"class":290},[276,1548,297],{"class":282},[276,1550,300],{"class":282},[276,1552,1501],{"class":303},[276,1554,300],{"class":282},[276,1556,309],{"class":282},[276,1558,1559],{"class":278,"line":907},[276,1560,1561],{"class":327}," {{ link.item.title }}\n",[276,1563,1564,1567,1569,1571,1573,1575,1577,1579],{"class":278,"line":916},[276,1565,1566],{"class":282}," \u003C",[276,1568,276],{"class":286},[276,1570,924],{"class":290},[276,1572,297],{"class":282},[276,1574,300],{"class":282},[276,1576,1086],{"class":303},[276,1578,300],{"class":282},[276,1580,309],{"class":282},[276,1582,1583],{"class":278,"line":938},[276,1584,1585],{"class":327}," {{ link.item.content?.slice(0, 100) }}...\n",[276,1587,1588,1591,1593],{"class":278,"line":949},[276,1589,1590],{"class":282}," \u003C/",[276,1592,276],{"class":286},[276,1594,309],{"class":282},[276,1596,1597,1600,1602],{"class":278,"line":985},[276,1598,1599],{"class":282}," \u003C/",[276,1601,1522],{"class":286},[276,1603,309],{"class":282},[276,1605,1606,1608,1610],{"class":278,"line":995},[276,1607,1105],{"class":282},[276,1609,1001],{"class":286},[276,1611,309],{"class":282},[276,1613,1614,1616,1618],{"class":278,"line":1041},[276,1615,1115],{"class":282},[276,1617,990],{"class":286},[276,1619,309],{"class":282},[276,1621,1622,1624,1626],{"class":278,"line":1073},[276,1623,1125],{"class":282},[276,1625,944],{"class":286},[276,1627,309],{"class":282},[276,1629,1630,1632,1634],{"class":278,"line":1102},[276,1631,1135],{"class":282},[276,1633,921],{"class":286},[276,1635,309],{"class":282},[276,1637,1638,1640,1642],{"class":278,"line":1112},[276,1639,461],{"class":282},[276,1641,478],{"class":286},[276,1643,309],{"class":282},[565,1645,1646],{"icon":567,"label":568},[1647,1648],"example-fulltext-fusejs",{},[1650,1651,1652],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":272,"searchDepth":312,"depth":312,"links":1654},[1655,1656,1657],{"id":243,"depth":312,"text":244},{"id":574,"depth":312,"text":575},{"id":1156,"depth":312,"text":1157},"Implement full-text search in your website using Nuxt Content","md",null,{},{"title":178,"description":1658},"FlcO2obWihB9Vhc8t87_S5sCY1e6yanc87y6zVqU2OI",[1665,1667],{"title":168,"path":169,"stem":170,"description":1666,"children":-1},"Learn how to generate AI-ready content files using Nuxt Content and the Nuxt LLMs module.",{"title":182,"path":183,"stem":184,"description":1668,"children":-1},"Access to contents raw data in appliction",[1670,1674,1678,1683,1688,1693,1698,1703,1706,1711,1716,1721,1726,1731,1736,1739,1744,1749,1754,1759,1764,1769,1774,1779,1784,1789,1794,1799,1804,1809,1814,1819,1824,1829,1834,1839,1844,1849,1854,1859,1862,1866,1871,1875,1879,1884,1889,1894,1899,1904,1909,1914,1918,1923,1928,1933,1938,1943,1948,1952,1957,1962,1967,1972,1977,1981,1986,1991,1996,2001,2006,2011,2016,2021,2025,2029,2034,2039,2044,2049,2054,2059,2064,2069,2073,2078,2083,2088,2091,2095,2100,2105,2110,2115,2120,2125,2130,2135,2140,2145,2150,2155,2160,2165,2170,2175,2180,2185,2189,2194,2199,2204,2207,2212,2217,2222,2225,2229,2234,2237,2240,2245,2250,2254,2259,2262,2266,2270,2275,2280,2285,2290,2295,2300,2305,2310,2315,2320,2325,2330,2335,2340,2345,2348,2352,2357,2361,2364,2369,2373,2377,2382,2387,2392,2397,2402,2405,2409,2413,2416,2421,2425,2429,2432,2436,2440,2443,2448,2452,2456,2459,2463,2468,2473,2476,2480,2485,2490,2494,2497,2502,2507,2512,2517,2522,2527,2532,2537,2542,2547,2552,2557,2562,2567,2572,2577,2582,2587,2592,2597,2601,2605,2609,2614,2618,2623,2628,2633,2637,2642,2647,2652,2656,2661,2666,2671,2676,2681,2684,2687,2692,2697,2700,2703,2706,2709,2714,2719,2722,2727,2732,2736,2741,2746,2751,2756,2760,2764,2769,2774,2779,2784,2787,2791,2795,2799,2802,2806,2811,2816,2821,2825,2830,2835,2840,2844,2849,2854,2859,2862,2867,2872,2876,2879,2882,2887,2892,2897,2902,2907,2912],{"id":6,"title":1671,"titles":1672,"content":1673,"level":279},"Nuxt Content v3",[],"The powerful Git-based CMS designed specifically for Nuxt developers. Welcome to Nuxt Content v3, a major upgrade that brings enhanced performance and innovative features to your Nuxt projects. This latest iteration of our Git-based CMS is optimized for modern application development.",{"id":1675,"title":1676,"titles":1677,"content":272,"level":312},"/docs/getting-started#whats-new","What's New?",[1671],{"id":1679,"title":1680,"titles":1681,"content":1682,"level":380},"/docs/getting-started#content-collections","Content Collections",[1671,1676],"Collections organize related items within your project, helping you manage large datasets more efficiently. Key benefits include: Structured Data: Configure database architecture and define collections in content.config.tsType-safe Queries: Direct TypeScript integration across all utilitiesAutomatic Validation: Ensure data consistency across frontmatter fields and data files (json, yml...)Advanced Query Builder: Filter, sort, and paginate your collections with easeStudio Integration: Enhanced form generation and optimal editing experience through Studio Learn more about Content Collections.",{"id":1684,"title":1685,"titles":1686,"content":1687,"level":380},"/docs/getting-started#improved-performance","Improved Performance",[1671,1676],"A significant challenge in v2 was the large bundle size needed for storing files, particularly affecting serverless deployments. V3 addresses this by transitioning to SQL-based storage in production. This switch requires zero configuration, supporting development mode, static generation, server hosting, serverless and edge deployments. The new database system enhances the way your data files are stored and structured, ensuring better performance and scalability. This update is entirely behind the scenes and does not affect the file types you can use in Content (yml, json, and markdown ). Benefits include: Optimized Queries: SQL storage enables ultra-fast data retrievalUniversal Compatibility: Our adapter-based system integrates SQL databases across all deployment modes (server, serverless and static). We welcome community contributions for additional adapters.",{"id":1689,"title":1690,"titles":1691,"content":1692,"level":380},"/docs/getting-started#typescript-integration","TypeScript Integration",[1671,1676],"The new collections system provides automatic TypeScript types for all your data. Every utility and API is strongly typed based on your collection definitions, ensuring robust type safety throughout development.",{"id":1694,"title":1695,"titles":1696,"content":1697,"level":380},"/docs/getting-started#nuxt-studio-integration-soon","Nuxt Studio Integration Soon",[1671,1676],"Nuxt Studio and v3 are designed to complement each other perfectly. The studio module is creating an ideal environment where developers can focus on code while team members manage content through an intuitive interface. We're excited for you to explore these new capabilities. Dive into our documentation to learn more about integrating the module and implementing best practices in your next project.",{"id":1699,"title":1700,"titles":1701,"content":1702,"level":312},"/docs/getting-started#content-v2-migration","Content V2 Migration",[1671],"Learn how to migrate from Content v2 to v3 in the migration guide.",{"id":13,"title":12,"titles":1704,"content":1705,"level":279},[],"Get started with Nuxt Content v3 in your Nuxt application.",{"id":1707,"title":1708,"titles":1709,"content":1710,"level":312},"/docs/getting-started/installation#install-the-package","Install the Package",[12],"Choose your preferred package manager to install Nuxt Content v3: pnpm add @nuxt/content\nyarn add @nuxt/content\nnpm install @nuxt/content\nbun add @nuxt/content",{"id":1712,"title":1713,"titles":1714,"content":1715,"level":312},"/docs/getting-started/installation#register-the-module","Register the Module",[12],"Add the Nuxt Content module to your nuxt.config.ts: export default defineNuxtConfig({\n modules: ['@nuxt/content']\n})",{"id":1717,"title":1718,"titles":1719,"content":1720,"level":312},"/docs/getting-started/installation#automatic-setup","Automatic Setup",[12],"When starting a new Nuxt project with the create-nuxt CLI, you can simply select @nuxt/content from the interactive module selector. This will automatically install and register the module for you. npm create nuxt \u003Cproject-name>\nyarn create nuxt \u003Cproject-name>\npnpm create nuxt \u003Cproject-name>\nbun create nuxt \u003Cproject-name>\ndeno -A npm:create-nuxt@latest \u003Cproject-name> When you run your project in Node.js, Nuxt Content will ask you about the database connector to use.\nYou can choose to install better-sqlite3 or sqlite3 package.If you don't want to install any package, you can use native SQLite from Node.js@v22.5.0 or newer.\nCheckout experimental.nativeSqlite configuration. If you use pnpm v10+, dependency build scripts are not executed by default.Since better-sqlite3 and sqlite3 rely on a postinstall/build step to generate native bindings,\nyou may encounter errors such as:Could not locate the bindings fileTo resolve this, you can approve the required build scripts by running:pnpm approve-builds\nAlternatively, if you need a non-interactive setup (for example in CI),\nyou can explicitly allow native builds by adding the following configuration\nto your project root package.json:{\n \"pnpm\": {\n \"onlyBuiltDependencies\": [\n \"better-sqlite3\",\n \"sqlite3\"\n ]\n }\n}",{"id":1722,"title":1723,"titles":1724,"content":1725,"level":312},"/docs/getting-started/installation#create-your-first-collection","Create your First Collection",[12],"Create a content.config.ts file in your project root directory: import { defineContentConfig, defineCollection } from '@nuxt/content'\n\nexport default defineContentConfig({\n collections: {\n content: defineCollection({\n type: 'page',\n source: '**/*.md'\n })\n }\n}) This configuration creates a default content collection that processes all Markdown files located in the content folder of your project. You can customize the collection settings based on your needs. The type: page means there is a 1-to-1 relationship between content files and pages on your site. Learn more in our Collections guide.",{"id":1727,"title":1728,"titles":1729,"content":1730,"level":312},"/docs/getting-started/installation#create-your-first-markdown-page","Create your First Markdown Page",[12],"Create a content/index.md file in your project root directory: # My First Page\n\nHere is some content. Read more about writing Markdown pages.",{"id":1732,"title":1733,"titles":1734,"content":1735,"level":312},"/docs/getting-started/installation#display-your-page","Display your Page",[12],"Create a pages/index.vue file and display the page content: \u003Cscript setup lang=\"ts\">\nconst { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())\n\nuseSeoMeta({\n title: home.value?.title,\n description: home.value?.description\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CContentRenderer v-if=\"home\" :value=\"home\" />\n \u003Cdiv v-else>Home not found\u003C/div>\n\u003C/template> If you are installing Nuxt Content in a new Nuxt project and you didn't have pages directory, you also need to update the app.vue file to allow rendering the pages by adding the NuxtPage component. (If you already have some pages in your project, you are good to go.)\u003Ctemplate>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n\u003C/template> That's it! You've now created your first Nuxt Content page. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"id":17,"title":16,"titles":1737,"content":1738,"level":279},[],"Nuxt Content is configured with sensible defaults. To configure the content module and customize its behavior, you can use the content property in your nuxt.config: export default defineNuxtConfig({\n content: {\n // Options\n }\n}) In addition to configuring via content.markdown, you can use Markdown Components (MDC) to customize the rendering of Markdown elements with mdc property.",{"id":1740,"title":1741,"titles":1742,"content":1743,"level":312},"/docs/getting-started/configuration#build","build",[16],"Nuxt Content read and parse all the available contents at build time. This option gives you control over parsing contents.",{"id":1745,"title":1746,"titles":1747,"content":1748,"level":380},"/docs/getting-started/configuration#markdown","markdown",[16,1741],"Configure markdown parser.",{"id":1750,"title":1751,"titles":1752,"content":1753,"level":430},"/docs/getting-started/configuration#toc","toc",[16,1741,1746],"toc: {\n depth: 2,\n searchDepth: 2\n}\ntype Toc = {\n depth: number\n searchDepth: number\n} Control behavior of Table of Contents generation. Value: depth: Maximum heading depth to include in the table of contents.searchDepth: Maximum depth of nested tags to search for heading. export default defineNuxtConfig({\n content: {\n build: {\n markdown: {\n toc: {\n depth: 3, // include h3 headings\n }\n }\n }\n }\n})",{"id":1755,"title":1756,"titles":1757,"content":1758,"level":430},"/docs/getting-started/configuration#remarkplugins","remarkPlugins",[16,1741,1746],"remarkPlugins: {}\ntype RemarkPlugins = Record\u003Cstring, false | MarkdownPlugin> A list of remark plugins to use. export default defineNuxtConfig({\n content: {\n build: {\n markdown: {\n // Object syntax can be used to override default options\n remarkPlugins: {\n // Override remark-emoji options\n 'remark-emoji': {\n options: {\n emoticon: true\n }\n },\n // Disable remark-gfm\n 'remark-gfm': false,\n // Add remark-oembed\n 'remark-oembed': {\n // Options\n }\n },\n }\n }\n }\n})",{"id":1760,"title":1761,"titles":1762,"content":1763,"level":430},"/docs/getting-started/configuration#rehypeplugins","rehypePlugins",[16,1741,1746],"rehypePlugins: {}\ntype RehypePlugins = object A list of rehype plugins to use. export default defineNuxtConfig({\n content: {\n build: {\n markdown: {\n // Object syntax can be used to override default options\n rehypePlugins: {\n 'rehype-figure': {\n\n }\n },\n }\n }\n }\n})",{"id":1765,"title":1766,"titles":1767,"content":1768,"level":430},"/docs/getting-started/configuration#contentheading","contentHeading",[16,1741,1746],"contentHeading: true\ntype ContentHeading = boolean Setting this option to false disables the automatic generation of title and description fields that are normally extracted from the first H1 heading and the paragraphs that follow it.",{"id":1770,"title":1771,"titles":1772,"content":1773,"level":430},"/docs/getting-started/configuration#highlight","highlight",[16,1741,1746],"highlight: false\ntype Highlight = false | object Nuxt Content uses Shiki to provide syntax highlighting for ProsePre and ProseCode. OptionTypeDescriptionthemeShikiTheme or Record\u003Cstring, ShikiTheme>The color theme to use.langsShikiLang[]The loaded languages available for highlighting. highlight.theme Theme can be specified by a single string but also supports an object with multiple themes. This option is compatible with Color Mode module. If you are using multiple themes, it's recommended to always have a default theme specified. export default defineNuxtConfig({\n content: {\n build: {\n markdown: {\n highlight: {\n // Theme used in all color schemes.\n theme: 'github-light',\n // OR\n theme: {\n // Default theme (same as single string)\n default: 'github-light',\n // Theme used if `html.dark`\n dark: 'github-dark',\n // Theme used if `html.sepia`\n sepia: 'monokai'\n }\n }\n }\n }\n }\n}) highlight.langs By default, the module loads a couple of languages for syntax highlighting: ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml'] If you plan to use code samples of other languages, you need to define the language in these options. export default defineNuxtConfig({\n content: {\n build: {\n markdown: {\n highlight: {\n langs: [\n 'c',\n 'cpp',\n 'java'\n ]\n }\n }\n }\n }\n}) If you wish to add highlighting for an unsupported language, you can do so by loading the grammar file for the language. import { readFileSync } from 'node:fs'\n\nexport default defineNuxtConfig({\n content: {\n build: {\n markdown: {\n highlight: {\n langs: [\n // Read more about Shiki languages: https://shiki.style/guide/load-lang\n JSON.parse(\n readFileSync('./shiki/languages/gdscript.tmLanguage.json', 'utf-8'),\n ),\n ]\n }\n }\n }\n }\n}) Read more about adding languages in the Shiki documentation.",{"id":1775,"title":1776,"titles":1777,"content":1778,"level":380},"/docs/getting-started/configuration#pathmeta","pathMeta",[16,1741],"Content module uses files path to generate the slug, default title and content order, you can customize this behavior with pathMeta option.",{"id":1780,"title":1781,"titles":1782,"content":1783,"level":430},"/docs/getting-started/configuration#pathmetaforceleadingslash","pathMeta.forceLeadingSlash",[16,1741,1776],"If set to true, the path will be prefixed with a leading slash. Default value is true.",{"id":1785,"title":1786,"titles":1787,"content":1788,"level":430},"/docs/getting-started/configuration#pathmetaslugifyoptions","pathMeta.slugifyOptions",[16,1741,1776],"Content module uses slugify to generate the slug, you can customize the behavior of slugify with this option. Checkout slugify options for more information.",{"id":1790,"title":1791,"titles":1792,"content":1793,"level":380},"/docs/getting-started/configuration#transformers","transformers",[16,1741],"Nuxt Content has specific transformers for each content type to parse the raw content and prepare it for querying and rendering. Using this option you can define custom transformers to support new content types or improve functionalities of supported content types. export default defineNuxtConfig({\n content: {\n build: {\n transformers: [\n '~/transformers/title-suffix',\n ],\n },\n },\n})\nimport { defineTransformer } from '@nuxt/content'\n\nexport default defineTransformer({\n name: 'title-suffix',\n extensions: ['.md'],\n transform(file) {\n return {\n ...file,\n title: file.title + ' (suffix)',\n }\n },\n}) Read more about transformers in the Transformers documentation.",{"id":1795,"title":1796,"titles":1797,"content":1798,"level":312},"/docs/getting-started/configuration#database","database",[16],"By default Nuxt Content uses a local SQLite database to store and query content. If you like to use another database or you plan to deploy on Cloudflare Workers, you can modify this option. Here is the list of supported database adapters:",{"id":1800,"title":1801,"titles":1802,"content":1803,"level":380},"/docs/getting-started/configuration#sqlite","SQLite",[16,1796],"If you want to change the default database location and move it to elsewhere you can use sqlite adapter to do so. This is the default value to the database option. Depending on your runtime-environment different sqlite adapters will be used (Node: better-sqlite-3, Bun: bun:sqlite). export default defineNuxtConfig({\n content: {\n database: {\n type: 'sqlite',\n filename: 'SQLITE_DB_LOCATION'\n }\n }\n}) If you can't use a normal file-backed SQLite database (for example due to read-only filesystems or platform limitations), you can run SQLite entirely in memory. Nuxt Content will restore the database from the generated dump on first query. On serverless platforms this database will be recreated on each cold start; prerender as many routes as possible to avoid repeated runtime initialization. export default defineNuxtConfig({\n content: {\n database: {\n type: 'sqlite',\n filename: ':memory:'\n }\n }\n})",{"id":1805,"title":1806,"titles":1807,"content":1808,"level":380},"/docs/getting-started/configuration#d1","D1",[16,1796],"If you plan to deploy your application to Cloudflare workers, you need to use the d1 database adapter. Create a d1 binding in the Cloudflare dashboard and fill in the bindingName field. export default defineNuxtConfig({\n content: {\n database: {\n type: 'd1',\n bindingName: 'CF_BINDING_NAME'\n }\n }\n})",{"id":1810,"title":1811,"titles":1812,"content":1813,"level":380},"/docs/getting-started/configuration#postgres","Postgres",[16,1796],"If you plan to deploy your application using PostgreSQL database you need to use the postgresql database adapter. First, make sure to install the pg package: npm i pg Then, configure the postgresql adapter in your nuxt.config.ts: export default defineNuxtConfig({\n content: {\n database: {\n type: 'postgresql',\n url: process.env.POSTGRES_URL,\n /* Other options for `pg` */\n }\n }\n})",{"id":1815,"title":1816,"titles":1817,"content":1818,"level":380},"/docs/getting-started/configuration#libsql","LibSQL",[16,1796],"If you plan to deploy your application using a LibSQL database you need to use the libsql database adapter. First, make sure to install the @libsql/client package: npm i @libsql/client Then, configure the libsql adapter in your nuxt.config.ts: export default defineNuxtConfig({\n content: {\n database: {\n type: 'libsql',\n url: process.env.TURSO_DATABASE_URL,\n authToken: process.env.TURSO_AUTH_TOKEN,\n }\n }\n}) The most popular LibSQL hosting services is Turso.",{"id":1820,"title":1821,"titles":1822,"content":1823,"level":380},"/docs/getting-started/configuration#pglite","PGlite",[16,1796],"If you plan to deploy your application using a PGlite database you need to use the pglite database adapter. First, make sure to install the @electric-sql/pglite package: npm i @electric-sql/pglite Then, configure the pglite adapter in your nuxt.config.ts: export default defineNuxtConfig({\n content: {\n database: {\n type: 'pglite',\n dataDir: '.data/content/pglite'\n }\n }\n}) We recommend to only use PGlite in development.",{"id":1825,"title":1826,"titles":1827,"content":1828,"level":312},"/docs/getting-started/configuration#renderer","renderer",[16],"Configure content renderer.",{"id":1830,"title":1831,"titles":1832,"content":1833,"level":380},"/docs/getting-started/configuration#anchorlinks","anchorLinks",[16,1826],"{ h2: true, h3: true, h4: true }\ntype AnchorLinks = boolean | Record\u003C'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', boolean> Control anchor link generation, by default it generates anchor links for h2, h3 and h4 heading Value: false: will disable link generation.true: will enable link generation for all headings.",{"id":1835,"title":1836,"titles":1837,"content":1838,"level":380},"/docs/getting-started/configuration#alias","alias",[16,1826],"alias: {}\ntype Alias = Record\u003Cstring, string> Aliases will be used to replace markdown components and render custom components instead of default ones. export default defineNuxtConfig({\n content: {\n renderer: {\n alias: {\n p: 'MyCustomParagraph'\n }\n }\n }\n})",{"id":1840,"title":1841,"titles":1842,"content":1843,"level":312},"/docs/getting-started/configuration#watch","watch",[16],"watch: {\n enabled: true\n} Controls whether content hot reloading is enabled during development. Options: enabled (boolean): Enable or disable hot reloading when editing content files.\ntrue (default): Automatically reloads content changes in your application during development.false: Disables hot reloading; changes require a manual refresh. The content watcher only runs in development and leverages the Vite dev server to detect content updates and send events to your application for live updates.",{"id":1845,"title":1846,"titles":1847,"content":1848,"level":312},"/docs/getting-started/configuration#experimental","experimental",[16],"Experimental features that are not yet stable.",{"id":1850,"title":1851,"titles":1852,"content":1853,"level":380},"/docs/getting-started/configuration#experimentalsqliteconnector","experimental.sqliteConnector",[16,1846],"SQLite connectors have limitations in different environments. Some work in serverless environments, while others do not. Nuxt Content supports three different SQLite connectors to cover all environments: better-sqlite3: Works in all Node environments, GitHub CI, Vercel CI and production, Cloudflare CI pipelines, etc. (Does not work in WebContainers and StackBlitz)sqlite3: Works in Node environments, GitHub CI, and StackBlitz. (Does not work in Vercel or Cloudflare)native: As of Node.js v22.5.0, the node:sqlite module is available natively in Node.js. This connector works in all Node environments with Node.js version 22.5.0 or newer. export default defineNuxtConfig({\n content: {\n experimental: { sqliteConnector: 'native' },\n },\n});",{"id":1855,"title":1856,"titles":1857,"content":1858,"level":380},"/docs/getting-started/configuration#experimentalnativesqlite-deprecated-use-sqliteconnector","experimental.nativeSqlite (deprecated, use sqliteConnector)",[16,1846],"As of Node.js v22.5.0, the node:sqlite module is available natively in Node.js.\nThis allows Nuxt Content to use SQLite as a database without the need for an external package. export default defineNuxtConfig({\n content: {\n experimental: { nativeSqlite: true },\n },\n}); This feature is only available in Node.js v22.5.0 and above. Enabling this feature in older version will not do anything. 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 .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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}",{"id":21,"title":20,"titles":1860,"content":1861,"level":279},[],"How to migrate from v2 to v3 Nuxt Content v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities. While we've redesigned concepts and components in a similar way as Content v2, breaking changes are inevitable. Don't worry, you don't need to modify your content files. We made sure that Content v3 handles content in the same way as Content v2.",{"id":1863,"title":1864,"titles":1865,"content":272,"level":312},"/docs/getting-started/migration#changes","Changes",[20],{"id":1867,"title":1868,"titles":1869,"content":1870,"level":380},"/docs/getting-started/migration#vue-utils","Vue utils",[20,1864],"queryContent() API is replaced with new queryCollection() The new API is backed by SQL and content queries happens within a specific collection. fetchContentNavigation() API is replaced with new queryCollectionNavigation()Surroundings now has its own separate API queryCollectionItemSurroundings()Document driven mode is dropped: Markdown files will not convert to Nuxt pages automatically, you need to create pages, check this section to see how.useContent() composable is removedsearchContent() is dropped in favor of the new queryCollectionSearchSections APIFull text search can easily be done using the queryCollectionSearchSections API, check this section to see how",{"id":1872,"title":47,"titles":1873,"content":1874,"level":380},"/docs/getting-started/migration#components",[20,1864],"All content should be rendered using \u003CContentRenderer> component. \u003CContentDoc>, \u003CContentList>, \u003CContentNavigation> and \u003CContentQuery> components are dropped in v3.\u003CContentSlot> and \u003CMDCSlot> components are not supported in v3. Instead components can simply use Vue's native \u003Cslot> component \u003CContentSlot> and \u003CMDCSlot> was initially pro to manipulate content before rendering and removing wrapping paragraphs from slot content. This unwrapping behavior is now supported via mdc-unwrap attribute in \u003Cslot> component. Example: \u003Cslot mdc-unwrap=\"p\" /> Components created under the components/content directory are no longer automatically registered as global components. If you use dynamic rendering to render these components outside markdown files, you must manually register them in your Nuxt app. Check out the Nuxt - Custom Components Directories documentation for more information on how to do so.",{"id":1876,"title":35,"titles":1877,"content":1878,"level":380},"/docs/getting-started/migration#types",[20,1864],"import type { NavItem } from '@nuxt/content/dist/runtime/types' is replaced with import type { ContentNavigationItem } from '@nuxt/content'",{"id":1880,"title":1881,"titles":1882,"content":1883,"level":380},"/docs/getting-started/migration#general","General",[20,1864],"_dir.yml files are renamed to .navigation.ymlThere is no source option in module options, instead you can define multiple sources for your collections in content.config.ts.Document ._path is now renamed to .path, likewise all internal fields with _ prefix are removed or renamed.useContentHelpers() is removedModule does not ignore dot files by default, you can ignore them by adding ignore: ['**/.*'] in exclude options of your collection source.Due to SQL limitations, sort order now uses alphabetical order instead for numerical order. Check out the Ordering Files section for more information.Module options have changed from v2. Check out configuration page for details.",{"id":1885,"title":1886,"titles":1887,"content":1888,"level":312},"/docs/getting-started/migration#implement-document-driven-mode-in-v3","Implement Document Driven mode in v3",[20],"Implementing document driven mode in Content v3 is quite easy. All you need is to create a catch-all page in Nuxt and fetch contents based on route path. \u003Cscript lang=\"ts\" setup>\nconst route = useRoute()\nconst { data: page } = await useAsyncData(route.path, () => {\n return queryCollection('content').path(route.path).first()\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cheader>\u003C!-- ... -->\u003C/header>\n\n \u003CContentRenderer v-if=\"page\" :value=\"page\" />\n\n \u003Cfooter>\u003C!-- ... -->\u003C/footer>\n \u003C/div>\n\u003C/template>",{"id":1890,"title":1891,"titles":1892,"content":1893,"level":312},"/docs/getting-started/migration#converting-querycontent-to-querycollections","Converting queryContent to queryCollections",[20],"As we mentioned above, queryContent is dropped in favor of new collection based queryCollection. There are two main differences between these two: queryCollection is building a query for an SQL database.queryCollection does the search only inside the specified collection. You should know the collection's name (key on config). // Content v2\nconst v2Query = await queryContent(route.path).findOne()\n// Content v3 - don't forget to create `content` collection in `content.config.ts`\nconst v3Query = await queryCollection('content').path(route.path).first() // Content v2\nconst v2Query = await queryContent()\n .where({ path: /^\\/hello\\/.*/ })\n .find()\n// Content v3 - don't forget to create `content` collection in `content.config.ts`\nconst v3Query = await queryCollection('content')\n .where('path', 'LIKE', '/hello%')\n .first() Check the dedicated section for more info about collections",{"id":1895,"title":1896,"titles":1897,"content":1898,"level":312},"/docs/getting-started/migration#convert-querycontentfindsurround","Convert queryContent().findSurround()",[20],"Surround now has its own separate API. const targetPath = '/docs'\n\n// Content v2\nconst v2Surround = await queryContent(targetPath)\n .only(['title', 'description', 'navigation'])\n .findSurround(withoutTrailingSlash(route.path))\n\n// Content v3 - don't forget to create `content` collection in `content.config.ts`\nconst v3Surround = await queryCollectionItemSurroundings(\n 'content',\n targetPath,\n {\n fields: ['title', 'description', 'navigation']\n }\n) Check the dedicated section for more information about the",{"id":1900,"title":1901,"titles":1902,"content":1903,"level":312},"/docs/getting-started/migration#consolidate-prosepre-prosecode-and-prosecodeinline-components","Consolidate ProsePre, ProseCode, and ProseCodeInline components",[20],"Many ProsePre components are thin wrappers around the ProseCode component. We've consolidated these three components into two components. There is now no difference between ProsePre and multi-line code blocks. MDC will now map and parse single backticks ` as ProseCode instead of ProseCodeInline.MDC will now map and parse block code starting with three backticks``` as ProsePre component. Suggested Changes: Your current ProseCode logic should be moved to ProsePreRename your ProseCodeInline components to ProseCode",{"id":1905,"title":1906,"titles":1907,"content":1908,"level":312},"/docs/getting-started/migration#_diryml-files-are-renamed-to-navigationyml","_dir.yml files are renamed to .navigation.yml",[20],"In Content v3, we renamed _dir.yml to .navigation.yml. The new name better reflects the purpose of these files.\nModule uses these files to gather information about directories for generating navigation. Note that in order to make these files available for Module, you should define your collection's source in\na way that includes these files. For example source: '**' and source: '**/*.{md,yml}' will include these files\nin collection, but source: '**/*.md' will not include them.",{"id":1910,"title":1911,"titles":1912,"content":1913,"level":312},"/docs/getting-started/migration#ignore-dot-files","Ignore dot files",[20],"By default, Content v3 does not ignore dot files. If you want to ignore them, you can add ignore: ['**/.*'] in the exclude option of your collection source. defineCollection({\n source: {\n include: '**',\n exclude: ['**/.*']\n }\n}) Note that the above pattern will also exclude .navigation.yml file from collection. If you use .navigation.yml and want to keep them\nyou can use **/.(!(navigation.yml)) pattern to exclude all dot files except .navigation.yml. defineCollection({\n source: {\n include: '**',\n exclude: ['**/.!(navigation.yml)']\n }\n}) 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .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);}",{"id":32,"title":1915,"titles":1916,"content":1917,"level":279},"Define Content Collections",[],"Learn how to define and configure content collections in your Nuxt application. The Nuxt Content module automatically parses any content files within the content/ directory located at the root of your Nuxt application. This setup allows you to freely structure the folder to suit your project's needs. For better organization, consider using Content Collections, which let you categorize and manage content more effectively. These collections are defined in a content.config.ts file. If no content.config.ts file is present, all files within the content folder are parsed and imported by default. However, once a config file is added, only files matching the specified path patterns defined in collections will be imported.",{"id":1919,"title":1920,"titles":1921,"content":1922,"level":312},"/docs/collections/define#what-are-content-collections","What are Content Collections?",[1915],"Content Collections organize related items within your Nuxt Content project. They provide a structured way to manage your content, making it easier to query, display, and maintain your site's data. Key features include: Logical Grouping: Group similar content together, such as blog posts, product pages, or documentation articlesShared Configuration: Apply common settings and validations across all items within a collectionImproved Querying: Fetch and filter related content items efficientlyAutomatic Type Inference: Get type safety and autocompletion in your development environmentFlexible Structure: Organize collections by content type, category, or any other logical grouping that suits your needs",{"id":1924,"title":1925,"titles":1926,"content":1927,"level":312},"/docs/collections/define#defining-collections","Defining Collections",[1915],"Create a content.config.ts file in your project's root directory. This special file configures your collections database, utility types, and content handling. Here's a basic example: import { defineCollection, defineContentConfig } from '@nuxt/content'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n // Specify the type of content in this collection\n type: 'page',\n // Load every file inside the `content` directory\n source: '**',\n })\n }\n}) Currently, a document is designed to be present in only one collection at a time. If a file is referenced in multiple collections, live reload will not work correctly. To avoid this, it is recommended to use the exclude attribute to explicitly exclude a document from other collections using appropriate regex patterns.This topic is still under discussion in this issue: nuxt/content#2966.",{"id":1929,"title":1930,"titles":1931,"content":1932,"level":380},"/docs/collections/define#collection-schema","Collection Schema",[1915,1925],"Schemas enforce data consistency within a collection and serve as the source of truth for TypeScript types. On top of the built-in fields, you can define a schema by adding the schema property to your collection by using a zod schema: import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n blog: defineCollection({\n type: 'page',\n source: 'blog/*.md',\n // Define custom schema for docs collection\n schema: z.object({\n tags: z.array(z.string()),\n image: z.string(),\n date: z.date()\n })\n })\n }\n}) @nuxt/content exposes a z object that contains a set of Zod schemas for common data types. Check Zodโ€™s README for complete documentation on how Zod works and what features are available. You can define as many collections as you want to organize different types of content.",{"id":1934,"title":1935,"titles":1936,"content":1937,"level":380},"/docs/collections/define#database-indexes","Database Indexes",[1915,1925],"Optimize query performance by defining indexes on collection columns. Indexes are especially useful for fields used in filtering, sorting, or lookups. import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n products: defineCollection({\n type: 'data',\n source: 'products/*.json',\n schema: z.object({\n sku: z.string(),\n price: z.number(),\n category: z.string(),\n inStock: z.boolean(),\n }),\n indexes: [\n // Single column indexes\n { columns: ['category'] },\n { columns: ['price'] },\n\n // Composite index for category + price filtering\n { columns: ['category', 'price'] },\n\n // Unique index to ensure SKU uniqueness\n { columns: ['sku'], unique: true },\n\n // Custom index name (optional)\n { columns: ['inStock', 'category'], name: 'idx_stock_category' },\n ],\n }),\n },\n}) Indexes are created automatically when the database schema is generated. They work across all supported databases: SQLite, Cloudflare D1, PostgreSQL, LibSQL, and PGlite. Cloudflare D1 Cost Optimization: With indexes, a WHERE clause on an indexed column counts as only 1 row read when there's a single match. Without an index, D1 counts all rows scanned in the table, significantly increasing your read costs. Indexes can dramatically reduce your D1 billing. Index Configuration Options: columns (required): Array of column names to include in the indexunique (optional): Set to true to create a unique index (default: false)name (optional): Custom index name. If omitted, auto-generates as idx_{collection}_{column1}_{column2} Performance Tips: Index columns used in where() queries for faster filteringIndex columns used in sort() for optimized sortingUse composite indexes for queries that filter/sort by multiple columnsUnique indexes automatically enforce data uniqueness constraints",{"id":1939,"title":1940,"titles":1941,"content":1942,"level":312},"/docs/collections/define#querying-collections","Querying Collections",[1915],"Use the queryCollection util to fetch one or all items from a collection: \u003Cscript setup lang=\"ts\">\nconst { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>Blog\u003C/h1>\n \u003Cul>\n \u003Cli v-for=\"post in posts\" :key=\"post.id\">\n \u003CNuxtLink :to=\"post.path\">{{ post.title }}\u003C/NuxtLink>\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template> Learn more about the available query options in our queryCollections API documentation.",{"id":1944,"title":1945,"titles":1946,"content":1947,"level":312},"/docs/collections/define#definecollection","defineCollection()",[1915],"The defineCollection function defines a collection in your content configuration. Here's its TypeScript signature: function defineCollection(collection: Collection): DefinedCollection\n\ntype Collection = {\n // Determines how content is processed\n type: 'page' | 'data'\n // Specifies content location\n source?: string | CollectionSource\n // Zod schema for content validation and typing\n schema?: ZodObject\u003CT>\n // Database indexes for query optimization\n indexes?: CollectionIndex[]\n}\n\ntype CollectionIndex = {\n // Column names to include in the index\n columns: string[]\n // Optional custom index name\n name?: string\n // Whether this is a unique index (default: false)\n unique?: boolean\n} Learn more about collection types. type CollectionSource = {\n // Glob pattern for content matching\n include: string\n // .path prefix (only applies to 'page' type)\n prefix?: string\n // Glob patterns to exclude content\n exclude?: string[]\n // Root directory for content matching\n cwd?: string\n // Remote git repository URL (e.g., https://github.com/nuxt/content)\n repository?: string\n // Authentication token for private repositories (e.g., GitHub personal access token)\n authToken?: string\n} Learn more about collection sources. The function returns the defined collection object. 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"id":36,"title":1949,"titles":1950,"content":1951,"level":279},"Collection Types",[],"Learn about the two types of collections you can define in Nuxt Content. In Nuxt Content, you can specify a type for each collection, depending on the intended purpose of the collection files. Collections can be defined as either page or data types. For both types, built-in fields are generated. Every collection includes these default fields: id: Unique content identifierstem: File path without extension (used for sorting and location)extension: File extensionmeta: Custom fields not defined in the collection schema",{"id":1953,"title":1954,"titles":1955,"content":1956,"level":312},"/docs/collections/types#page-type","Page type",[1949],"defineCollection({\n source: '**/*.md',\n type: 'page'\n}) Use the page type if there is a 1-to-1 relationship between content files and pages on your site.",{"id":1958,"title":1959,"titles":1960,"content":1961,"level":380},"/docs/collections/types#path-generation","Path generation",[1949,1954],"Nuxt Content will automatically generate a path for each file in the collection, making it easy to create URL mappings. Here are examples of generated paths based on file structure: FilePathcontent/index.md/content/about.md/aboutcontent/blog/index.md/blogcontent/blog/hello.md/blog/hellocontent/1.guide/2.installation/guide/installation You can use the helper queryCollection('COLLECTION').path('PATH') to retrieve content by a specific path.",{"id":1963,"title":1964,"titles":1965,"content":1966,"level":380},"/docs/collections/types#schema-overrides","Schema Overrides",[1949,1954],"When you use the page type, Nuxt Content generates several standard fields that are commonly used for web pages. These fields provide structure and are automatically applied to the collectionโ€™s schema: path: Generated route pathtitle: Page titledescription: Page descriptionseo: SEO metadata (to be used with Nuxt's useSeoMeta composable)body: Page content parsed as ASTnavigation: Page navigation configuration (for queryCollectionNavigation) Here is the corresponding schema applied: path: z.string(),\n title: z.string(),\n description: z.string(),\n seo: z.intersection(\n z.object({\n title: z.string().optional(),\n description: z.string().optional(),\n meta: z.array(z.record(z.string(), z.any())).optional(),\n link: z.array(z.record(z.string(), z.any())).optional(),\n }),\n z.record(z.string(), z.any()),\n ).optional().default({}),\n body: z.object({\n type: z.string(),\n children: z.any(),\n toc: z.any(),\n }),\n navigation: z.union([\n z.boolean(),\n z.object({\n title: z.string(),\n description: z.string(),\n icon: z.string(),\n }),\n ]).default(true), You can override any of these fields by defining them in the collectionโ€™s schema.",{"id":1968,"title":1969,"titles":1970,"content":1971,"level":312},"/docs/collections/types#data-type","Data type",[1949],"defineCollection({\n source: 'authors/**.yml',\n type: 'data'\n}) The data type is useful for content that doesn't directly correspond to a webpage but instead represents structured data you might want to query and display within your application. With data collections, you have complete control over the schema, allowing you to define custom structures. There's no strict relationship between collection type and file extension. For instance, a page collection can use Markdown or YAML or JSON files, and data collections can use any of these formats as well.",{"id":1973,"title":1974,"titles":1975,"content":1976,"level":312},"/docs/collections/types#ordering-files","Ordering Files",[1949],"For both types, you may want to control the display order in lists. Use numeric prefixes in file and directory names to specify an order. Nuxt Content will use these numbers when ordering content lists. Nuxt Content uses alphabetical order for sorting, so if you want to use numerical order, you need to prefix single digit numbers with 0. For example, without the 0 prefix, 10.foo.md would come before 2.bar.md. content/\n 1.frameworks/\n 1.vue.md\n 2.nuxt.md\n ...\n 2.examples/\n 01.nuxthub.md\n 02.vercel.md\n 03.netlify.md\n 04.heroku.md\n ...\n 10.cloudflare.md\n index.md Separate number from file name using . character. Using any other separator will not work. 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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"id":40,"title":1978,"titles":1979,"content":1980,"level":279},"Collection Sources",[],"Learn how to import your files in Nuxt Content collections. Nuxt Content provides several ways to import content files into your collection. You can configure the source by using the source property within defineCollection: import { defineCollection, defineContentConfig } from '@nuxt/content'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n source: '**',\n type: 'page'\n })\n }\n})",{"id":1982,"title":1983,"titles":1984,"content":1985,"level":312},"/docs/collections/sources#source","source",[1978],"The source property can be defined as either a string (following a glob pattern) or an object, allowing more detailed source configuration for your target directory and files within the content folder. Example: source: '**' includes all files within the content directory and its subdirectories.source: '**/*.md'includes all Markdown files within the content directory and its subdirectories.source: 'docs/**/*.yml' includes all YML files within the content/docs and its subdirectories.source: '**/*.{json,yml}' includes JSON or YML file within the content directory and all its subdirectories.source: '*.json' includes only JSON files located directly within the content directory, excluding any subdirectories.",{"id":1987,"title":1988,"titles":1989,"content":1990,"level":380},"/docs/collections/sources#include-required","include (required)",[1978,1983],"Glob pattern of your target repository and files in the content folder.",{"id":1992,"title":1993,"titles":1994,"content":1995,"level":380},"/docs/collections/sources#exclude","exclude",[1978,1983],"Glob patterns to exclude content from the import.",{"id":1997,"title":1998,"titles":1999,"content":2000,"level":380},"/docs/collections/sources#prefix","prefix",[1978,1983],"This configuration only applied for page type with 1-to-1 relationship between content files and pages on your site. It represents the path prefix (base URL) of the corresponding page on the website. The prefix must start by a leading /. By default, module extracts the static prefix of source(or source.include) and uses it as a prefix for content paths. For example, if you define /en/** source, module will auto-fill the prefix with /en. You can manually provide a prefix to override this behavior. The prefix can be removed by setting prefix: '/' in the collection source. defineCollection({\n type: \"page\",\n source: {\n include: \"en/**\",\n exclude: [\"en/index.md\"],\n prefix: '/'\n }\n})",{"id":2002,"title":2003,"titles":2004,"content":2005,"level":380},"/docs/collections/sources#cwd","cwd",[1978,1983],"Root directory for content matching. Example: If you want to include files from a folder outside the content directory, set the absolute path of that folder to the cwd property. source: {\n cwd: path.resolve('packages/my-pkg/docs'),\n include: '**/*.md',\n}",{"id":2007,"title":2008,"titles":2009,"content":2010,"level":380},"/docs/collections/sources#repository","repository",[1978,1983],"External source representing a remote git repository URL (e.g., https://github.com/nuxt/content), or an object containing Git branch / tag information, or optionally authentication When defining an external source you must also define the include option.\ninclude pattern is essential for the module to know which files to use for the collection. import { defineCollection, defineContentConfig } from '@nuxt/content'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n type: 'page',\n source: {\n repository: 'https://github.com/nuxt/content',\n include: 'docs/content/**',\n },\n })\n }\n})",{"id":2012,"title":2013,"titles":2014,"content":2015,"level":430},"/docs/collections/sources#branch-tag","branch / tag",[1978,1983,2008],"This option allows for cloning a Git repository by its tag or branch. Example:\nIf you want to clone by a tag, make the repository attribute an object, with the url of your repository, and set the tag attribute. import { defineCollection, defineContentConfig } from '@nuxt/content'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n type: 'page',\n source: {\n repository: {\n url: 'https://github.com/nuxt/content',\n tag: 'v1'\n },\n include: 'docs/content/**',\n },\n })\n }\n}) Example: If you want to clone by a remote branch, make the repository attribute an object, with the url of your repository, and set the branch attribute. import { defineCollection, defineContentConfig } from '@nuxt/content'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n type: 'page',\n source: {\n repository: {\n url: 'https://github.com/nuxt/content',\n branch: 'dev'\n },\n include: 'docs/content/**',\n },\n })\n }\n})",{"id":2017,"title":2018,"titles":2019,"content":2020,"level":430},"/docs/collections/sources#auth","auth",[1978,1983,2008],"This option allows for basic and token-based authentication for Git repositories. Never commit authentication tokens or credentials directly in your code. Use environment variables or other secure methods to provide these values at runtime. Example: If you want to use basic authentication (e.g. for BitBucket repositories), you can use: defineCollection({\n type: 'page',\n source: {\n repository: {\n url: 'https://bitbucket.org/username/repo',\n auth: {\n username: 'username',\n password: 'password',\n },\n },\n },\n}) Example: If you need to use authentication tokens (e.g. for Github, Gitlab, some Forgejo providers), you can do the following: defineCollection({\n type: 'page',\n source: {\n repository: {\n url: 'https://github.com/username/repo',\n auth: {\n username: 'username',\n token: 'password',\n },\n },\n },\n}) 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"id":44,"title":2022,"titles":2023,"content":2024,"level":279},"Schema Validators",[],"Define collection schemas with your preferred validator and full type-safety. Nuxt Content supports defining collection schemas with multiple validators. Out of the box, this includes popular libraries like Zod v3 / v4 and Valibot (examples below). The system is extensible and can support other validators via JSON Schema adapters. Schemas enforce data consistency and drive generated types and Studio forms.",{"id":2026,"title":2027,"titles":2028,"content":272,"level":312},"/docs/collections/validators#using-zod-v3","Using Zod v3",[2022],{"id":2030,"title":2031,"titles":2032,"content":2033,"level":380},"/docs/collections/validators#install","Install",[2022,2027],"pnpm add -D zod zod-to-json-schema\n# or\nnpm i -D zod zod-to-json-schema Prefer importing z directly from zod. import { defineContentConfig, defineCollection, property } from '@nuxt/content'\nimport { z } from 'zod' // or 'zod/v3' if your setup exposes this subpath\n\nexport default defineContentConfig({\n collections: {\n blog: defineCollection({\n type: 'page',\n source: 'blog/*.md',\n schema: z.object({\n title: z.string(),\n description: z.string().optional(),\n date: z.date(),\n draft: z.boolean().default(false),\n tags: z.array(z.string()).optional(),\n image: z.object({\n src: property(z.string()).editor({ input: 'media' }),\n alt: z.string()\n })\n })\n })\n }\n}) Dates are serialised as ISO strings under the hood (JSON Schema format: date-time). The z re-export from @nuxt/content is deprecated and will be removed in a future release. Import z from zod (or zod/v3) instead.",{"id":2035,"title":2036,"titles":2037,"content":2038,"level":312},"/docs/collections/validators#using-zod-v4","Using Zod v4",[2022],"Zod v4 provides a native JSON Schema export. No zod-to-json-schema dependency is required.",{"id":2040,"title":2041,"titles":2042,"content":2043,"level":380},"/docs/collections/validators#install-zod","Install Zod",[2022,2036],"pnpm add -D zod\n# or\nnpm i -D zod import { defineContentConfig, defineCollection, property } from '@nuxt/content'\nimport { z } from 'zod/v4'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n type: 'page',\n source: 'docs/**/*.md',\n schema: z.object({\n title: z.string(),\n description: z.string().optional(),\n updatedAt: z.date(),\n draft: z.boolean().optional(),\n tags: z.array(z.string()).optional(),\n hero: z.object({\n image: property(z.string()).editor({ input: 'media' }),\n caption: z.string().optional()\n })\n })\n })\n }\n})",{"id":2045,"title":2046,"titles":2047,"content":2048,"level":312},"/docs/collections/validators#using-valibot","Using Valibot",[2022],"Use Valibot primitives to define your schema.",{"id":2050,"title":2051,"titles":2052,"content":2053,"level":380},"/docs/collections/validators#install-valibot","Install Valibot",[2022,2046],"pnpm add -D valibot @valibot/to-json-schema\n# or\nnpm i -D valibot @valibot/to-json-schema import { defineContentConfig, defineCollection, property } from '@nuxt/content'\nimport { object, string, boolean, array, date, optional } from 'valibot'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n type: 'page',\n source: 'docs/**/*.md',\n schema: object({\n title: string(),\n description: optional(string()),\n updatedAt: date(),\n draft: optional(boolean()),\n tags: optional(array(string())),\n hero: object({\n image: property(string()).editor({ input: 'media' }),\n caption: optional(string())\n })\n })\n })\n }\n})",{"id":2055,"title":2056,"titles":2057,"content":2058,"level":312},"/docs/collections/validators#choosing-a-validator","Choosing a validator",[2022],"Zod v3: battle-tested, rich ecosystem; great DX with re-exported z.Valibot: lightweight and fast; bring your own importer from valibot. Only install and use the validator you need. Nuxt Content auto-detects supported validators that are installed.",{"id":2060,"title":2061,"titles":2062,"content":2063,"level":312},"/docs/collections/validators#support-for-other-validators","Support for other validators",[2022],"Nuxt Content converts your collection schema to JSON Schema Draft-07 internally. If your preferred validator can be transformed to Draft-07 (or has a compatible adapter), it can be supported. Currently, Zod (v3 and v4) and Valibot are auto-detected. If youโ€™d like first-class support for another validator, consider opening an issue or PR in the Nuxt Content repository.",{"id":2065,"title":2066,"titles":2067,"content":2068,"level":312},"/docs/collections/validators#editor-metadata-optional","Editor metadata (optional)",[2022],"You can enrich fields for Studio via property(...).editor({ ... }) with both validators. See the Studio docs for mapping details. Learn how editor metadata maps to form inputs in Studio. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"id":48,"title":2070,"titles":2071,"content":2072,"level":279},"Inherit Schema from a Vue Component",[],"Reuse a Vue component's props as part of your collection schema using property().inherit(). You can reuse a Vue component's props as part of your collection schema. This helps keep your content model aligned with your UI, reduces duplication, and prevents drift.",{"id":2074,"title":2075,"titles":2076,"content":2077,"level":312},"/docs/collections/inherit-schema-from-component#how-it-works","How it works",[2070],"Nuxt Content provides a property() helper that augments your validator and adds the following utility: inherit(path): replace the current object schema with the props JSON Schema inferred from a Vue component at path Under the hood, Nuxt Content reads the component's props (via nuxt-component-meta) and converts them to JSON Schema, then merges them into your collection schema.",{"id":2079,"title":2080,"titles":2081,"content":2082,"level":312},"/docs/collections/inherit-schema-from-component#example","Example",[2070],"import { defineContentConfig, defineCollection, property } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n pages: defineCollection({\n type: 'page',\n source: '**/*.md',\n schema: z.object({\n // Reuse props from a local component\n hero: property(z.object({})).inherit('app/components/HeroSection.vue'),\n\n // Reuse props from a dependency (path is resolved like an import)\n button: property(z.object({})).inherit('@nuxt/ui/components/Button.vue')\n })\n })\n }\n})",{"id":2084,"title":2085,"titles":2086,"content":2087,"level":312},"/docs/collections/inherit-schema-from-component#notes","Notes",[2070],"The argument to inherit() is resolved like a module path. You can pass a relative path from project root or a package path.inherit() expects to be used on an object field (e.g., property(z.object({}))).Nested usage is supported: you can place inherited objects inside other objects and arrays; Nuxt Content recursively replaces $content.inherit markers.If the component cannot be resolved, the schema falls back to the original object definition. Pair inherit() with editor(...) for better Studio forms if you need custom inputs on top of the component's props. 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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);}",{"id":59,"title":58,"titles":2089,"content":2090,"level":279},[],"Create and query Markdown files in your Nuxt applications and use the MDC syntax to integrate Vue components.",{"id":2092,"title":2093,"titles":2094,"content":272,"level":312},"/docs/files/markdown#usage","Usage",[58],{"id":2096,"title":2097,"titles":2098,"content":2099,"level":380},"/docs/files/markdown#define-a-collection","Define a Collection",[58,2093],"import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n blog: defineCollection({\n type: 'page',\n source: 'blog/*.md',\n schema: z.object({\n date: z.string()\n })\n })\n }\n}) Learn more about the page collection type.",{"id":2101,"title":2102,"titles":2103,"content":2104,"level":380},"/docs/files/markdown#create-md-files","Create .md files",[58,2093],"Create blog posts in content/blog/ directory. ---\ndate: 2020-11-11\n---\n\n# Foo\n\nThis is Foo blog post.\n---\ndate: 2024-12-12\n---\nHello\nI am bar. Nice to meet you.",{"id":2106,"title":2107,"titles":2108,"content":2109,"level":380},"/docs/files/markdown#query-markdown-files","Query Markdown Files",[58,2093],"Now we can query blog posts: // Get the foo post\nconst fooPost = await queryCollection('blog').path('/blog/foo').first()\n\n// Find all posts\nconst allPosts = await queryCollection('blog').order('date', 'DESC').all()",{"id":2111,"title":2112,"titles":2113,"content":2114,"level":380},"/docs/files/markdown#display-markdown","Display Markdown",[58,2093],"To display the content of a markdown file, you can use the \u003CContentRenderer> component. \u003Cscript setup>\nconst slug = useRoute().params.slug\nconst { data: post } = await useAsyncData(`blog-${slug}`, () => {\n return queryCollection('blog').path(`/blog/${slug}`).first()\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- Render the blog post as Prose & Vue components -->\n \u003CContentRenderer :value=\"post\" />\n\u003C/template> Read more about the \u003CContentRenderer> component and Prose Components.",{"id":2116,"title":2117,"titles":2118,"content":2119,"level":312},"/docs/files/markdown#frontmatter","Frontmatter",[58],"Frontmatter is a convention of Markdown-based CMS to provide meta-data to pages, like description or title. In Nuxt Content, the frontmatter uses the YAML syntax with key: value pairs. These data are available when rendering the content and can store any information that you would need.",{"id":2121,"title":2122,"titles":2123,"content":2124,"level":380},"/docs/files/markdown#syntax","Syntax",[58,2117],"You can declare a frontmatter block at the top of the Markdown files in the content/ directory with the --- identifier. ---\ntitle: 'Title of the page'\ndescription: 'meta description of the page'\n---\n\n\u003C!-- Content of the page --> const home = await queryCollection('content').path('/').first()\n\nconsole.log(home.title)\n// => 'Title of the page'\nconsole.log(home.description)\n// => 'meta description of the page'\nconsole.log(home.body)\n// => AST object of the page content",{"id":2126,"title":2127,"titles":2128,"content":2129,"level":380},"/docs/files/markdown#native-parameters","Native parameters",[58,2117],"KeyTypeDefaultDescriptiontitlestringFirst \u003Ch1> of the pageTitle of the page, will also be injected in metasdescriptionstringFirst \u003Cp> of the pageDescription of the page, will be shown below the title and injected into the metasnavigationbooleantrueDefine if the page is included in queryCollectionNavigation return value. Additional parameters that you have defined in your frontmatter block need to be defined in your schema (see the date parameter in the example at top of this page) to be able to use them for querying.",{"id":2131,"title":2132,"titles":2133,"content":2134,"level":312},"/docs/files/markdown#mdc-syntax","MDC Syntax",[58],"We created the MDC syntax to supercharge Markdown and give you the ability to integrate Vue components with slots and props inside your Markdown. Explore the full MDC documentation. Install the MDC VS Code extension to get proper syntax highlighting for the MDC syntax.",{"id":2136,"title":2137,"titles":2138,"content":2139,"level":380},"/docs/files/markdown#vue-components","Vue Components",[58,2132],"You can use any Vue component in your Markdown files. We have a special syntax to make it easier to use components in your Markdown files. ::component-name\nDefault slot content\n:: Components that are used in Markdown have to be marked as global in your Nuxt app if you don't use the components/content/ directory. Visit Nuxt 3 docs to learn more.",{"id":2141,"title":2142,"titles":2143,"content":2144,"level":430},"/docs/files/markdown#block-components","Block Components",[58,2132,2137],"Block components are components that accept Markdown content or another component as a slot. The component must contain at least one \u003Cslot /> component to accept formatted text. In a markdown file, use the component with the :: identifier. ::card\nThe content of the card\n::\n\u003C!-- components/content/Card.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"p-2 border bg-white dark:bg-black dark:border-gray-700 rounded\">\n \u003Cslot />\n \u003C/div>\n\u003C/template>\nThe content of the card",{"id":2146,"title":2147,"titles":2148,"content":2149,"level":430},"/docs/files/markdown#slots","Slots",[58,2132,2137],"A component's slots can accept content or another components. Default slot renders the top-level content inside the block component or with #defaultNamed slots use the # identifier to render the corresponding content. ::hero\nMy Page Title\n\n#description\nThis will be rendered inside the `description` slot.\n::\n\u003Ctemplate>\n \u003Csection>\n \u003Ch1 class=\"text-4xl\">\n \u003Cslot mdc-unwrap=\"p\" />\n \u003C/h1>\n \u003Cslot name=\"description\" />\n \u003C/section>\n\u003C/template>\nMy Page TitleThis will be rendered inside the description slot. Read more about the \u003Cslot /> component. You can use Markdown inside your components slots:::my-title\nA [rich text](/) will be **rendered** by the component.\n::\n\u003Ctemplate>\n \u003Ch1 class=\"text-4xl\">\n \u003Cslot mdc-unwrap=\"p\" />\n \u003C/h1>\n\u003C/template>\nA rich text will be rendered by the component.",{"id":2151,"title":2152,"titles":2153,"content":2154,"level":430},"/docs/files/markdown#props","Props",[58,2132,2137],"There are two ways to pass props to components using MDC.",{"id":2156,"title":2157,"titles":2158,"content":2159,"level":437},"/docs/files/markdown#inline-method","Inline method",[58,2132,2137,2152],"The {} identifier passes props to components in a terse way by using a key=value syntax. ::alert{type=\"warning\"}\nThe **alert** component.\n::\n\u003Cscript setup>\nconst props = defineProps({ type: { type: String } })\n\nconst alertClass = computed(() => {\n return {\n warning: 'bg-orange-100 border-orange-200 dark:bg-orange-900 dark:border-orange-800',\n info: 'bg-blue-100 border-blue-200 dark:bg-blue-900 dark:border-blue-800',\n success: 'bg-green-100 border-green-200 dark:bg-green-900 dark:border-green-800',\n }[props.type]\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv\n class=\"text-black p-2 border dark:text-white rounded\"\n :class=\"alertClass\"\n >\n \u003Cslot mdc-unwrap=\"p\" />\n \u003C/div>\n\u003C/template>\nThe alert component. Multiple props can be separated with a space: ::alert{type=\"warning\" icon=\"exclamation-circle\"}\nOops! An error occurred\n:: The v-bind shorthand : can be also be used to bind a prop to a value in the frontmatter. ---\ntype: \"warning\"\n---\n\n::alert{:type=\"type\"}\nYour warning\n:: If you want to pass arrays or objects as props to components you can pass them as JSON string and prefix the prop key with a colon to automatically decode the JSON string. Note that in this case you should use single quotes for the value string so you can use double quotes to pass a valid JSON string: ::dropdown{:items='[\"Nuxt\", \"Vue\", \"React\"]'}\n::\n::dropdown{:items='[1,2,3.5]'}\n::\n::chart{:options='{\"responsive\": true, \"scales\": {\"y\": {\"beginAtZero\": true}}}'}\n::",{"id":2161,"title":2162,"titles":2163,"content":2164,"level":437},"/docs/files/markdown#yaml-method","YAML method",[58,2132,2137,2152],"The YAML method uses the --- identifier to declare one prop per line, that can be useful for readability. ::icon-card\n---\nicon: IconNuxt\ndescription: Harness the full power of Nuxt and the Nuxt ecosystem.\ntitle: Nuxt Architecture.\n---\n::\n\u003Cscript setup>\ndefineProps({\n title: {\n type: String,\n default: 'Default title'\n },\n description: {\n type: String,\n default: 'Default description'\n },\n icon: {\n type: String,\n default: 'IconMarkdown'\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"p-6 border bg-white dark:bg-black dark:border-gray-700 rounded\">\n \u003Ccomponent :is=\"icon\" class=\"w-20 h-20\" />\n \u003Ch2 class=\"text-3xl font-semibold mb-2\">\n {{ title }}\n \u003C/h2>\n \u003Cp>{{ description }}\u003C/p>\n \u003C/div>\n\u003C/template>",{"id":2166,"title":2167,"titles":2168,"content":2169,"level":380},"/docs/files/markdown#attributes","Attributes",[58,2132],"Attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax. Possible values are all named attributes, classes with the notation .class-name and an ID with #id-name. Hello [World]{style=\"color: green;\" .custom-class #custom-id}!\nHello World ! In addition to mdc components and span, attribute syntax will work on images, links, inline code, *bold* and _italic_ text. Attributes work on:\n\n- [Attributes](#attributes){style=\"background-color: green;\"}, `code`{style=\"color: cyan;\"},\n- _italic_{style=\"background-color: yellow; color:black;\"} and **bold**{style=\"background-color: lightgreen;\"} texts.\nAttributes work on:Attributes, code,italic and bold texts.",{"id":2171,"title":2172,"titles":2173,"content":2174,"level":380},"/docs/files/markdown#binding-data","Binding Data",[58,2132],"You can bind data within your Markdown document using the {{ $doc.variable || 'defaultValue' }} syntax. These values can be defined in the YAML frontmatter at the top of the document, within each MDC component, or injected using the data prop of the \u003CContentRenderer> component.",{"id":2176,"title":2177,"titles":2178,"content":2179,"level":430},"/docs/files/markdown#define-in-yaml","Define in YAML",[58,2132,2172],"---\ntitle: 'Title of the page'\ndescription: 'meta description of the page'\ncustomVariable: 'Custom Value'\n---\n\n# The Title is {{ $doc.title }} and customVariable is {{ $doc.customVariable || 'defaultValue' }}",{"id":2181,"title":2182,"titles":2183,"content":2184,"level":430},"/docs/files/markdown#define-in-external-with-contentrenderer","Define in external with \u003CContentRenderer>",[58,2132,2172],"\u003Ctemplate>\n \u003Cdiv>\n \u003CContentRenderer :value=\"data\" :data=\"mdcVars\"/>\n \u003Cbutton type=\"button\" v-on:click=\"mdcVars.name = 'Hugo'\">Change name\u003C/button>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData(() => queryCollection('content').path('/test').first());\nconst mdcVars = ref({ name: 'Maxime'});\n\u003C/script> # Hello {{ $doc.name || 'World' }}",{"id":2186,"title":109,"titles":2187,"content":2188,"level":312},"/docs/files/markdown#prose-components",[58],"In Nuxt Content, the prose represents HTML tags generated by the Markdown syntax, such as heading levels and links. For each HTML tag, a Vue component is used, allowing you to override them if needed, for example \u003Cp> becomes \u003CProseP>. If you want to customize a Prose component, here are the recommended steps: Check out the original component sources.Use the exact same props.In your components/content/ directory, give it the same name.Make it yours ๐Ÿš€. Read the complete Prose reference in the Prose Components section.",{"id":2190,"title":2191,"titles":2192,"content":2193,"level":312},"/docs/files/markdown#code-highlighting","Code Highlighting",[58],"Nuxt Content uses Shiki, which colors tokens with VSCode themes. Code highlighting works both on ProsePre and ProseCode. Each line of a code block gets its line number in the line attribute so lines can be labeled or individually styled. Read the API reference to configure or entirely disable syntax highlighting.",{"id":2195,"title":2196,"titles":2197,"content":2198,"level":312},"/docs/files/markdown#images","Images",[58],"You can add images to your public directory: content/\n index.md\npublic/\n image.png\nnuxt.config.ts\npackage.json And then use them in your markdown files in the content directory as such: ![my image](/image.png)",{"id":2200,"title":2201,"titles":2202,"content":2203,"level":312},"/docs/files/markdown#excerpt","Excerpt",[58],"Content excerpt or summary can be extracted from the content using \u003C!--more--> as a divider. ---\ntitle: Introduction\n---\n\nLearn how to use `@nuxt/content`.\n\n\u003C!--more-->\n\nFull amount of content beyond the more divider. Description property will contain the excerpt content unless defined within the frontmatter props. If there is no \u003C!--more--> divider in the text then excerpt is undefined. You should define the excerpt field in the collection schema if you want to use the excerpt feature.const content = defineCollection({\n type: 'page',\n source: '**',\n schema: z.object({\n excerpt: z.object({\n type: z.string(),\n children: z.any(),\n }),\n }),\n})\nRead more about the collection schema. Example variables will be injected into the document: {\n \"excerpt\": Object\n \"body\": Object\n // ... other keys\n} 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sDpXG, html code.shiki .sDpXG{--shiki-light:#E53935;--shiki-light-text-decoration:underline;--shiki-default:#F07178;--shiki-default-text-decoration:underline;--shiki-dark:#F07178;--shiki-dark-text-decoration:underline}html pre.shiki code .s5tWE, html code.shiki .s5tWE{--shiki-light:#E53935;--shiki-light-font-style:italic;--shiki-default:#F07178;--shiki-default-font-style:italic;--shiki-dark:#F07178;--shiki-dark-font-style:italic}html pre.shiki code .sHepR, html code.shiki .sHepR{--shiki-light:#39ADB5;--shiki-light-font-weight:bold;--shiki-default:#89DDFF;--shiki-default-font-weight:bold;--shiki-dark:#89DDFF;--shiki-dark-font-weight:bold}html pre.shiki code .so75L, html code.shiki .so75L{--shiki-light:#E53935;--shiki-light-font-weight:bold;--shiki-default:#F07178;--shiki-default-font-weight:bold;--shiki-dark:#F07178;--shiki-dark-font-weight:bold}html pre.shiki code .sQLHv, html code.shiki .sQLHv{--shiki-light:#90A4AE;--shiki-light-text-decoration:underline;--shiki-default:#EEFFFF;--shiki-default-text-decoration:underline;--shiki-dark:#BABED8;--shiki-dark-text-decoration:underline}",{"id":63,"title":62,"titles":2205,"content":2206,"level":279},[],"How to define, write and query YAML data.",{"id":2208,"title":2209,"titles":2210,"content":2211,"level":312},"/docs/files/yaml#define-collection","Define Collection",[62],"import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n authors: defineCollection({\n type: 'data',\n source: 'authors/**.yml',\n schema: z.object({\n name: z.string(),\n avatar: z.string(),\n url: z.string()\n })\n })\n }\n})",{"id":2213,"title":2214,"titles":2215,"content":2216,"level":312},"/docs/files/yaml#create-yml-files","Create .yml files",[62],"Create authors files in content/authors/ directory. name: Ahad Birang\navatar: https://avatars.githubusercontent.com/u/2047945?v=4\nurl: https://github.com/farnabaz\nname: Baptiste Leproux\navatar: https://avatars.githubusercontent.com/u/7290030?v=4\nurl: https://github.com/larbish",{"id":2218,"title":2219,"titles":2220,"content":2221,"level":312},"/docs/files/yaml#query-data","Query Data",[62],"Now we can query authors: \u003Cscript lang=\"ts\" setup>\n// Find a single author\nconst { data: author } = await useAsyncData('larbish', () => {\n return queryCollection('authors')\n .where('stem', '=', 'authors/larbish')\n .first()\n})\n\n// Get all authors\nconst { data: authors } = await useAsyncData('authors', () => {\n return queryCollection('authors')\n .order('name', 'DESC')\n .all()\n})\n\u003C/script> 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"id":67,"title":66,"titles":2223,"content":2224,"level":279},[],"How to define, write and query JSON data.",{"id":2226,"title":2209,"titles":2227,"content":2228,"level":312},"/docs/files/json#define-collection",[66],"import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n authors: defineCollection({\n type: 'data',\n source: 'authors/**.json',\n schema: z.object({\n name: z.string(),\n avatar: z.string(),\n url: z.string()\n })\n })\n }\n})",{"id":2230,"title":2231,"titles":2232,"content":2233,"level":312},"/docs/files/json#create-json-files","Create .json files",[66],"Create authors files in content/authors/ directory. {\n \"name\": \"Ahad Birang\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/2047945?v=4\",\n \"url\": \"https://github.com/farnabaz\"\n}\n{\n \"name\": \"Baptiste Leproux\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/7290030?v=4\",\n \"url\": \"https://github.com/larbish\"\n} Each file in data collection should contain only one object, therefore having top level array in a JSON file will cause invalid result in query time.",{"id":2235,"title":2219,"titles":2236,"content":2221,"level":312},"/docs/files/json#query-data",[66],{"id":71,"title":70,"titles":2238,"content":2239,"level":279},[],"How to define, write and query CSV data.",{"id":2241,"title":2242,"titles":2243,"content":2244,"level":312},"/docs/files/csv#single-file-source","Single-file source",[70],"When you point a collection to a single CSV file (instead of a glob), Nuxt Content treats each data row as a separate item in the collection. Define the collection: set source to the path of a single .csv file.Item generation: each data row becomes an item with the rowโ€™s fields at the top level (no body array).IDs: item IDs are suffixed with #\u003CrowNumber>, where #1 is the first data row after the header. import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n people: defineCollection({\n type: 'data',\n source: 'org/people.csv',\n schema: z.object({\n name: z.string(),\n email: z.string().email()\n })\n })\n }\n}) name,email\nAlice,alice@example.com\nBob,bob@example.com Each row produces its own item. For example, the first data row will have an ID ending with #1 and the second with #2. You can query by any column: const { data: alice } = await useAsyncData('alice', () =>\n queryCollection('people')\n .where('email', '=', 'alice@example.com')\n .first()\n)\n\nconst { data: allPeople } = await useAsyncData('all-people', () =>\n queryCollection('people')\n .order('name', 'ASC')\n .all()\n) The header row is required and is not turned into an item.With a single-file source, items contain row fields at the top level (no body).If you prefer treating each CSV file as a single item containing all rows in body, use a glob source like org/**.csv instead of a single file.",{"id":2246,"title":2247,"titles":2248,"content":2249,"level":312},"/docs/files/csv#multiple-files-source","Multiple-files source",[70],"If you uses */**.csv as source in configuration, Nuxt Content will treat them differently from single-file collections.Each file(not row) will be treated as an item, rows will be parsed into body field in item object as an array. import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n charts: defineCollection({\n type: 'data',\n source: 'charts/**.csv',\n schema: z.object({\n // Body is important in CSV files, without body field you cannot access to data array\n body: z.array(z.object({\n label: z.string(),\n value: z.number()\n }))\n })\n })\n }\n}) Create chart files in content/charts/ directory. label,value\nA,100\nB,200\nC,300\nlabel,value\nFoo,123\nBar,456\nBaz,789 Each CSV file should have a header row that defines the column names, which will be used as object keys when parsed. Now we can query charts: \u003Cscript lang=\"ts\" setup>\n// Find a single chart\nconst { data: chart1 } = await useAsyncData('chart1', () => {\n return queryCollection('charts')\n .where('id', '=', 'charts/charts/chart1.csv')\n .first()\n})\n\n// Get all charts\nconst { data: charts } = await useAsyncData('charts', () => {\n return queryCollection('charts')\n .order('id', 'ASC')\n .all()\n})\n\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cul>\n \u003Cli v-for=\"chart in charts\" :key=\"chart.id\">\n \u003C!-- CSV data are in `chart.body` as an array -->\n \u003Cp v-for=\"data in chart.body\">\n {{ data.label }} - {{ data.value }}\n \u003C/p>\n \u003C/li>\n \u003C/ul>\n\u003C/template>",{"id":2251,"title":16,"titles":2252,"content":2253,"level":312},"/docs/files/csv#configuration",[70],"You can configure how CSV files are parsed in your nuxt.config.ts: export default defineNuxtConfig({\n content: {\n build: {\n csv: {\n // Convert CSV data to JSON objects\n json: true,\n // Specify custom delimiter (default is ',')\n delimiter: ','\n }\n }\n }\n}) With json: true in the configuration, each row will be converted to a JavaScript object with the header row used as keys: [\n {\n \"id\": \"1\",\n \"name\": \"John Doe\",\n \"email\": \"john@example.com\"\n },\n {\n \"id\": \"2\",\n \"name\": \"Jane Smith\",\n \"email\": \"jane@example.com\"\n }\n]",{"id":2255,"title":2256,"titles":2257,"content":2258,"level":312},"/docs/files/csv#custom-delimiters","Custom Delimiters",[70],"If your CSV files use a different delimiter, you can specify it in the configuration: export default defineNuxtConfig({\n content: {\n build: {\n csv: {\n delimiter: ';' // Use semicolon as delimiter\n }\n }\n }\n}) This would parse CSV files like: id;name;email\n1;John Doe;john@example.com\n2;Jane Smith;jane@example.com The CSV parser can be disabled by setting csv: false in the configuration if you don't need CSV support. 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"id":81,"title":80,"titles":2260,"content":2261,"level":279},[],"The queryCollection composable provides methods for querying and fetching your collections.",{"id":2263,"title":2093,"titles":2264,"content":2265,"level":312},"/docs/utils/query-collection#usage",[80],"Use the auto-imported queryCollection to find contents inside a collection. Here we assume that you have defined docs collection inside content.config.ts. If you have not defined any collection, check How to define a collection. \u003Cscript setup>\nconst route = useRoute()\nconst { data: page } = await useAsyncData(route.path, () => {\n return queryCollection('docs').path(route.path).first()\n})\n\u003C/script> The queryCollection utility is available in both Vue and Nitro. Checkout Server Usage for more details on how to use it on the server side.",{"id":2267,"title":2268,"titles":2269,"content":272,"level":312},"/docs/utils/query-collection#api","API",[80],{"id":2271,"title":2272,"titles":2273,"content":2274,"level":380},"/docs/utils/query-collection#type","Type",[80,2268],"function queryCollection\u003CT extends keyof Collections>(collection: T): CollectionQueryBuilder\u003CCollections[T]>\n\ninterface CollectionQueryBuilder\u003CT> {\n where(field: keyof T | string, operator: SQLOperator, value?: unknown): CollectionQueryBuilder\u003CT>\n andWhere(groupFactory: QueryGroupFunction\u003CT>): CollectionQueryBuilder\u003CT>\n orWhere(groupFactory: QueryGroupFunction\u003CT>): CollectionQueryBuilder\u003CT>\n order(field: keyof T, direction: 'ASC' | 'DESC'): CollectionQueryBuilder\u003CT>\n // ... other methods\n}",{"id":2276,"title":2277,"titles":2278,"content":2279,"level":380},"/docs/utils/query-collection#querycollectioncollection-collectionname","queryCollection(collection: CollectionName)",[80,2268],"Create a query builder to search in the specific collection. Parameter:\ncollection: The key of defined collection in content.config.ts",{"id":2281,"title":2282,"titles":2283,"content":2284,"level":380},"/docs/utils/query-collection#pathpath-string","path(path: string)",[80,2268],"Search for contents that have specific path. (path is an special field in page collections which generates based on fs path and can be use as route to render the content) Parameter:\npath: The path string to match. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs').path(route.path).first()\n})",{"id":2286,"title":2287,"titles":2288,"content":2289,"level":380},"/docs/utils/query-collection#selectfields-keyof-collection","select(...fields: keyof Collection)",[80,2268],"Select specific fields from the collection to be returned in the query result. Parameters:\n...fields: A list of field names to select from the collection. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n .select('path', 'title', 'description')\n .first()\n})",{"id":2291,"title":2292,"titles":2293,"content":2294,"level":380},"/docs/utils/query-collection#wherefield-keyof-collection-string-operator-sqloperator-value-unknown","where(field: keyof Collection | string, operator: SqlOperator, value?: unknown)",[80,2268],"Add a condition to the query to filter results based on a specific field. Parameters:\nfield: The field to filter onoperator: The SQL operator to use for comparison. Possible values include:\n'=': Equal to'>': Greater than'\u003C': Less than'\u003C>': Not equal to'IN': In a list of values'BETWEEN': Between two values'NOT BETWEEN': Not between two values'IS NULL': Is null'IS NOT NULL': Is not null'LIKE': Matches a pattern'NOT LIKE': Does not match a patternvalue: The value to compare against. The type depends on the operator used. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n .where('date', '\u003C', '2024-04-04')\n .where('category', '=', 'news')\n .all()\n})\n\n// Generated SQL\n// SELECT * FROM docs WHERE date \u003C '2024-04-04' AND category = 'news'",{"id":2296,"title":2297,"titles":2298,"content":2299,"level":380},"/docs/utils/query-collection#andwheregroupfactory-querygroupfunctioncollection","andWhere(groupFactory: QueryGroupFunction\u003CCollection>)",[80,2268],"Add an AND condition group to the query. This allows for more complex query conditions. Parameter:\ngroupFactory: A function that receives a query builder and can add multiple conditions that will be grouped together with AND const { data } = await useAsyncData('recent-docs', () => {\n return queryCollection('docs')\n .where('published', '=', true)\n .andWhere(query => query.where('date', '>', '2024-01-01').where('category', '=', 'news'))\n .all()\n})\n\n// Generated SQL\n// SELECT * FROM docs WHERE published = true AND (date > '2024-01-01' AND category = 'news')",{"id":2301,"title":2302,"titles":2303,"content":2304,"level":380},"/docs/utils/query-collection#orwheregroupfactory-querygroupfunctioncollection","orWhere(groupFactory: QueryGroupFunction\u003CCollection>)",[80,2268],"Add an OR condition group to the query. This allows for alternative conditions. Parameter:\ngroupFactory: A function that receives a query builder and can add multiple conditions that will be grouped together with OR const { data } = await useAsyncData('featured-docs', () => {\n return queryCollection('docs')\n .where('published', '=', true)\n .orWhere(query => query.where('featured', '=', true).where('priority', '>', 5))\n .all()\n})\n\n// Generated SQL\n// SELECT * FROM docs WHERE published = true AND (featured = true OR priority > 5)",{"id":2306,"title":2307,"titles":2308,"content":2309,"level":380},"/docs/utils/query-collection#orderfield-keyof-collection-direction-asc-desc","order(field: keyof Collection, direction: 'ASC' | 'DESC')",[80,2268],"Order the query results based on a specific field. Parameters:\nfield: The field to order by.direction: The direction of ordering, either 'ASC' for ascending or 'DESC' for descending. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n .order('date', 'DESC')\n .all()\n})",{"id":2311,"title":2312,"titles":2313,"content":2314,"level":380},"/docs/utils/query-collection#limitlimit-number","limit(limit: number)",[80,2268],"Limit the number of results returned by the query. Parameter:\nlimit: The maximum number of results to return. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n .limit(10)\n .all()\n})",{"id":2316,"title":2317,"titles":2318,"content":2319,"level":380},"/docs/utils/query-collection#skipskip-number","skip(skip: number)",[80,2268],"Skip a specified number of results in the query. Parameter:\nskip: The number of results to skip. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n // Skip first 5 items\n .skip(5)\n .all()\n})",{"id":2321,"title":2322,"titles":2323,"content":2324,"level":380},"/docs/utils/query-collection#all","all()",[80,2268],"Execute the query and return all matching results. Returns: A Promise that resolves to an array of all matching documents. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs').all()\n})",{"id":2326,"title":2327,"titles":2328,"content":2329,"level":380},"/docs/utils/query-collection#first","first()",[80,2268],"Execute the query and return the first matching result. Returns: A Promise that resolves to the first matching document, or null if no documents match. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs').first()\n})",{"id":2331,"title":2332,"titles":2333,"content":2334,"level":380},"/docs/utils/query-collection#count","count()",[80,2268],"Count the number of matched collection entries based on the query. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n // Count matches\n .count()\n})\n\n// Returns\n5 // number of matches You can also use count() with other methods defined above such as where() in order to apply additional conditions within the collection query. const route = useRoute()\nconst { data } = await useAsyncData(route.path, () => {\n return queryCollection('docs')\n .where('date', '\u003C', '2024-04-04')\n // Count matches\n .count()\n})\n\n// Returns\n3 // number of matches for the provided query",{"id":2336,"title":2337,"titles":2338,"content":2339,"level":312},"/docs/utils/query-collection#examples","Examples",[80],"Here is a complete example of how to fetch a list of documents in the docs collections. \u003Cscript setup lang=\"ts\">\nconst { data: docs } = await useAsyncData('documents-list', () => {\n return queryCollection('docs')\n .order('date', 'DESC')\n .select('title', 'path', 'description')\n .all()\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CNuxtLink v-for=\"doc in docs\" :key=\"doc.path\" :to=\"doc.path\">\n \u003Ch2>{{ doc.title }}\u003C/h2>\n \u003Cp>{{ doc.description }}\u003C/p>\n \u003C/NuxtLink>\n\u003C/template>",{"id":2341,"title":2342,"titles":2343,"content":2344,"level":312},"/docs/utils/query-collection#server-usage","Server Usage",[80],"Nuxt Content provides a similar utility to query collections on the server side. The only difference is that you need to pass event as the first argument to the queryCollection function. export default eventHandler(async (event) => {\n const { slug } = getRouterParams(event)\n const page = await queryCollection(event, 'docs').path(slug).first()\n return page\n}) Make sure to create server/tsconfig.json file with the following content to avoid type error.{\n \"extends\": \"../.nuxt/tsconfig.server.json\"\n} 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"id":85,"title":84,"titles":2346,"content":2347,"level":279},[],"The queryCollectionNavigation composable generates the navigation tree of given collection.",{"id":2349,"title":2093,"titles":2350,"content":2351,"level":312},"/docs/utils/query-collection-navigation#usage",[84],"Use the auto-imported queryCollectionNavigation to generate a navigation tree for a specific collection. This is particularly useful for creating dynamic navigation menus or sidebars based on your content structure. The function returns a chainable promise that allows you to add additional query conditions: \u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('navigation', () => {\n return queryCollectionNavigation('docs')\n .where('published', '=', true)\n .order('date', 'DESC')\n})\n\u003C/script> The queryCollectionNavigation utility is available in both Vue and Nitro. Checkout Server Usage for more details on how to use it on the server side.",{"id":2353,"title":2354,"titles":2355,"content":2356,"level":380},"/docs/utils/query-collection-navigation#navigation-metadata-with-navigationyml","Navigation metadata with .navigation.yml",[84,2093],"You can add metadata to a directory using a .navigation.yml file. title: Getting Started\nicon: i-lucide-square-play",{"id":2358,"title":2272,"titles":2359,"content":2360,"level":312},"/docs/utils/query-collection-navigation#type",[84],"function queryCollectionNavigation\u003CT extends keyof PageCollections>(\n collection: T,\n fields?: Array\u003Ckeyof PageCollections[T]>\n): ChainablePromise\u003CT, ContentNavigationItem[]>\n\ninterface ChainablePromise\u003CT extends keyof PageCollections, R> extends Promise\u003CR> {\n where(field: keyof PageCollections[T] | string, operator: SQLOperator, value?: unknown): ChainablePromise\u003CT, R>\n andWhere(groupFactory: QueryGroupFunction\u003CPageCollections[T]>): ChainablePromise\u003CT, R>\n orWhere(groupFactory: QueryGroupFunction\u003CPageCollections[T]>): ChainablePromise\u003CT, R>\n order(field: keyof PageCollections[T], direction: 'ASC' | 'DESC'): ChainablePromise\u003CT, R>\n}",{"id":2362,"title":2268,"titles":2363,"content":272,"level":312},"/docs/utils/query-collection-navigation#api",[84],{"id":2365,"title":2366,"titles":2367,"content":2368,"level":380},"/docs/utils/query-collection-navigation#querycollectionnavigationcollection-collectionname-extrafield-keyof-collection","queryCollectionNavigation(collection: CollectionName, extraField: keyof Collection)",[84,2268],"Generate a navigation tree for the specified collection. Parameters:\ncollection: The key of the defined collection in content.config.ts.extraFields: (Optional) An array of additional fields to include in the navigation items. (By default title and path are included in the navigation items.)Returns: A chainable promise that resolves to a navigation tree structure. The promise includes methods for adding query conditions:\nwhere(field, operator, value): Add a WHERE conditionandWhere(groupFactory): Add a grouped AND conditionorWhere(groupFactory): Add a grouped OR conditionorder(field, direction): Add an ORDER BY clause The navigation tree is generated based on the directory structure and ordering happens based on files ordering",{"id":2370,"title":2337,"titles":2371,"content":2372,"level":312},"/docs/utils/query-collection-navigation#examples",[84],"Basic usage without additional query conditions: \u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('navigation', () => {\n return queryCollectionNavigation('docs')\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnav>\n \u003Cul v-if=\"data\">\n \u003Cli v-for=\"item in data\" :key=\"item.path\">\n \u003CNuxtLink :to=\"item.path\">{{ item.title }}\u003C/NuxtLink>\n \u003C/li>\n \u003C/ul>\n \u003C/nav>\n\u003C/template> Example with additional query conditions and extra fields: \u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('navigation', () => {\n return queryCollectionNavigation('docs', ['description', 'badge'])\n .where('draft', '=', false)\n .where('partial', '=', false)\n .order('title', 'ASC')\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cnav>\n \u003Cul v-if=\"data\">\n \u003Cli v-for=\"item in data\" :key=\"item.path\">\n \u003CNuxtLink :to=\"item.path\">\n {{ item.title }}\n \u003Cspan v-if=\"item.badge\" class=\"badge\">{{ item.badge }}\u003C/span>\n \u003C/NuxtLink>\n \u003Cp v-if=\"item.description\">{{ item.description }}\u003C/p>\n \u003C/li>\n \u003C/ul>\n \u003C/nav>\n\u003C/template>",{"id":2374,"title":2342,"titles":2375,"content":2376,"level":312},"/docs/utils/query-collection-navigation#server-usage",[84],"Nuxt Content provides a similar utility to query collections on the server side. The only difference is that you need to pass event as the first argument to the queryCollectionNavigation function. export default eventHandler(async (event) => {\n const navigation = await queryCollectionNavigation(event, 'docs')\n return navigation\n}) Make sure to create server/tsconfig.json file with the following content to avoid type error.{\n \"extends\": \"../.nuxt/tsconfig.server.json\"\n}",{"id":2378,"title":2379,"titles":2380,"content":2381,"level":312},"/docs/utils/query-collection-navigation#extra-utilities-to-work-with-navigation","Extra utilities to work with navigation",[84],"Content module provides some extra utilities to simplify common use cases like building breadcrumb navigation.",{"id":2383,"title":2384,"titles":2385,"content":2386,"level":380},"/docs/utils/query-collection-navigation#findpageheadlinenavigation-path-options","findPageHeadline(navigation, path, options?)",[84,2379],"Returns the headline (name of the parent folder) for a given path within a navigation tree. Useful for displaying section titles or contextual navigation headers. navigation: The navigation tree (array of ContentNavigationItem).path: The current page path.options (optional):\nindexAsChild: Treat index pages as children. Example: import { findPageHeadline } from '@nuxt/content/utils'\n\nconst headline = findPageHeadline(navigation, '/docs/guide/getting-started')\n// headline is a string that contains the name of the parent folder",{"id":2388,"title":2389,"titles":2390,"content":2391,"level":380},"/docs/utils/query-collection-navigation#findpagebreadcrumbnavigation-path-options","findPageBreadcrumb(navigation, path, options?)",[84,2379],"Returns the breadcrumb trail (array of navigation items) for a given path within a navigation tree. Useful for building breadcrumb navigation components. navigation: The navigation tree (array of ContentNavigationItem).path: The current page path.options (optional):\ncurrent: Include the current page in the breadcrumb.indexAsChild: Treat index pages as children. Example: import { findPageBreadcrumb } from '@nuxt/content/utils'\n\nconst breadcrumb = findPageBreadcrumb(navigation, '/docs/guide/getting-started')\n// breadcrumb is an array of navigation items leading to the current page",{"id":2393,"title":2394,"titles":2395,"content":2396,"level":380},"/docs/utils/query-collection-navigation#findpagechildrennavigation-path-options","findPageChildren(navigation, path, options?)",[84,2379],"Finds and returns the direct children of a given path in the navigation tree. navigation: The navigation tree (array of ContentNavigationItem).path: The parent path to find children for.options (optional):\nindexAsChild: Treat index pages as children. Example: import { findPageChildren } from '@nuxt/content/utils'\n\nconst children = findPageChildren(navigation, '/docs/guide')\n// children is an array of navigation items under '/docs/guide'",{"id":2398,"title":2399,"titles":2400,"content":2401,"level":380},"/docs/utils/query-collection-navigation#findpagesiblingsnavigation-path-options","findPageSiblings(navigation, path, options?)",[84,2379],"Returns the sibling navigation items for a given path (i.e., other items with the same parent). navigation: The navigation tree (array of ContentNavigationItem).path: The current page path.options (optional):\nindexAsChild: Treat index pages as children. Example: import { findPageSiblings } from '@nuxt/content/utils'\n\nconst siblings = findPageSiblings(navigation, '/docs/guide/getting-started')\n// siblings is an array of navigation items that share the same parent as the current page 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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}",{"id":89,"title":88,"titles":2403,"content":2404,"level":279},[],"The queryCollectionItemSurroundings composable looks for sibling contents of an specific path.",{"id":2406,"title":2093,"titles":2407,"content":2408,"level":312},"/docs/utils/query-collection-item-surroundings#usage",[88],"Use the auto-imported queryCollectionItemSurroundings to find the previous and next items relative to a specific content item in a collection. This is particularly useful for creating navigation between related content pages. The function returns a chainable promise that allows you to add additional query conditions: \u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('surround', () => {\n return queryCollectionItemSurroundings('docs', '/foo')\n .where('published', '=', true)\n .order('date', 'DESC')\n})\n\u003C/script> The queryCollectionItemSurroundings utility is available in both Vue and Nitro. Checkout Server Usage for more details on how to use it on the server side.",{"id":2410,"title":2272,"titles":2411,"content":2412,"level":312},"/docs/utils/query-collection-item-surroundings#type",[88],"function queryCollectionItemSurroundings\u003CT extends keyof PageCollections>(\n collection: T,\n path: string,\n opts?: SurroundOptions\u003Ckeyof PageCollections[T]>\n): ChainablePromise\u003CT, ContentNavigationItem[]>\n\ninterface ChainablePromise\u003CT extends keyof PageCollections, R> extends Promise\u003CR> {\n where(field: keyof PageCollections[T] | string, operator: SQLOperator, value?: unknown): ChainablePromise\u003CT, R>\n andWhere(groupFactory: QueryGroupFunction\u003CPageCollections[T]>): ChainablePromise\u003CT, R>\n orWhere(groupFactory: QueryGroupFunction\u003CPageCollections[T]>): ChainablePromise\u003CT, R>\n order(field: keyof PageCollections[T], direction: 'ASC' | 'DESC'): ChainablePromise\u003CT, R>\n}",{"id":2414,"title":2268,"titles":2415,"content":272,"level":312},"/docs/utils/query-collection-item-surroundings#api",[88],{"id":2417,"title":2418,"titles":2419,"content":2420,"level":380},"/docs/utils/query-collection-item-surroundings#querycollectionitemsurroundingscollection-collectionname-path-string-opts-surroundoptions","queryCollectionItemSurroundings(collection: CollectionName, path: string, opts?: SurroundOptions)",[88,2268],"Find the surrounding items (previous and next) for a specific content item in a collection. Parameters:\ncollection: The key of the defined collection in content.config.ts.path: The path of the current content item.opts: (Optional) An object with the following properties:\nbefore: (Optional) The number of items to fetch before the current item. Default is 1.after: (Optional) The number of items to fetch after the current item. Default is 1.fields: (Optional) An array of additional fields to include in the surrounding items.Returns: A chainable promise that resolves to an array containing the surrounding items. The promise includes methods for adding query conditions:\nwhere(field, operator, value): Add a WHERE conditionandWhere(groupFactory): Add a grouped AND conditionorWhere(groupFactory): Add a grouped OR conditionorder(field, direction): Add an ORDER BY clause The final result will be an array with the following structure: [previousItem, nextItem] if using default options[...previousItems, ...nextItems] if using custom before and after values Each item in the array is of type ContentNavigationItem or null if there is no item in that position.",{"id":2422,"title":2337,"titles":2423,"content":2424,"level":312},"/docs/utils/query-collection-item-surroundings#examples",[88],"Basic usage without additional query conditions: \u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('surround', () => {\n return queryCollectionItemSurroundings('docs', '/foo')\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex justify-between\">\n \u003CNuxtLink v-if=\"data?.[0]\" :to=\"data[0].path\">\n โ† {{ data[0].title }}\n \u003C/NuxtLink>\n \u003CNuxtLink v-if=\"data?.[1]\" :to=\"data[1].path\">\n {{ data[1].title }} โ†’\n \u003C/NuxtLink>\n \u003C/div>\n\u003C/template> Example with additional query conditions: \u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('surround', () => {\n return queryCollectionItemSurroundings('docs', '/foo', {\n before: 1,\n after: 1,\n fields: ['badge', 'description']\n })\n .where('_draft', '=', false)\n .where('_partial', '=', false)\n .order('date', 'DESC')\n})\n\u003C/script>",{"id":2426,"title":2342,"titles":2427,"content":2428,"level":312},"/docs/utils/query-collection-item-surroundings#server-usage",[88],"Nuxt Content provides a similar utility to query collections on the server side. The only difference is that you need to pass event as the first argument to the queryCollectionItemSurroundings function. export default eventHandler(async (event) => {\n const surroundings = await queryCollectionItemSurroundings(event, 'docs', '/foo')\n return surroundings\n}) Make sure to create server/tsconfig.json file with the following content to avoid type error.{\n \"extends\": \"../.nuxt/tsconfig.server.json\"\n} 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"id":93,"title":92,"titles":2430,"content":2431,"level":279},[],"The queryCollectionSearchSections composable generates searchable sections from a collection for enhanced content discovery.",{"id":2433,"title":2093,"titles":2434,"content":2435,"level":312},"/docs/utils/query-collection-search-sections#usage",[92],"Use the auto-imported queryCollectionSearchSections to generate searchable sections from a specific collection. This is particularly useful for creating advanced search functionality or content discovery features in your application. \u003Cscript>\nconst { data: sections } = await useAsyncData('search-sections', () => {\n return queryCollectionSearchSections('docs')\n})\n\u003C/script> The queryCollectionSearchSections utility is available in both Vue and Nitro. Checkout Server Usage for more details on how to use it on the server side.",{"id":2437,"title":2272,"titles":2438,"content":2439,"level":312},"/docs/utils/query-collection-search-sections#type",[92],"function queryCollectionSearchSections\u003CT extends keyof PageCollections>(collection: T, opts?: { ignoredTags?: string[], minHeading?: string, maxHeading?: string, extraFields?: Array\u003Ckeyof PageCollections[T]> }): ChainablePromise\u003CT, Section[]>\n\ninterface ChainablePromise\u003CT extends keyof PageCollections, R> extends Promise\u003CR> {\n where(field: keyof PageCollections[T] | string, operator: SQLOperator, value?: unknown): ChainablePromise\u003CT, R>\n andWhere(groupFactory: QueryGroupFunction\u003CPageCollections[T]>): ChainablePromise\u003CT, R>\n orWhere(groupFactory: QueryGroupFunction\u003CPageCollections[T]>): ChainablePromise\u003CT, R>\n order(field: keyof PageCollections[T], direction: 'ASC' | 'DESC'): ChainablePromise\u003CT, R>\n}",{"id":2441,"title":2268,"titles":2442,"content":272,"level":312},"/docs/utils/query-collection-search-sections#api",[92],{"id":2444,"title":2445,"titles":2446,"content":2447,"level":380},"/docs/utils/query-collection-search-sections#querycollectionsearchsectionscollection-collectionname-options-searchsectionsoptions","queryCollectionSearchSections(collection: CollectionName, options?: SearchSectionsOptions)",[92,2268],"Generate searchable sections from the specified collection. Parameters:\ncollection: The key of the defined collection in content.config.ts.options: (Optional) An object with the following properties:\nignoredTags: An array of tag names to ignore when generating sections. Default is an empty array.minHeading: Minimum heading level to split on (e.g., 'h2'). Default is 'h1'.maxHeading: Maximum heading level to split on (e.g., 'h3'). Default is 'h6'.extraFields: An array of additional fields from the collection items to include in the section objects.Returns: A Promise that resolves to an array of searchable sections. Each section is an object with the following properties:\nid: A unique identifier for the section.title: The title of the section (usually the heading text).titles: An array of parent section titles, representing the hierarchy.content: The textual content of the section.level: The heading level (1-6) of the section, where 1 is the highest level.",{"id":2449,"title":2080,"titles":2450,"content":2451,"level":312},"/docs/utils/query-collection-search-sections#example",[92],"Here's an example of how to use queryCollectionSearchSections to create searchable sections from the 'docs' collection: \u003Cscript>\nconst { data: surround } = await useAsyncData('foo-surround', () => {\n return queryCollectionSearchSections('docs', {\n ignoredTags: ['code'],\n minHeading: 'h2',\n maxHeading: 'h3',\n extraFields: ['author', 'date'],\n })\n})\n\u003C/script>",{"id":2453,"title":2342,"titles":2454,"content":2455,"level":312},"/docs/utils/query-collection-search-sections#server-usage",[92],"Nuxt Content provides a similar utility to query collections on the server side. The only difference is that you need to pass event as the first argument to the queryCollectionSearchSections function. export default eventHandler(async (event) => {\n const sections = await queryCollectionSearchSections(event, 'docs')\n return sections\n}) Make sure to create server/tsconfig.json file with the following content to avoid type error.{\n \"extends\": \"../.nuxt/tsconfig.server.json\"\n} 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}",{"id":102,"title":101,"titles":2457,"content":2458,"level":279},[],"Takes your component from an AST to a wonderful template. The \u003CContentRenderer> component renders a document coming from a query with queryCollection(). This component only works with Markdown files.",{"id":2460,"title":2152,"titles":2461,"content":2462,"level":312},"/docs/components/content-renderer#props",[101],"PropDefaultTypeDescriptionvalue{}ParsedContentThe document to render.tag'div'stringThe tag to use for the renderer element if it is used.excerptfalsebooleanWhether to render the excerpt only without the rest of the content.components{}objectThe map of custom components to use for rendering. This prop will pass to the markdown renderer and will not affect other file types.data{}object (required)A map of variables to inject into the markdown content for later use in binding variables.proseundefinedbooleanWhether or not to render Prose components instead of HTML tags.classundefinedstring or objectRoot tag to use for rendering.unwrapfalseboolean or stringTags to unwrap separated by spaces. Example: 'ul li'.",{"id":2464,"title":2465,"titles":2466,"content":2467,"level":312},"/docs/components/content-renderer#example-usage","Example Usage",[101],"\u003Cscript lang=\"ts\" setup>\nconst route = useRoute()\nconst { data: page } = await useAsyncData(route.path, () => {\n return queryCollection('docs').path(route.path).first()\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CContentRenderer v-if=\"page\" :value=\"page\" />\n\u003C/template>",{"id":2469,"title":2470,"titles":2471,"content":2472,"level":312},"/docs/components/content-renderer#handling-missing-pages","Handling Missing Pages",[101],"If the queried content is missing, you can display a custom fallback message. \u003Cscript lang=\"ts\" setup>\nconst route = useRoute()\nconst { data: page } = await useAsyncData(route.path, () => {\n return queryCollection('docs').path(route.path).first()\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctemplate v-if=\"page\">\n \u003CContentRenderer :value=\"page\" />\n \u003C/template>\n \u003Ctemplate v-else>\n \u003Cdiv class=\"empty-page\">\n \u003Ch1>Page Not Found\u003C/h1>\n \u003Cp>Oops! The content you're looking for doesn't exist.\u003C/p>\n \u003CNuxtLink to=\"/\">Go back home\u003C/NuxtLink>\n \u003C/div>\n \u003C/template>\n\u003C/template> 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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);}",{"id":106,"title":105,"titles":2474,"content":2475,"level":279},[],"The fastest way to inject Markdown into your Vue components. When you write contents and paragraphs inside a component with the MDC syntax, you can use Vue's \u003Cslot> component to render the content.",{"id":2477,"title":2093,"titles":2478,"content":2479,"level":312},"/docs/components/slot#usage",[105],"If you don't want to modify the rendered content, simply use Vue's \u003Cslot> component. \u003Ctemplate>\n \u003Cdiv class=\"callout\">\n \u003Cslot />\n \u003C/div>\n\u003C/template> Now let's use it in Markdown: ::callout\nThis is a callout.\n:: The rendered HTML will be: \u003Cdiv class=\"callout\">\n \u003Cp>This is a callout.\u003C/p>\n\u003C/div> This usage would be similar to using the native \u003Cslot> component.",{"id":2481,"title":2482,"titles":2483,"content":2484,"level":380},"/docs/components/slot#unwrapping","Unwrapping",[105,2093],"The mdc-unwrap prop allows you to remove one or multiple wrapping elements from the rendered content. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST. Let's unwrap the \u003Cp> element from the previous example: \u003Ctemplate>\n \u003Cdiv class=\"callout\">\n \u003Cslot mdc-unwrap=\"p\" />\n \u003C/div>\n\u003C/template> Now the rendered HTML will be: \u003Cdiv class=\"callout\">\n This is a callout.\n\u003C/div>",{"id":2486,"title":2487,"titles":2488,"content":2489,"level":380},"/docs/components/slot#named-slots","Named Slots",[105,2093],"The name prop allows you to bind a slot by its name. This is useful when you want to render a slot that is not the default one. Let's improve our Callout component to have a title slot: \u003Ctemplate>\n \u003Cdiv class=\"callout\">\n \u003Ch2 v-if=\"$slots.title\">\n \u003Cslot name=\"title\" mdc-unwrap=\"p\" />\n \u003C/h2>\n \u003Cslot />\n \u003C/div>\n\u003C/template> Now let's use it in Markdown: ::callout\n#title\nPlease be careful!\n#default\nUsing MDC & Vue components is addictive.\n:: This will result into: \u003Cdiv class=\"callout\">\n \u003Ch2>Please be careful!\u003C/h2>\n \u003Cp>Using MDC & Vue components is addictive.\u003C/p>\n\u003C/div> When not using the title slot, the h2 element will not be rendered.",{"id":2491,"title":2152,"titles":2492,"content":2493,"level":312},"/docs/components/slot#props",[105],"mdc-unwrap: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.\nType: boolean or stringDefault: falseExample: 'p' or 'ul li' 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"id":110,"title":109,"titles":2495,"content":2496,"level":279},[],"A list of Prose components. Prose components are replacements for HTML typography tags. Prose components provide a simple way to customize content UI. To overwrite a prose component, create a component with the same name in your project components/content/ directory (ex: components/content/ProseA.vue). Prose components are originally part of @nuxtjs/mdc.",{"id":2498,"title":2499,"titles":2500,"content":2501,"level":312},"/docs/components/prose#prosea","ProseA",[109],"[Prose Components](/docs/components/prose)\nProse Components",{"id":2503,"title":2504,"titles":2505,"content":2506,"level":312},"/docs/components/prose#proseblockquote","ProseBlockquote",[109],"> Block quote\nBlock quote",{"id":2508,"title":2509,"titles":2510,"content":2511,"level":312},"/docs/components/prose#prosepre","ProsePre",[109],"```js [file.js]{2} meta-info=val\n export default () => {\n console.log('Code block')\n }\n ```\nexport default () => {\n console.log('Code block')\n} Component properties will be: {\n code: \"export default () => {\\n console.log('Code block')\\n}\"\n language: \"js\"\n filename: \"file.js\"\n highlights: [2]\n meta: \"meta-info=val\"\n} Check out the highlight options for more about the syntax highlighting. If you want to use ] in the filename, you need to escape it with 2 backslashes: \\\\]. This is necessary since JS will automatically escape the backslash in a string so \\] will be resolved as ] breaking our regex.",{"id":2513,"title":2514,"titles":2515,"content":2516,"level":312},"/docs/components/prose#prosecode","ProseCode",[109],"`code`\n\n`const code: string = 'highlighted code inline'`{lang=\"ts\"}\ncodeconst code: string = 'highlighted code inline'",{"id":2518,"title":2519,"titles":2520,"content":2521,"level":312},"/docs/components/prose#proseh1","ProseH1",[109],"# H1 Heading\nH1 Heading",{"id":2523,"title":2524,"titles":2525,"content":2526,"level":312},"/docs/components/prose#proseh2","ProseH2",[109],"## H2 Heading\nH2 Heading",{"id":2528,"title":2529,"titles":2530,"content":2531,"level":312},"/docs/components/prose#proseh3","ProseH3",[109],"### H3 Heading\nH3 Heading",{"id":2533,"title":2534,"titles":2535,"content":2536,"level":312},"/docs/components/prose#proseh4","ProseH4",[109],"#### H4 Heading\nH4 Heading",{"id":2538,"title":2539,"titles":2540,"content":2541,"level":312},"/docs/components/prose#proseh5","ProseH5",[109],"##### H5 Heading\nH5 Heading",{"id":2543,"title":2544,"titles":2545,"content":2546,"level":312},"/docs/components/prose#proseh6","ProseH6",[109],"###### H6 Heading\nH6 Heading",{"id":2548,"title":2549,"titles":2550,"content":2551,"level":312},"/docs/components/prose#prosehr","ProseHr",[109],"Divider under.\n\n---\n\nDivider above.\nDivider under.Divider above.",{"id":2553,"title":2554,"titles":2555,"content":2556,"level":312},"/docs/components/prose#proseimg","ProseImg",[109],"![A Cool Image](https://nuxt.com/assets/design-kit/icon-green.png)",{"id":2558,"title":2559,"titles":2560,"content":2561,"level":312},"/docs/components/prose#proseul","ProseUl",[109],"- Just\n- An\n- Unordered\n- List\nJustAnUnorderedList",{"id":2563,"title":2564,"titles":2565,"content":2566,"level":312},"/docs/components/prose#proseli","ProseLi",[109],"- List element\nList element",{"id":2568,"title":2569,"titles":2570,"content":2571,"level":312},"/docs/components/prose#proseol","ProseOl",[109],"1. Foo\n2. Bar\n3. Baz\nFooBarBaz",{"id":2573,"title":2574,"titles":2575,"content":2576,"level":312},"/docs/components/prose#prosep","ProseP",[109],"Just a paragraph.\nJust a paragraph.",{"id":2578,"title":2579,"titles":2580,"content":2581,"level":312},"/docs/components/prose#prosestrong","ProseStrong",[109],"**Just a strong paragraph.**\nJust a strong paragraph.",{"id":2583,"title":2584,"titles":2585,"content":2586,"level":312},"/docs/components/prose#proseem","ProseEm",[109],"_Just an italic paragraph._\nJust an italic paragraph.",{"id":2588,"title":2589,"titles":2590,"content":2591,"level":312},"/docs/components/prose#prosetable","ProseTable",[109],"| Key | Type | Description |\n| --- | --------- | ----------- |\n| 1 | Wonderful | Table |\n| 2 | Wonderful | Data |\n| 3 | Wonderful | Website |\nKeyTypeDescription1WonderfulTable2WonderfulData3WonderfulWebsite",{"id":2593,"title":2594,"titles":2595,"content":2596,"level":312},"/docs/components/prose#prosetbody","ProseTbody",[109],"Included in ProseTable example.",{"id":2598,"title":2599,"titles":2600,"content":2596,"level":312},"/docs/components/prose#prosetd","ProseTd",[109],{"id":2602,"title":2603,"titles":2604,"content":2596,"level":312},"/docs/components/prose#proseth","ProseTh",[109],{"id":2606,"title":2607,"titles":2608,"content":2596,"level":312},"/docs/components/prose#prosethead","ProseThead",[109],{"id":2610,"title":2611,"titles":2612,"content":2613,"level":312},"/docs/components/prose#prosetr","ProseTr",[109],"Included in ProseTable example. Checkout the source code for these components on GitHub. html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sDpXG, html code.shiki .sDpXG{--shiki-light:#E53935;--shiki-light-text-decoration:underline;--shiki-default:#F07178;--shiki-default-text-decoration:underline;--shiki-dark:#F07178;--shiki-dark-text-decoration:underline}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 .sCNwf, html code.shiki .sCNwf{--shiki-light:#FF5370;--shiki-light-font-style:italic;--shiki-default:#FF9CAC;--shiki-default-font-style:italic;--shiki-dark:#FF9CAC;--shiki-dark-font-style:italic}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 .sJsPd, html code.shiki .sJsPd{--shiki-light:#90A4AE90;--shiki-default:#EEFFFF90;--shiki-dark:#BABED890}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}html pre.shiki code .sQLHv, html code.shiki .sQLHv{--shiki-light:#90A4AE;--shiki-light-text-decoration:underline;--shiki-default:#EEFFFF;--shiki-default-text-decoration:underline;--shiki-dark:#BABED8;--shiki-dark-text-decoration:underline}html pre.shiki code .sHepR, html code.shiki .sHepR{--shiki-light:#39ADB5;--shiki-light-font-weight:bold;--shiki-default:#89DDFF;--shiki-default-font-weight:bold;--shiki-dark:#89DDFF;--shiki-dark-font-weight:bold}html pre.shiki code .so75L, html code.shiki .so75L{--shiki-light:#E53935;--shiki-light-font-weight:bold;--shiki-default:#F07178;--shiki-default-font-weight:bold;--shiki-dark:#F07178;--shiki-dark-font-weight:bold}html pre.shiki code .s5tWE, html code.shiki .s5tWE{--shiki-light:#E53935;--shiki-light-font-style:italic;--shiki-default:#F07178;--shiki-default-font-style:italic;--shiki-dark:#F07178;--shiki-dark-font-style:italic}",{"id":120,"title":2615,"titles":2616,"content":2617,"level":279},"Server Hosting",[],"Node preset is the default preset for Nuxt and Nuxt Content. It is used to build and run Nuxt applications on Node.js.",{"id":2619,"title":2620,"titles":2621,"content":2622,"level":312},"/docs/deploy/server#what-is-nodejs-preset","What is Node.js preset?",[2615],"Node preset is the default preset for Nuxt, when building your project, Nuxt will output a Node.js server that you can run with node .output/server/index.mjs.",{"id":2624,"title":2625,"titles":2626,"content":2627,"level":312},"/docs/deploy/server#environment-requirement","Environment requirement",[2615],"If you are using the default better-sqlite3 module to operate the sqlite database,\nthen you have to deploy to an OS with Glibc version higher than 2.29, eg. Debian 11, Ubuntu 20.04. You can use ldd --version to check the Glibc version. Checkout issue #3248 for more details.",{"id":2629,"title":2630,"titles":2631,"content":2632,"level":312},"/docs/deploy/server#building-with-nodejs-preset","Building with Node.js preset",[2615],"Build project with Nuxt build command: nuxi build When running nuxi build with the Node server preset, the result will be an entry point that launches a ready-to-run Node server. $ node .output/server/index.mjs\nListening on http://localhost:3000 The SQLite database will be loaded on the server side when booting the server as well as in the browser for client-side navigation or actions. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"id":124,"title":2634,"titles":2635,"content":2636,"level":279},"Static Hosting",[],"How to deploy Nuxt Content to static hosting with static site generation.",{"id":2638,"title":2639,"titles":2640,"content":2641,"level":312},"/docs/deploy/static#what-is-static-hosting","What is Static Hosting?",[2634],"Static hosting is a type of hosting where your website is built and served as static files (HTML, CSS, JS) that can be served by any static file server. Nuxt Content can be deployed to static hosting using Nuxt prerendering.",{"id":2643,"title":2644,"titles":2645,"content":2646,"level":312},"/docs/deploy/static#building-with-ssg","Building with SSG",[2634],"To build your app with static site generation, run the following command: npx nuxi generate This command will create a dist/ directory with your static site. You can upload it to any static hosting service. Nuxt will automatically pre-render all pages using an internal crawler, you can customize it's behavior with the nitro.prerender options. Learn more about pre-rendering in Nuxt.",{"id":2648,"title":2649,"titles":2650,"content":2651,"level":312},"/docs/deploy/static#what-about-the-database","What about the Database?",[2634],"Nuxt Content will load the database in the browser using WASM SQLite, this way, the content queries happening on client-side navigation or actions will run in the browser. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"id":128,"title":2653,"titles":2654,"content":2655,"level":279},"Serverless Hosting",[],"How to deploy Nuxt Content on various serverless platforms.",{"id":2657,"title":2658,"titles":2659,"content":2660,"level":312},"/docs/deploy/serverless#what-is-serverless-hosting","What is Serverless Hosting?",[2653],"Serverless hosting lets you run code and applications without managing servers directly - you just upload your code and the cloud provider automatically handles all the infrastructure, scaling, and maintenance while charging you only for the actual compute resources you use. In serverless environments, each user request triggers a fresh instance of your Nuxt server, meaning it starts from scratch every time. This \"stateless\" nature means you can't store data in server memory or use file-based databases like SQLite. That's why we need to use external database services (like D1, Turso, or PostgreSQL) that persist data independently of your server instances.",{"id":2662,"title":2663,"titles":2664,"content":2665,"level":312},"/docs/deploy/serverless#deploy-with-serverless","Deploy with Serverless",[2653],"The module have built-in support for couple of famous serverless platforms. You can deploy your project to them with ease. Checkout the guides for each platform: Cloudflare PagesVercel If you like to deploy to other platforms, you can follow below steps to deploy your project.",{"id":2667,"title":2668,"titles":2669,"content":2670,"level":380},"/docs/deploy/serverless#_1-select-a-database-service","1. Select a database service",[2653,2663],"Before deploying your project, you need to select a database service: // 1. Create a PostgreSQL database\n// 2. And add the `POSTGRES_URL` to the env variables\nexport default defineNuxtConfig({\n content: {\n database: {\n type: 'postgresql',\n url: process.env.POSTGRES_URL\n }\n }\n})\n// 1. Create a D1 database in your CF account\n// 2. Link it to your project with the same binding name\nexport default defineNuxtConfig({\n content: {\n database: {\n type: 'd1',\n bindingName: '\u003CYOUR_BINDING_NAME>'\n }\n }\n})\n// 1. Create a LibSQL database on Turso.tech\n// 2. And add the `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN` env variables\nexport default defineNuxtConfig({\n modules: ['@nuxt/content'],\n content: {\n database: {\n type: 'libsql',\n url: process.env.TURSO_DATABASE_URL,\n authToken: process.env.TURSO_AUTH_TOKEN,\n }\n }\n})",{"id":2672,"title":2673,"titles":2674,"content":2675,"level":380},"/docs/deploy/serverless#_2-deploy-your-project","2. Deploy your project",[2653,2663],"Nuxt Content uses Nuxt deployment presets to adjust the build process for different hosting platforms. Various serverless platform are supported with zero configuration: CloudflareNuxtHubVercelNetlify All you need to do is to set the build command to: nuxi build The generated output will be compatible with the selected platform. The linked database will be loaded on the server side when booting the server. In the browser, a WASM SQLite database will be loaded for client-side navigation and actions. If you wish to deploy to AWS Lambda or Azure Static Web Apps, you need to make sure your sqlite file is in /tmp since this is the only writeable folderexport default defineNuxtConfig({\n modules: ['@nuxt/content'],\n content: {\n database: {\n type: 'sqlite',\n filename: '/tmp/contents.sqlite'\n }\n }\n})",{"id":2677,"title":2678,"titles":2679,"content":2680,"level":380},"/docs/deploy/serverless#_3-optimize-with-pre-rendering","3. Optimize with pre-rendering",[2653,2663],"As each request trigger a fresh instance of your Nuxt server, the performance of your serverless application will be impacted if you don't pre-render some pages. To optimize your serverless application, you can pre-render your pages using the routeRules option: export default defineNuxtConfig({\n routeRules: {\n '/': { prerender: true }\n }\n}) We recommend to checkout NuxtHub's Pre-rendering guide to learn more about the different strategies to optimize your serverless application, it applies to all serverless platforms. 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 .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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"id":132,"title":131,"titles":2682,"content":2683,"level":279},[],"Deploy your Content app to NuxtHub Nuxt Content module has a built-in integration with NuxtHub to deploy your content. To enable NuxtHub integration, you need to install the @nuxthub/core module and register it in your nuxt.config.ts. More efficiently, you can use nuxi module command to do both at once. npx nuxi module add hub That's it ๐ŸŽ‰ Nuxt Content module automatically reads the NuxtHub database options in order to share the same database to store the Nuxt Content data. Checkout the NuxtHub documentation for more information. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"id":136,"title":135,"titles":2685,"content":2686,"level":279},[],"Deploy your Content app to Cloudflare Pages Quick SetupUse nuxi build --preset=cloudflare_pages to build your appCreate and connect a D1 database to your project in the Cloudflare Dashboard using binding name DBDeploy/Redeploy your app The Nuxt Content module has a built-in integration with Cloudflare Pages to deploy your content. The Module will automatically detect the build target and prepare the necessary configuration for Cloudflare Pages. You can either use the --preset=cloudflare_pages option with the nuxi build command or use nuxt.config.ts to configure the preset. export default defineNuxtConfig({\n nitro: {\n preset: 'cloudflare_pages',\n },\n});",{"id":2688,"title":2689,"titles":2690,"content":2691,"level":312},"/docs/deploy/cloudflare-pages#d1-database","D1 Database",[135],"A D1 database connected to the app is required for the Nuxt Content module to work. By default the module uses the binding name DB. You can override the database configuration by providing your own in nuxt.config.ts. After creating a new Cloudflare Pages project, you need to create a new D1 database and connect it to the project. Make sure to use the same binding name as the module is using.",{"id":2693,"title":2694,"titles":2695,"content":2696,"level":380},"/docs/deploy/cloudflare-pages#local-preview","Local Preview",[135,2689],"While nuxi dev and nuxi build don't require any extra configuration, testing a build locally with nuxi preview requires Cloudflare's Wrangler to be configured to provide a temporary, local database for Nuxt Content to bind. This can be done with a wrangler.jsonc or wrangler.toml file. Because Wrangler creates a local database, database_name and database_id can safely, but don't need to, match the values in production. {\n \"d1_databases\": [\n {\n \"binding\": \"DB\",\n \"database_name\": \"example-db\",\n \"database_id\": \"example-db-id\"\n }\n ]\n} That's it ๐ŸŽ‰ Relevant resources: Nuxt Deploy documentationCloudflare D1 documentationCreate and bind a D1 databaseCloudflare Pages documentation 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 .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);}",{"id":140,"title":139,"titles":2698,"content":2699,"level":279},[],"Deploy your Content app to Cloudflare Workers Quick SetupUse cloudflare_module preset and compatibility date of 2024-09-19 or later.Create a D1 database and connect it to your project in the Cloudflare Dashboard under the DB binding name, and configure the database configuration in the nuxt.config.ts file.Build and deploy your app The Nuxt Content module has a built-in integration with Cloudflare Workers to deploy your content. The module will automatically detect the build target and prepare the necessary configuration for Cloudflare Workers. All you need to do is create a Cloudflare D1 database and connect it to your project. After creating a D1 database, you should\ndefine the database configuration in the nuxt.config.ts file with the nitro.cloudflare.wrangler.d1_databases option. By default, the module will use the DB binding name. You can override the database configuration by providing your own database configuration in nuxt.config.ts. export default defineNuxtConfig({\n compatibilityDate: \"2025-05-15\",\n nitro: {\n preset: 'cloudflare_module',\n cloudflare: {\n deployConfig: true,\n wrangler: {\n d1_databases: [\n {\n binding: 'DB',\n database_name: 'database-name',\n database_id: '*********-***-****-****-*********'\n }\n ]\n },\n },\n }\n}) If you want to use a different binding name, you can override the database configuration by providing your own database configuration in nuxt.config.ts. Check out Database Configuration To deploy a Nuxt project to Cloudflare Workers, you need to use a compatibility date of 2024-09-19 or later. Build your project with the nuxi build command, and you can deploy the project with the wrangler deploy command. npx wrangler deploy That's it! ๐ŸŽ‰ Check out: Nuxt Deploy documentationCloudflare D1 documentationCloudflare Workers documentation 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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"id":144,"title":143,"titles":2701,"content":2702,"level":279},[],"Deploy your Content app to Vercel Quick SetupExecute npx vercel deploy command or go to Vercel dashboard and create a new project using git repository. Nuxt Content projects can be deployed to Vercel with zero configuration. The module will automatically detect a Vercel environment and will prepare the necessary configuration for deployment. All you need to do is to execute npx vercel deploy command or go to Vercel dashboard and create a new project using git repository. That's it ๐ŸŽ‰ By default module will use SQlite database in Vercel located at /tmp directory. You can override the database configuration by providing your own database configuration.There are a couple of database providers that are supported by Vercel. You can use any of them by providing the correct connection string in nuxt.config.ts. Checkout: Nuxt Deploy documentationVercel documentation",{"id":148,"title":147,"titles":2704,"content":2705,"level":279},[],"Deploy your Content app to Netlify Quick SetupGo go Netlify dashboard and create a new project using git repository.Go to Site Configuration under Dependency management and change Node Version to 20.x or higher.Go to deploys and retry last deployment. Nuxt Content projects can be deployed to Netlify with zero configuration. The module will automatically detects Netlify environment and prepare the necessary configuration for Netlify. All you need to do is to go to Netlify dashboard and create a new project using git repository. By default Netlify uses Node.js 18.x which is not supported by the module. You need to change the Node.js version in Site Configuration under Dependency management. That's it ๐ŸŽ‰ Checkout: Nuxt Deploy documentationNetlify documentation",{"id":152,"title":151,"titles":2707,"content":2708,"level":279},[],"Deploy your Content app to AWS Amplify Quick SetupPrepare Sqlite Connector\nOption A (recommended on Node.js 22+): Use native node:sqliteOption B (legacy): Install sqlite3 package in your project.Go to AWS Amplify dashboard and create a new project using your git repository and deploy the app. Nuxt Content projects can be deployed to AWS Amplify with zero configuration.\nThe module will automatically detect an AWS Amplify environment and will prepare the necessary configuration for deployment.",{"id":2710,"title":2711,"titles":2712,"content":2713,"level":312},"/docs/deploy/aws-amplify#option-a-use-native-nodesqlite","Option A: Use native node:sqlite",[151],"In order to use native node:sqlite package, you need to change node version to 22+. This can be easily done\nin Amplify dashboard via Build Settings > Live Package Updates > Package (Node.js version) = 22. This is also possible via amplify.yml inside preBuild phase. frontend:\n phases:\n preBuild:\n commands:\n - nvm install 22\n - nvm use 22\n - node -v\n - npm ci If you are using SSR for content, Nitro defaults the Amplify runtime to Node 20. Since node:sqlite requires Node 22+, you need to explicitly set the runtime version in nuxt.config.ts:nitro: {\n awsAmplify: {\n runtime: 'nodejs22.x',\n },\n},",{"id":2715,"title":2716,"titles":2717,"content":2718,"level":312},"/docs/deploy/aws-amplify#option-b-use-sqlite3","Option B: Use sqlite3",[151],"All you need to do is to install sqlite3 package in your project and go to AWS Amplify dashboard and create a new project using git repository. That's it ๐ŸŽ‰ By default module will use SQlite database located at /tmp directory. You can override the database configuration by providing your own database configuration. Checkout: Nuxt Deploy documentation html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"id":156,"title":155,"titles":2720,"content":2721,"level":279},[],"Deploy your Content app with Docker Docker is a popular containerization platform that allows you to package your application with all its dependencies into a single container. This makes it easy to deploy your Content app on any platform that supports Docker.",{"id":2723,"title":2724,"titles":2725,"content":2726,"level":312},"/docs/deploy/docker#with-nodejs-image","With Node.js image",[155],"Using Docker's Node.js image, you can deploy your Content app. All you need is to create a Dockerfile and build the image. Here is an example Dockerfile: # Build Stage 1\n\nFROM node:22-alpine AS build\nWORKDIR /app\n\nRUN corepack enable\n\n# Copy package.json and your lockfile, here we add pnpm-lock.yaml for illustration\nCOPY package.json pnpm-lock.yaml .npmrc ./\n\n# Install dependencies\nRUN pnpm i\n\n# Copy the entire project\nCOPY . ./\n\n# Build the project\nRUN pnpm run build\n\n# Build Stage 2\n\nFROM node:22-alpine\nWORKDIR /app\n\n# Only `.output` folder is needed from the build stage\nCOPY --from=build /app/.output/ ./\n\n# Change the port and host\nENV PORT=80\nENV HOST=0.0.0.0\n\nEXPOSE 80\n\nCMD [\"node\", \"/app/server/index.mjs\"]",{"id":2728,"title":2729,"titles":2730,"content":2731,"level":312},"/docs/deploy/docker#with-bun-image","With Bun image",[155],"If you like to use Bun, you can use the official Bun image. Here is an example Dockerfile: # use the official Bun image\n# see all versions at https://hub.docker.com/r/oven/bun/tags\nFROM oven/bun:1 AS build\nWORKDIR /app\n\nCOPY package.json bun.lock* ./\n\n# use ignore-scripts to avoid building node modules like better-sqlite3\nRUN bun install --frozen-lockfile --ignore-scripts\n\n# Copy the entire project\nCOPY . .\n\nRUN bun --bun run build\n\n# copy production dependencies and source code into final image\nFROM oven/bun:1 AS production\nWORKDIR /app\n\n# Only `.output` folder is needed from the build stage\nCOPY --from=build /app/.output /app\n\n# run the app\nEXPOSE 3000/tcp\nENTRYPOINT [ \"bun\", \"--bun\", \"run\", \"/app/server/index.mjs\" ] 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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"id":165,"title":2733,"titles":2734,"content":2735,"level":279},"Nuxt i18n module",[],"Learn how to create multi-language websites using Nuxt Content with the @nuxtjs/i18n module. Nuxt Content integrates with @nuxtjs/i18n to create multi-language websites. When both modules are configured together, you can organize content by language and automatically serve the correct content based on the user's locale.",{"id":2737,"title":2738,"titles":2739,"content":2740,"level":312},"/docs/integrations/i18n#setup","Setup",[2733],"Install the required modulenpm install @nuxtjs/i18n\nConfigure your nuxt.config.tsexport default defineNuxtConfig({\n modules: ['@nuxt/content', '@nuxtjs/i18n'],\n i18n: {\n locales: [\n { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },\n { code: 'fr', name: 'French', language: 'fr-FR' },\n { code: 'fa', name: 'Farsi', language: 'fa-IR', dir: 'rtl' },\n ],\n strategy: 'prefix_except_default',\n defaultLocale: 'en',\n }\n})\nDefine collections for each languageCreate separate collections for each language in your content.config.ts:const commonSchema = ...;\n\nexport default defineContentConfig({\n collections: {\n // English content collection\n content_en: defineCollection({\n type: 'page',\n source: {\n include: 'en/**',\n prefix: '',\n },\n schema: commonSchema,\n }),\n // French content collection\n content_fr: defineCollection({\n type: 'page',\n source: {\n include: 'fr/**',\n prefix: '',\n },\n schema: commonSchema,\n }),\n // Farsi content collection\n content_fa: defineCollection({\n type: 'page',\n source: {\n include: 'fa/**',\n prefix: '',\n },\n schema: commonSchema,\n }),\n },\n})\nCreate dynamic pagesCreate a catch-all page that fetches content based on the current locale:\u003Cscript setup lang=\"ts\">\nimport { withLeadingSlash } from 'ufo'\nimport type { Collections } from '@nuxt/content'\n\nconst route = useRoute()\nconst { locale } = useI18n()\nconst slug = computed(() => Array.isArray(route.params.slug) ? withLeadingSlash(String(route.params.slug.join('/'))) : withLeadingSlash(String(route.params.slug)))\n\nconst { data: page } = await useAsyncData('page-' + slug.value, async () => {\n // Build collection name based on current locale\n const collection = ('content_' + locale.value) as keyof Collections\n const content = await queryCollection(collection).path(slug.value).first()\n\n // Optional: fallback to default locale if content is missing\n if (!content && locale.value !== 'en') {\n return await queryCollection('content_en').path(slug.value).first()\n }\n\n return content\n}, {\n watch: [locale], // Refetch when locale changes\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CContentRenderer v-if=\"page\" :value=\"page\" />\n \u003Cdiv v-else>\n \u003Ch1>Page not found\u003C/h1>\n \u003Cp>This page doesn't exist in {{ locale }} language.\u003C/p>\n \u003C/div>\n\u003C/template> That's it! ๐Ÿš€ Your multi-language content site is ready.",{"id":2742,"title":2743,"titles":2744,"content":2745,"level":312},"/docs/integrations/i18n#content-structure","Content Structure",[2733],"Organize your content files in language-specific folders to match your collections: content/\n en/\n index.md\n about.md\n blog/\n post-1.md\n fr/\n index.md\n about.md\n blog/\n post-1.md\n fa/\n index.md\n about.md Each language folder should contain the same structure to ensure content parity across locales.",{"id":2747,"title":2748,"titles":2749,"content":2750,"level":312},"/docs/integrations/i18n#fallback-strategy","Fallback Strategy",[2733],"You can implement a fallback strategy to show content from the default locale when content is missing in the current locale: const { data: page } = await useAsyncData('page-' + slug.value, async () => {\n const collection = ('content_' + locale.value) as keyof Collections\n let content = await queryCollection(collection).path(slug.value).first()\n\n // Fallback to default locale if content is missing\n if (!content && locale.value !== 'en') {\n content = await queryCollection('content_en').path(slug.value).first()\n }\n\n return content\n}) Make sure to handle missing content gracefully and provide clear feedback to users when content is not available in their preferred language.",{"id":2752,"title":2753,"titles":2754,"content":2755,"level":312},"/docs/integrations/i18n#complete-examples","Complete Examples",[2733],"You can see a complete working example: Source: https://github.com/nuxt/content/tree/main/examples/i18nLive Demo: https://content3-i18n.nuxt.dev/ html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"id":169,"title":2757,"titles":2758,"content":2759,"level":279},"Nuxt LLMs module",[],"Learn how to generate AI-ready content files using Nuxt Content and the Nuxt LLMs module. The Nuxt Content module integrates nuxt-llms to prepare your content for Large Language Models (LLMs). When nuxt-llms is detected, Content module automatically extends the LLMs module and inject collections of type page to the LLMs module.๐Ÿš€",{"id":2761,"title":2738,"titles":2762,"content":2763,"level":312},"/docs/integrations/llms#setup",[2757],"Install the required modulenpm install nuxt-llms\nConfigure your nuxt.config.tsexport default defineNuxtConfig({\n modules: ['@nuxt/content', 'nuxt-llms'],\n llms: {\n domain: 'https://your-site.com',\n title: 'Your Site Name',\n description: 'A brief description of your site',\n },\n}) That's it ๐Ÿš€ /llms.txt file is automatically generated and pre-rendered.",{"id":2765,"title":2766,"titles":2767,"content":2768,"level":312},"/docs/integrations/llms#raw-markdown-access","Raw markdown access",[2757],"When nuxt-llms is enabled, Nuxt Content also exposes a raw markdown endpoint so you can stream LLM-ready source files without going through the full rendering pipeline. Endpoint: /raw/\u003Ccontent-path>.md (use the same path as the page URL, drop trailing /index, and keep the .md extension), returning text/markdown; charset=utf-8.Scope: only page collections are included; exclude specific collections with llms.contentRawMarkdown.excludeCollections. Set llms.contentRawMarkdown = false to disable the endpoint entirely.Output: if the requested document is missing a top-level heading or description, the route prepends the title and description to the markdown body before returning it.llms.txt links: document links generated in llms.txt are automatically rewritten to the /raw/...md endpoint (unless the collection is excluded or the feature is disabled) so agents fetch compact markdown instead of full HTML, reducing token usage and improving response speed. Control this with llms.contentRawMarkdown.rewriteLLMSTxt (defaults to true). export default defineNuxtConfig({\n modules: ['@nuxt/content', 'nuxt-llms'],\n llms: {\n contentRawMarkdown: {\n // Optional: prevent specific page collections from being exposed\n excludeCollections: ['blog'],\n // Optional: keep llms.txt links pointing to rendered pages\n rewriteLLMSTxt: false,\n },\n },\n})",{"id":2770,"title":2771,"titles":2772,"content":2773,"level":312},"/docs/integrations/llms#sections","Sections",[2757],"When generating content, you can create custom sections to process your content into LLM-friendly formats. You can create custom sections to the llms.sections array and define the contentCollection and contentFilters option for each section. If there is no section defined in the contentCollection option, the module will only add page collections to the LLMs module.",{"id":2775,"title":2776,"titles":2777,"content":2778,"level":380},"/docs/integrations/llms#contentcollection","contentCollection",[2757,2771],"This option specifies which content collection to use as source. export default defineNuxtConfig({\n llms: {\n sections: [\n {\n title: 'Documentation',\n description: 'Technical documentation and guides',\n contentCollection: 'docs',\n },\n ],\n },\n})",{"id":2780,"title":2781,"titles":2782,"content":2783,"level":380},"/docs/integrations/llms#contentfilters","contentFilters",[2757,2771],"This options defines filters to select specific content within the collection. You precisely control which content is included. Each filter consists of: field: The content property to checkoperator: Comparison operator (=, \u003C>, >, \u003C, LIKE, IN, NOT IN, IS NULL, IS NOT NULL, etc.)value: The value to compare against export default defineNuxtConfig({\n llms: {\n sections: [\n {\n title: 'Documentation',\n description: 'Technical documentation and guides',\n contentCollection: 'docs',\n contentFilters: [\n // Only include markdown files\n { field: 'extension', operator: '=', value: 'md' },\n // Only include published content\n { field: 'draft', operator: '\u003C>', value: true },\n // Filter by directory\n { field: 'path', operator: 'LIKE', value: '/guide%' },\n ]\n },\n ],\n },\n}) Checkout the nuxt-llms documentation for more information about the module. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .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}",{"id":179,"title":178,"titles":2785,"content":2786,"level":279},[],"Implement full-text search in your website using Nuxt Content Content module exposes a handy utility queryCollectionSearchSections to break down content files into searchable sections. This is useful for implementing full-text search in your website. You can use the result of this utility in combination with Nuxt UI Content Search or other search libraries like Fuse.js, minisearch, etc.",{"id":2788,"title":244,"titles":2789,"content":2790,"level":312},"/docs/advanced/fulltext-search#nuxt-ui",[178],"Nuxt UI provides a ready to use component for full-text search. You can use it by passing the result of queryCollectionSearchSections to the files prop of the component. Read more about Nuxt UI Content Search. \u003Cscript setup lang=\"ts\">\nconst { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))\nconst { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))\n\nconst searchTerm = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContentSearch\n v-model:search-term=\"searchTerm\"\n :files=\"files\"\n :navigation=\"navigation\"\n :fuse=\"{ resultLimit: 42 }\"\n />\n\u003C/template>",{"id":2792,"title":575,"titles":2793,"content":2794,"level":312},"/docs/advanced/fulltext-search#minisearch-example",[178],"Read more about minisearch. \u003Cscript setup lang=\"ts\">\nimport MiniSearch from 'minisearch'\n\nconst query = ref('')\nconst { data } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))\n\nconst miniSearch = new MiniSearch({\n fields: ['title', 'content'],\n storeFields: ['title', 'content'],\n searchOptions: {\n prefix: true,\n fuzzy: 0.2,\n },\n})\n\n// Add data to the MiniSearch instance\nminiSearch.addAll(toValue(data.value))\nconst result = computed(() => miniSearch.search(toValue(query)))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"p-4\">\n \u003CUCard>\n \u003CUInput v-model=\"query\" placeholder=\"Search...\" />\n \u003Cul>\n \u003Cli v-for=\"link of result\" :key=\"link.id\" class=\"mt-2\">\n \u003CNuxtLink :to=\"link.id\">{{ link.title }}\u003C/NuxtLink>\n \u003Cp class=\"text-gray-500 text-xs\">{{ link.content }}\u003C/p>\n \u003C/li>\n \u003C/ul>\n \u003C/UCard>\n \u003C/UContainer>\n\u003C/template>",{"id":2796,"title":1157,"titles":2797,"content":2798,"level":312},"/docs/advanced/fulltext-search#fusejs-example",[178],"Read more about Fuse.js. \u003Cscript setup lang=\"ts\">\nimport Fuse from 'fuse.js'\n\nconst query = ref('')\nconst { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))\n\nconst fuse = new Fuse(data.value, {\n keys: ['title', 'description']\n})\n\nconst result = computed(() => fuse.search(toValue(query)).slice(0, 10))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"p-4\">\n \u003CUCard>\n \u003CUInput v-model=\"query\" placeholder=\"Search...\" class=\"w-full\" />\n \u003Cul>\n \u003Cli v-for=\"link of result\" :key=\"link.item.id\" class=\"mt-2\">\n \u003CUButton variant=\"ghost\" class=\"w-full\" :to=\"link.item.id\">\n {{ link.item.title }}\n \u003Cspan class=\"text-gray-500 text-xs\">\n {{ link.item.content?.slice(0, 100) }}...\n \u003C/span>\n \u003C/UButton>\n \u003C/li>\n \u003C/ul>\n \u003C/UCard>\n \u003C/UContainer>\n\u003C/template> 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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"id":183,"title":182,"titles":2800,"content":2801,"level":279},[],"Access to contents raw data in appliction There were lots of requests in Content version 2 about accessing contents raw data in production. In Content version 3 it is possible to ship contents raw data to production. In order to ship raw contents to production you need to define rawbody field in your collection's schema. That's it. Nuxt Content will detect this magical field in your schema and fill it with the raw content. import { defineCollection, defineContentConfig } from '@nuxt/content'\nimport { z } from 'zod'\n\nexport default defineContentConfig({\n collections: {\n docs: defineCollection({\n source: '**',\n type: 'page',\n schema: z.object({\n rawbody: z.string()\n })\n })\n }\n}) And you can use queryCollection() to fetch the raw content. \u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst { data } = useAsyncData('page-' + route.path, () => queryCollection('docs').path(route.path).first())\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cpre>{{ data.rawbody }}\u003C/pre>\n\u003C/template> In case you don't want to ship raw content of a specific file you can add rawbody: '' to frontmatter of that file. The auto filled value of rawbody is acting like default value and when you define rawbody in the frontmatter it will overwritten. ---\ntitle: My page\nrawbody: ''\n--- It is important to fill frontmatter fields with a same type of data that is defined in collection schema. In this case rawbody is a string, and you should consider passing empty string. Do not use boolean or other type of values. 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"id":187,"title":2803,"titles":2804,"content":2805,"level":279},"Database",[],"How Nuxt Content stores and retrieves content In Content v3, we have introduced a robust storage layer based on SQLite, which offers a powerful and efficient method for managing content. This marks a significant enhancement over the previous file-based storage system, which was constrained by performance and scalability limitations. In Content v2, the system read and parsed content during the Nitro runtime, creating a cache file for each content file to store the parsed data. This method introduced considerable overhead to the website's runtime.The I/O time in production was substantial, as the module had to load all cache files to search through the content.Additionally, the lack of optimization and compression for the content resulted in a large bundle size, particularly problematic in edge environments. Content management in Content v3 involves three key steps, which are designed to streamline the process and enhance performance.",{"id":2807,"title":2808,"titles":2809,"content":2810,"level":312},"/docs/advanced/database#generating-database-dump","Generating Database Dump",[2803],"For each collection in your project, the module reads the content from the defined source and parses it into an Abstract Syntax Tree (AST). It creates a specific table for each collection based on its schema. The parsed content is then inserted into the corresponding table, ensuring that the data structure aligns with the defined schema for optimal querying. Everything is then saved in a dump file.",{"id":2812,"title":2813,"titles":2814,"content":2815,"level":312},"/docs/advanced/database#restoring-dump-on-cold-start","Restoring Dump on Cold Start",[2803],"During runtime, when the application executes the first query to retrieve content, the module reads the generated dump from the previous step and restores it into the target database. This process is fast and optimized for each deployment mode and platform. The module employs a special integrity check mechanism to ensure that the database is updated with the latest content. This same integrity check also prevents duplicate imports, maintaining the integrity and accuracy of the data stored.",{"id":2817,"title":2818,"titles":2819,"content":2820,"level":312},"/docs/advanced/database#wasm-sqlite-in-browser","WASM SQLite in Browser",[2803],"For client-side navigation, the module utilizes a similar approach. When the application executes the first query for content, it downloads the generated dump from the server and initializes a local SQLite database within the browser. From that point onward, all queries are executed locally without needing to call the server, significantly improving the responsiveness of the application and providing a seamless user experience. This architecture not only enhances performance but also allows for offline capabilities, enabling users to access content even without an active internet connection. The combination of server-side and client-side processing ensures that Nuxt Content v3 is both powerful and flexible, catering to a wide range of use cases and environments.",{"id":191,"title":2822,"titles":2823,"content":2824,"level":279},"Tools",[],"Debugging tools Nuxt Content uses an SQLite database (contents.sqlite) to store and query content efficiently. If you're running into missing content, slow queries, or database issues, debugging your SQLite database can help! A simple way to inspect it? Use the SQLite VS Code extension!",{"id":2826,"title":2827,"titles":2828,"content":2829,"level":312},"/docs/advanced/tools#install-sqlite-vs-code-extension","Install SQLite VS Code Extension",[2822],"Open Visual Studio Code.Go to the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X on Mac).Search for \"SQLite\" (by alexcvzz) and install it.Open your Nuxt Content database (.data/content/contents.sqlite). If you don't see contents.sqlite, start your Nuxt app first:npx nuxi dev",{"id":2831,"title":2832,"titles":2833,"content":2834,"level":312},"/docs/advanced/tools#locate-your-sqlite-database","Locate Your SQLite Database",[2822],"Nuxt Content stores its database here: .data/content/contents.sqlite This file is automatically generated when you start your Nuxt app. No need to create it manually!",{"id":2836,"title":2837,"titles":2838,"content":2839,"level":312},"/docs/advanced/tools#open-explore-the-database","Open & Explore the Database",[2822],"Right-click on contents.sqlite in VS Code.Select \"Open Database\".Expand the Database Explorer panel to view tables & data.",{"id":2841,"title":2842,"titles":2843,"content":272,"level":312},"/docs/advanced/tools#fixing-common-issues","Fixing Common Issues",[2822],{"id":2845,"title":2846,"titles":2847,"content":2848,"level":380},"/docs/advanced/tools#content-not-showing","Content Not Showing?",[2822,2842],"Check if the database exists (.data/content/contents.sqlite).Run a cleanup & restart Nuxt:\nnpx nuxi cleanup && npx nuxi dev\nCheck if content is inside the database (run an SQL query).",{"id":2850,"title":2851,"titles":2852,"content":2853,"level":380},"/docs/advanced/tools#manually-reset-the-database","Manually Reset the Database",[2822,2842],"If things seem really broken, try resetting it: Delete the database file:\nrm -rf .data/content/contents.sqlite\nRun cleanup to remove old caches:\nnpx nuxi cleanup\nRestart Nuxt to generate a fresh database:\nnpx nuxi dev Cleaning up will remove cached data. Don't worryโ€”it regenerates automatically!",{"id":2855,"title":2856,"titles":2857,"content":2858,"level":312},"/docs/advanced/tools#more-debugging-tools","More Debugging Tools",[2822],"If VS Code isnโ€™t enough, check out: ๐Ÿ–ฅ๏ธ DB Browser for SQLite โ€“ A visual tool for inspecting & modifying the database.๐Ÿ› ๏ธ SQLite Command Line โ€“ Use sqlite3 contents.sqlite to run SQL queries from your terminal. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}",{"id":195,"title":194,"titles":2860,"content":2861,"level":279},[],"Modify your content using Nuxt build time hooks",{"id":2863,"title":2864,"titles":2865,"content":2866,"level":312},"/docs/advanced/hooks#contentfilebeforeparse","content:file:beforeParse",[194],"This hook is called before the content is parsed. It can be used to modify the raw content from a file before it is transformed\nor modify the transform options. export default defineNuxtConfig({\n hooks: {\n 'content:file:beforeParse'(ctx) {\n // ...\n }\n }\n})",{"id":2868,"title":2869,"titles":2870,"content":2871,"level":312},"/docs/advanced/hooks#contentfileafterparse","content:file:afterParse",[194],"This hook is called after the content is parsed and before it is saved to the database. export default defineNuxtConfig({\n hooks: {\n 'content:file:afterParse'(ctx) {\n // ...\n }\n }\n})",{"id":2873,"title":2465,"titles":2874,"content":2875,"level":312},"/docs/advanced/hooks#example-usage",[194],"export default defineNuxtConfig({\n // ...\n hooks: {\n 'content:file:beforeParse'(ctx) {\n const { file } = ctx;\n\n if (file.id.endsWith(\".md\")) {\n file.body = file.body.replace(/react/gi, \"Vue\");\n }\n },\n 'content:file:afterParse'(ctx) {\n const { file, content } = ctx;\n\n const wordsPerMinute = 180;\n const text = typeof file.body === 'string' ? file.body : '';\n const wordCount = text.split(/\\s+/).length;\n\n content.readingTime = Math.ceil(wordCount / wordsPerMinute);\n }\n }\n}) In the content:file:afterParse hook, we added a custom property to our content object. To be able to access that property within our pages using queryCollection(), we first need to define it in our content schema.export default defineContentConfig({\n collections: {\n content: defineCollection({\n type: 'page',\n source: '**/*.md',\n schema: z.object({\n readingTime: z.number().optional()\n })\n })\n }\n}); html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 .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 .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 .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}",{"id":199,"title":198,"titles":2877,"content":2878,"level":279},[],"Define a custom source to retrive data. By default, Nuxt Content provides some built-in sources like local files source and remote Github source. However this is not enough for some cases, for example, you want to fetch data from a remote API. In this case, you can define a custom source to fetch data and use it in your collections. Using defineCollectionSource, you can define a custom source. import { defineCollectionSource } from '@nuxt/content'\n\nconst hackernewsSource = defineCollectionSource({\n getKeys: () => {\n return fetch('https://hacker-news.firebaseio.com/v0/topstories.json')\n .then(res => res.json())\n .then(data => data.map((key: string) => `${key}.json`))\n },\n getItem: (key: string) => {\n const id = key.split('.')[0]\n return fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)\n .then(res => res.json())\n },\n}) Then you can use this source in your collections. import { defineContentConfig, defineCollectionSource, defineCollection } from '@nuxt/content'\nimport { z } from 'zod'\n\nconst hackernewsSource = defineCollectionSource({\n getKeys: () => {\n return fetch('https://hacker-news.firebaseio.com/v0/topstories.json')\n .then(res => res.json())\n .then(data => data.map((key: string) => `${key}.json`))\n },\n getItem: (key: string) => {\n const id = key.split('.')[0]\n return fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)\n .then(res => res.json())\n },\n})\n\nconst hackernews = defineCollection({\n type: 'data',\n source: hackernewsSource,\n schema: z.object({\n title: z.string(),\n date: z.date(),\n type: z.string(),\n score: z.number(),\n url: z.string(),\n by: z.string(),\n }),\n})\n\nexport default defineContentConfig({\n collections: {\n hackernews,\n },\n}) 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"id":203,"title":202,"titles":2880,"content":2881,"level":279},[],"Transformers in Nuxt Content allow you to programmatically parse, modify, or analyze your content files as they are processed. Transformers in Nuxt Content allow you to programmatically parse, modify, or analyze your content files as they are processed. They are especially useful for: Adding or modifying fields (e.g., appending to the title, generating slugs)Extracting metadata (e.g., listing used components)Enriching content with computed dataSupporting new content types",{"id":2883,"title":2884,"titles":2885,"content":2886,"level":312},"/docs/advanced/transformers#defining-a-transformer","Defining a Transformer",[202],"You can define a transformer using the defineTransformer helper from @nuxt/content: import { defineTransformer } from '@nuxt/content'\n\nexport default defineTransformer({\n name: 'title-suffix',\n extensions: ['.md'], // File extensions to apply this transformer to\n transform(file) {\n // Modify the file object as needed\n return {\n ...file,\n title: file.title + ' (suffix)',\n }\n },\n})",{"id":2888,"title":2889,"titles":2890,"content":2891,"level":380},"/docs/advanced/transformers#transformer-options","Transformer Options",[202,2884],"name (string): A unique name for your transformer.extensions (string): File extensions this transformer should apply to (e.g., ['.md']).transform (function): The function that receives the file object and returns the modified file.",{"id":2893,"title":2894,"titles":2895,"content":2896,"level":312},"/docs/advanced/transformers#registering-transformers","Registering Transformers",[202],"Transformers are registered in your nuxt.config.ts: export default defineNuxtConfig({\n content: {\n build: {\n transformers: [\n '~~/transformers/title-suffix',\n '~~/transformers/my-custom-transformer',\n ],\n },\n },\n})",{"id":2898,"title":2899,"titles":2900,"content":2901,"level":312},"/docs/advanced/transformers#example-adding-metadata","Example: Adding Metadata",[202],"Transformers can add a __metadata field to the file. This field is not stored in the database but can be used for runtime logic. import { defineTransformer } from '@nuxt/content'\n\nexport default defineTransformer({\n name: 'component-metadata',\n extensions: ['.md'],\n transform(file) {\n // Example: Detect if a custom component is used\n const usesMyComponent = file.body?.includes('\u003CMyCustomComponent>')\n return {\n ...file,\n __metadata: {\n components: usesMyComponent ? ['MyCustomComponent'] : [],\n },\n }\n },\n}) Note: The __metadata field is only available at runtime and is not persisted in the content database.",{"id":2903,"title":2904,"titles":2905,"content":2906,"level":312},"/docs/advanced/transformers#api-reference","API Reference",[202],"interface Transformer {\n name: string\n extensions: string[]\n transform: (file: ContentFile) => ContentFile\n} ContentFile is the object representing the parsed content file, including frontmatter, body, and other fields.",{"id":2908,"title":2909,"titles":2910,"content":2911,"level":312},"/docs/advanced/transformers#supporting-new-file-formats-with-transformers","Supporting New File Formats with Transformers",[202],"Transformers are not limited to modifying existing contentโ€”they can also be used to add support for new file formats in Nuxt Content. By defining a transformer with a custom parse method, you can instruct Nuxt Content how to read and process files with new extensions, such as YAML.",{"id":2913,"title":2914,"titles":2915,"content":2916,"level":380},"/docs/advanced/transformers#example-yaml-file-support","Example: YAML File Support",[202,2909],"Suppose you want to support .yml and .yaml files in your content directory. You can create a transformer that parses YAML frontmatter and body, and registers it for those extensions: import { defineTransformer } from '@nuxt/content'\n\nexport default defineTransformer({\n name: 'Yaml',\n extensions: ['.yml', '.yaml'],\n parse: (file) => {\n const { id, body } = file\n \n // parse the body with your favorite yaml parser\n const parsed = parseYaml(body)\n\n return {\n ...parsed,\n id,\n }\n },\n}) Register your YAML transformer in your Nuxt config just like any other transformer: export default defineNuxtConfig({\n content: {\n build: {\n transformers: [\n '~~/transformers/yaml',\n // ...other transformers\n ],\n },\n },\n}) This approach allows you to extend Nuxt Content to handle any custom file format you need. 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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",1774543464770]