[{"data":1,"prerenderedAt":2582},["ShallowReactive",2],{"blog-nuxt-content":3},{"id":4,"title":5,"body":6,"date":2571,"description":2572,"extension":1573,"meta":2573,"navigation":185,"path":2574,"seo":2575,"stem":2576,"tags":2577,"__hash__":2581},"blog\u002Fblog\u002Fnuxt-content.md","Nuxt Content: Cara Elegan Nuxt Mengelola Konten",{"type":7,"value":8,"toc":2555},"minimark",[9,14,35,46,61,87,90,94,97,135,142,144,148,204,211,250,256,258,262,272,432,460,462,466,473,732,735,869,879,881,885,896,899,907,921,924,1138,1145,1164,1166,1170,1180,1277,1401,1555,1557,1561,1564,1569,1588,1593,1613,1618,1664,1675,1806,1808,1812,1815,2047,2050,2052,2056,2065,2403,2414,2416,2420,2442,2457,2459,2463,2478,2485,2487,2491,2516,2519,2523,2548,2551],[10,11,13],"h2",{"id":12},"apa-itu-nuxt-content","Apa Itu Nuxt Content",[15,16,17,21,22,26,27,30,31,34],"p",{},[18,19,20],"code",{},"@nuxt\u002Fcontent"," adalah ",[23,24,25],"em",{},"module"," resmi Nuxt yang memungkinkan kita membaca file Markdown, YAML, JSON, dan CSV langsung dari folder ",[18,28,29],{},"content\u002F"," dan mengaksesnya seperti ",[23,32,33],{},"query"," database.",[15,36,37,38,41,42,45],{},"Tidak perlu ",[23,39,40],{},"API endpoint"," khusus. Tidak perlu ",[23,43,44],{},"backend",". Cukup tulis file, dan Nuxt Content mengurusnya.",[15,47,48,49,52,53,56,57,60],{},"Kalau kamu pernah pakai Contentful atau Sanity.io — itu adalah ",[23,50,51],{},"headless CMS external",". Nuxt Content bisa dibilang versi ",[23,54,55],{},"local-first","-nya: kamu yang pegang file, kamu yang kontrol, dan tidak ada biaya ",[23,58,59],{},"subscription",".",[62,63,64],"blockquote",{},[15,65,66,70,71,74,75,78,79,82,83,86],{},[67,68,69],"strong",{},"Fun Fact:"," Nuxt Content v2 pertama kali dirilis bersamaan dengan Nuxt 3 di awal 2022. Pada v3 (yang dipakai sekarang), arsitekturnya dibangun ulang total dengan ",[23,72,73],{},"SQLite-based engine"," di bawahnya — artinya query ",[18,76,77],{},"WHERE",", ",[18,80,81],{},"ORDER BY",", dan ",[18,84,85],{},"LIMIT"," yang kamu tulis itu benar-benar dieksekusi seperti SQL asli.",[88,89],"hr",{},[10,91,93],{"id":92},"kenapa-ini-menarik","Kenapa Ini Menarik",[15,95,96],{},"Sebelum Nuxt Content, kalau mau punya blog di site statis, kita biasanya:",[98,99,100,107,113,123],"ol",{},[101,102,103,104],"li",{},"Baca file Markdown secara manual pakai ",[18,105,106],{},"fs.readFileSync",[101,108,109,110],{},"Parse frontmatter pakai ",[18,111,112],{},"gray-matter",[101,114,115,116,119,120],{},"Render Markdown pakai ",[18,117,118],{},"remark"," atau ",[18,121,122],{},"marked",[101,124,125,126,78,129,82,132],{},"Buat sendiri sistem ",[23,127,128],{},"routing",[23,130,131],{},"pagination",[23,133,134],{},"filtering",[15,136,137,138,141],{},"Itu banyak sekali ",[23,139,140],{},"boilerplate"," yang tidak ada hubungannya dengan konten itu sendiri. Nuxt Content menghilangkan semua itu.",[88,143],{},[10,145,147],{"id":146},"instalasi","Instalasi",[149,150,155],"pre",{"className":151,"code":152,"language":153,"meta":154,"style":154},"language-bash shiki shiki-themes github-light github-dark","# pakai bun\nbun add @nuxt\u002Fcontent\n\n# atau npm\nnpm install @nuxt\u002Fcontent\n","bash","",[18,156,157,166,180,187,193],{"__ignoreMap":154},[158,159,162],"span",{"class":160,"line":161},"line",1,[158,163,165],{"class":164},"sJ8bj","# pakai bun\n",[158,167,169,173,177],{"class":160,"line":168},2,[158,170,172],{"class":171},"sScJk","bun",[158,174,176],{"class":175},"sZZnC"," add",[158,178,179],{"class":175}," @nuxt\u002Fcontent\n",[158,181,183],{"class":160,"line":182},3,[158,184,186],{"emptyLinePlaceholder":185},true,"\n",[158,188,190],{"class":160,"line":189},4,[158,191,192],{"class":164},"# atau npm\n",[158,194,196,199,202],{"class":160,"line":195},5,[158,197,198],{"class":171},"npm",[158,200,201],{"class":175}," install",[158,203,179],{"class":175},[15,205,206,207,210],{},"Daftarkan di ",[18,208,209],{},"nuxt.config.ts",":",[149,212,216],{"className":213,"code":214,"language":215,"meta":154,"style":154},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@nuxt\u002Fcontent'],\n})\n","ts",[18,217,218,234,245],{"__ignoreMap":154},[158,219,220,224,227,230],{"class":160,"line":161},[158,221,223],{"class":222},"szBVR","export",[158,225,226],{"class":222}," default",[158,228,229],{"class":171}," defineNuxtConfig",[158,231,233],{"class":232},"sVt8B","({\n",[158,235,236,239,242],{"class":160,"line":168},[158,237,238],{"class":232},"  modules: [",[158,240,241],{"class":175},"'@nuxt\u002Fcontent'",[158,243,244],{"class":232},"],\n",[158,246,247],{"class":160,"line":182},[158,248,249],{"class":232},"})\n",[15,251,252,253,255],{},"Buat folder ",[18,254,29],{}," di root project, dan mulai tulis. Selesai.",[88,257],{},[10,259,261],{"id":260},"mendefinisikan-koleksi","Mendefinisikan Koleksi",[15,263,264,265,268,269,210],{},"Di Nuxt Content v3, kita mendefinisikan ",[23,266,267],{},"schema"," koleksi di ",[18,270,271],{},"content.config.ts",[149,273,275],{"className":213,"code":274,"language":215,"meta":154,"style":154},"import { defineContentConfig, defineCollection, z } from '@nuxt\u002Fcontent'\n\nexport default defineContentConfig({\n  collections: {\n    blog: defineCollection({\n      type: 'page',\n      source: 'blog\u002F*.md',\n      schema: z.object({\n        title: z.string(),\n        date: z.string(),\n        description: z.string(),\n        tags: z.array(z.string()).optional(),\n      }),\n    }),\n  },\n})\n",[18,276,277,291,295,306,311,321,333,344,355,367,377,387,409,415,421,427],{"__ignoreMap":154},[158,278,279,282,285,288],{"class":160,"line":161},[158,280,281],{"class":222},"import",[158,283,284],{"class":232}," { defineContentConfig, defineCollection, z } ",[158,286,287],{"class":222},"from",[158,289,290],{"class":175}," '@nuxt\u002Fcontent'\n",[158,292,293],{"class":160,"line":168},[158,294,186],{"emptyLinePlaceholder":185},[158,296,297,299,301,304],{"class":160,"line":182},[158,298,223],{"class":222},[158,300,226],{"class":222},[158,302,303],{"class":171}," defineContentConfig",[158,305,233],{"class":232},[158,307,308],{"class":160,"line":189},[158,309,310],{"class":232},"  collections: {\n",[158,312,313,316,319],{"class":160,"line":195},[158,314,315],{"class":232},"    blog: ",[158,317,318],{"class":171},"defineCollection",[158,320,233],{"class":232},[158,322,324,327,330],{"class":160,"line":323},6,[158,325,326],{"class":232},"      type: ",[158,328,329],{"class":175},"'page'",[158,331,332],{"class":232},",\n",[158,334,336,339,342],{"class":160,"line":335},7,[158,337,338],{"class":232},"      source: ",[158,340,341],{"class":175},"'blog\u002F*.md'",[158,343,332],{"class":232},[158,345,347,350,353],{"class":160,"line":346},8,[158,348,349],{"class":232},"      schema: z.",[158,351,352],{"class":171},"object",[158,354,233],{"class":232},[158,356,358,361,364],{"class":160,"line":357},9,[158,359,360],{"class":232},"        title: z.",[158,362,363],{"class":171},"string",[158,365,366],{"class":232},"(),\n",[158,368,370,373,375],{"class":160,"line":369},10,[158,371,372],{"class":232},"        date: z.",[158,374,363],{"class":171},[158,376,366],{"class":232},[158,378,380,383,385],{"class":160,"line":379},11,[158,381,382],{"class":232},"        description: z.",[158,384,363],{"class":171},[158,386,366],{"class":232},[158,388,390,393,396,399,401,404,407],{"class":160,"line":389},12,[158,391,392],{"class":232},"        tags: z.",[158,394,395],{"class":171},"array",[158,397,398],{"class":232},"(z.",[158,400,363],{"class":171},[158,402,403],{"class":232},"()).",[158,405,406],{"class":171},"optional",[158,408,366],{"class":232},[158,410,412],{"class":160,"line":411},13,[158,413,414],{"class":232},"      }),\n",[158,416,418],{"class":160,"line":417},14,[158,419,420],{"class":232},"    }),\n",[158,422,424],{"class":160,"line":423},15,[158,425,426],{"class":232},"  },\n",[158,428,430],{"class":160,"line":429},16,[158,431,249],{"class":232},[15,433,434,437,438,441,442,78,445,448,449,452,453,456,457,60],{},[18,435,436],{},"type: 'page'"," artinya konten ini bisa di-",[23,439,440],{},"render"," sebagai halaman — punya ",[23,443,444],{},"body",[23,446,447],{},"toc"," (daftar isi otomatis), dan ",[23,450,451],{},"excerpt",". Sementara ",[18,454,455],{},"type: 'data'"," cocok untuk file JSON\u002FYAML yang berisi data tanpa ",[23,458,459],{},"rendered body",[88,461],{},[10,463,465],{"id":464},"use-case-1-blog-pribadi","Use Case 1 — Blog Pribadi",[15,467,468,469,472],{},"Paling klasik. Kamu tulis artikel di ",[18,470,471],{},"content\u002Fblog\u002Fnama-artikel.md",", lalu query di halaman daftar artikel:",[149,474,478],{"className":475,"code":476,"language":477,"meta":154,"style":154},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst { data: posts } = await useAsyncData('posts', () =>\n  queryCollection('blog')\n    .where('draft', '!=', true)\n    .order('date', 'DESC')\n    .all()\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle v-for=\"post in posts\" :key=\"post.stem\">\n    \u003CNuxtLink :to=\"post.path\">{{ post.title }}\u003C\u002FNuxtLink>\n    \u003Cp>{{ post.description }}\u003C\u002Fp>\n    \u003Ctime>{{ post.date }}\u003C\u002Ftime>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","vue",[18,479,480,504,546,559,584,603,613,617,626,630,639,665,688,701,715,724],{"__ignoreMap":154},[158,481,482,485,489,492,495,498,501],{"class":160,"line":161},[158,483,484],{"class":232},"\u003C",[158,486,488],{"class":487},"s9eBZ","script",[158,490,491],{"class":171}," setup",[158,493,494],{"class":171}," lang",[158,496,497],{"class":232},"=",[158,499,500],{"class":175},"\"ts\"",[158,502,503],{"class":232},">\n",[158,505,506,509,512,516,519,523,526,528,531,534,537,540,543],{"class":160,"line":168},[158,507,508],{"class":222},"const",[158,510,511],{"class":232}," { ",[158,513,515],{"class":514},"s4XuR","data",[158,517,518],{"class":232},": ",[158,520,522],{"class":521},"sj4cs","posts",[158,524,525],{"class":232}," } ",[158,527,497],{"class":222},[158,529,530],{"class":222}," await",[158,532,533],{"class":171}," useAsyncData",[158,535,536],{"class":232},"(",[158,538,539],{"class":175},"'posts'",[158,541,542],{"class":232},", () ",[158,544,545],{"class":222},"=>\n",[158,547,548,551,553,556],{"class":160,"line":182},[158,549,550],{"class":171},"  queryCollection",[158,552,536],{"class":232},[158,554,555],{"class":175},"'blog'",[158,557,558],{"class":232},")\n",[158,560,561,564,567,569,572,574,577,579,582],{"class":160,"line":189},[158,562,563],{"class":232},"    .",[158,565,566],{"class":171},"where",[158,568,536],{"class":232},[158,570,571],{"class":175},"'draft'",[158,573,78],{"class":232},[158,575,576],{"class":175},"'!='",[158,578,78],{"class":232},[158,580,581],{"class":521},"true",[158,583,558],{"class":232},[158,585,586,588,591,593,596,598,601],{"class":160,"line":195},[158,587,563],{"class":232},[158,589,590],{"class":171},"order",[158,592,536],{"class":232},[158,594,595],{"class":175},"'date'",[158,597,78],{"class":232},[158,599,600],{"class":175},"'DESC'",[158,602,558],{"class":232},[158,604,605,607,610],{"class":160,"line":323},[158,606,563],{"class":232},[158,608,609],{"class":171},"all",[158,611,612],{"class":232},"()\n",[158,614,615],{"class":160,"line":335},[158,616,558],{"class":232},[158,618,619,622,624],{"class":160,"line":346},[158,620,621],{"class":232},"\u003C\u002F",[158,623,488],{"class":487},[158,625,503],{"class":232},[158,627,628],{"class":160,"line":357},[158,629,186],{"emptyLinePlaceholder":185},[158,631,632,634,637],{"class":160,"line":369},[158,633,484],{"class":232},[158,635,636],{"class":487},"template",[158,638,503],{"class":232},[158,640,641,644,647,650,652,655,658,660,663],{"class":160,"line":379},[158,642,643],{"class":232},"  \u003C",[158,645,646],{"class":487},"article",[158,648,649],{"class":171}," v-for",[158,651,497],{"class":232},[158,653,654],{"class":175},"\"post in posts\"",[158,656,657],{"class":171}," :key",[158,659,497],{"class":232},[158,661,662],{"class":175},"\"post.stem\"",[158,664,503],{"class":232},[158,666,667,670,673,676,678,681,684,686],{"class":160,"line":389},[158,668,669],{"class":232},"    \u003C",[158,671,672],{"class":487},"NuxtLink",[158,674,675],{"class":171}," :to",[158,677,497],{"class":232},[158,679,680],{"class":175},"\"post.path\"",[158,682,683],{"class":232},">{{ post.title }}\u003C\u002F",[158,685,672],{"class":487},[158,687,503],{"class":232},[158,689,690,692,694,697,699],{"class":160,"line":411},[158,691,669],{"class":232},[158,693,15],{"class":487},[158,695,696],{"class":232},">{{ post.description }}\u003C\u002F",[158,698,15],{"class":487},[158,700,503],{"class":232},[158,702,703,705,708,711,713],{"class":160,"line":417},[158,704,669],{"class":232},[158,706,707],{"class":487},"time",[158,709,710],{"class":232},">{{ post.date }}\u003C\u002F",[158,712,707],{"class":487},[158,714,503],{"class":232},[158,716,717,720,722],{"class":160,"line":423},[158,718,719],{"class":232},"  \u003C\u002F",[158,721,646],{"class":487},[158,723,503],{"class":232},[158,725,726,728,730],{"class":160,"line":429},[158,727,621],{"class":232},[158,729,636],{"class":487},[158,731,503],{"class":232},[15,733,734],{},"Dan untuk halaman detail artikel:",[149,736,738],{"className":475,"code":737,"language":477,"meta":154,"style":154},"\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst { data: post } = await useAsyncData(route.path, () =>\n  queryCollection('blog').path(route.path).first()\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CContentRenderer :value=\"post\" \u002F>\n\u003C\u002Ftemplate>\n",[18,739,740,756,771,797,819,823,831,835,843,861],{"__ignoreMap":154},[158,741,742,744,746,748,750,752,754],{"class":160,"line":161},[158,743,484],{"class":232},[158,745,488],{"class":487},[158,747,491],{"class":171},[158,749,494],{"class":171},[158,751,497],{"class":232},[158,753,500],{"class":175},[158,755,503],{"class":232},[158,757,758,760,763,766,769],{"class":160,"line":168},[158,759,508],{"class":222},[158,761,762],{"class":521}," route",[158,764,765],{"class":222}," =",[158,767,768],{"class":171}," useRoute",[158,770,612],{"class":232},[158,772,773,775,777,779,781,784,786,788,790,792,795],{"class":160,"line":182},[158,774,508],{"class":222},[158,776,511],{"class":232},[158,778,515],{"class":514},[158,780,518],{"class":232},[158,782,783],{"class":521},"post",[158,785,525],{"class":232},[158,787,497],{"class":222},[158,789,530],{"class":222},[158,791,533],{"class":171},[158,793,794],{"class":232},"(route.path, () ",[158,796,545],{"class":222},[158,798,799,801,803,805,808,811,814,817],{"class":160,"line":189},[158,800,550],{"class":171},[158,802,536],{"class":232},[158,804,555],{"class":175},[158,806,807],{"class":232},").",[158,809,810],{"class":171},"path",[158,812,813],{"class":232},"(route.path).",[158,815,816],{"class":171},"first",[158,818,612],{"class":232},[158,820,821],{"class":160,"line":195},[158,822,558],{"class":232},[158,824,825,827,829],{"class":160,"line":323},[158,826,621],{"class":232},[158,828,488],{"class":487},[158,830,503],{"class":232},[158,832,833],{"class":160,"line":335},[158,834,186],{"emptyLinePlaceholder":185},[158,836,837,839,841],{"class":160,"line":346},[158,838,484],{"class":232},[158,840,636],{"class":487},[158,842,503],{"class":232},[158,844,845,847,850,853,855,858],{"class":160,"line":357},[158,846,643],{"class":232},[158,848,849],{"class":487},"ContentRenderer",[158,851,852],{"class":171}," :value",[158,854,497],{"class":232},[158,856,857],{"class":175},"\"post\"",[158,859,860],{"class":232}," \u002F>\n",[158,862,863,865,867],{"class":160,"line":369},[158,864,621],{"class":232},[158,866,636],{"class":487},[158,868,503],{"class":232},[15,870,871,874,875,878],{},[18,872,873],{},"\u003CContentRenderer>"," merender Markdown menjadi HTML, lengkap dengan ",[23,876,877],{},"syntax highlighting"," dan semua komponen MDC yang kita definisikan.",[88,880],{},[10,882,884],{"id":883},"use-case-2-dokumentasi","Use Case 2 — Dokumentasi",[15,886,887,888,891,892,895],{},"Nuxt Content sangat populer untuk ",[23,889,890],{},"documentation site",". Banyak ",[23,893,894],{},"library"," open source yang memakai ini, termasuk dokumentasi Nuxt sendiri yang dibangun di atas Nuxt Content.",[15,897,898],{},"Struktur folder dokumentasi biasanya:",[149,900,905],{"className":901,"code":903,"language":904},[902],"language-text","content\u002F\n├── docs\u002F\n│   ├── 1.getting-started\u002F\n│   │   ├── 1.introduction.md\n│   │   └── 2.installation.md\n│   ├── 2.configuration\u002F\n│   │   └── index.md\n│   └── 3.api-reference\u002F\n│       └── index.md\n","text",[18,906,903],{"__ignoreMap":154},[15,908,909,910,913,914,917,918,60],{},"Nuxt Content menghormati ",[23,911,912],{},"prefix"," angka di nama file\u002Ffolder untuk menentukan urutan, tapi tidak memasukkannya ke URL. Jadi ",[18,915,916],{},"1.getting-started\u002F1.introduction.md"," akan diakses di ",[18,919,920],{},"\u002Fdocs\u002Fgetting-started\u002Fintroduction",[15,922,923],{},"Untuk navigasi otomatis:",[149,925,927],{"className":475,"code":926,"language":477,"meta":154,"style":154},"\u003Cscript setup lang=\"ts\">\nconst navigation = await queryCollectionNavigation('docs')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnav>\n    \u003Ctemplate v-for=\"item in navigation\">\n      \u003CNuxtLink :to=\"item.path\">{{ item.title }}\u003C\u002FNuxtLink>\n      \u003Cul v-if=\"item.children\">\n        \u003Cli v-for=\"child in item.children\">\n          \u003CNuxtLink :to=\"child.path\">{{ child.title }}\u003C\u002FNuxtLink>\n        \u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n",[18,928,929,945,966,974,978,986,995,1020,1041,1058,1074,1095,1104,1113,1122,1130],{"__ignoreMap":154},[158,930,931,933,935,937,939,941,943],{"class":160,"line":161},[158,932,484],{"class":232},[158,934,488],{"class":487},[158,936,491],{"class":171},[158,938,494],{"class":171},[158,940,497],{"class":232},[158,942,500],{"class":175},[158,944,503],{"class":232},[158,946,947,949,952,954,956,959,961,964],{"class":160,"line":168},[158,948,508],{"class":222},[158,950,951],{"class":521}," navigation",[158,953,765],{"class":222},[158,955,530],{"class":222},[158,957,958],{"class":171}," queryCollectionNavigation",[158,960,536],{"class":232},[158,962,963],{"class":175},"'docs'",[158,965,558],{"class":232},[158,967,968,970,972],{"class":160,"line":182},[158,969,621],{"class":232},[158,971,488],{"class":487},[158,973,503],{"class":232},[158,975,976],{"class":160,"line":189},[158,977,186],{"emptyLinePlaceholder":185},[158,979,980,982,984],{"class":160,"line":195},[158,981,484],{"class":232},[158,983,636],{"class":487},[158,985,503],{"class":232},[158,987,988,990,993],{"class":160,"line":323},[158,989,643],{"class":232},[158,991,992],{"class":487},"nav",[158,994,503],{"class":232},[158,996,997,999,1001,1003,1005,1008,1011,1014,1016,1018],{"class":160,"line":335},[158,998,669],{"class":232},[158,1000,636],{"class":487},[158,1002,649],{"class":222},[158,1004,497],{"class":232},[158,1006,1007],{"class":175},"\"",[158,1009,1010],{"class":232},"item ",[158,1012,1013],{"class":222},"in",[158,1015,951],{"class":232},[158,1017,1007],{"class":175},[158,1019,503],{"class":232},[158,1021,1022,1025,1027,1029,1031,1034,1037,1039],{"class":160,"line":346},[158,1023,1024],{"class":232},"      \u003C",[158,1026,672],{"class":487},[158,1028,675],{"class":171},[158,1030,497],{"class":232},[158,1032,1033],{"class":175},"\"item.path\"",[158,1035,1036],{"class":232},">{{ item.title }}\u003C\u002F",[158,1038,672],{"class":487},[158,1040,503],{"class":232},[158,1042,1043,1045,1048,1051,1053,1056],{"class":160,"line":357},[158,1044,1024],{"class":232},[158,1046,1047],{"class":487},"ul",[158,1049,1050],{"class":171}," v-if",[158,1052,497],{"class":232},[158,1054,1055],{"class":175},"\"item.children\"",[158,1057,503],{"class":232},[158,1059,1060,1063,1065,1067,1069,1072],{"class":160,"line":369},[158,1061,1062],{"class":232},"        \u003C",[158,1064,101],{"class":487},[158,1066,649],{"class":171},[158,1068,497],{"class":232},[158,1070,1071],{"class":175},"\"child in item.children\"",[158,1073,503],{"class":232},[158,1075,1076,1079,1081,1083,1085,1088,1091,1093],{"class":160,"line":379},[158,1077,1078],{"class":232},"          \u003C",[158,1080,672],{"class":487},[158,1082,675],{"class":171},[158,1084,497],{"class":232},[158,1086,1087],{"class":175},"\"child.path\"",[158,1089,1090],{"class":232},">{{ child.title }}\u003C\u002F",[158,1092,672],{"class":487},[158,1094,503],{"class":232},[158,1096,1097,1100,1102],{"class":160,"line":389},[158,1098,1099],{"class":232},"        \u003C\u002F",[158,1101,101],{"class":487},[158,1103,503],{"class":232},[158,1105,1106,1109,1111],{"class":160,"line":411},[158,1107,1108],{"class":232},"      \u003C\u002F",[158,1110,1047],{"class":487},[158,1112,503],{"class":232},[158,1114,1115,1118,1120],{"class":160,"line":417},[158,1116,1117],{"class":232},"    \u003C\u002F",[158,1119,636],{"class":487},[158,1121,503],{"class":232},[158,1123,1124,1126,1128],{"class":160,"line":423},[158,1125,719],{"class":232},[158,1127,992],{"class":487},[158,1129,503],{"class":232},[158,1131,1132,1134,1136],{"class":160,"line":429},[158,1133,621],{"class":232},[158,1135,636],{"class":487},[158,1137,503],{"class":232},[15,1139,1140,1141,1144],{},"Navigasi hierarki dibangun otomatis dari struktur folder. Tidak perlu tulis ",[23,1142,1143],{},"config"," navigasi secara manual.",[62,1146,1147],{},[15,1148,1149,1151,1152,1155,1156,1159,1160,1163],{},[67,1150,69],{}," ",[18,1153,1154],{},"queryCollectionNavigation"," diperkenalkan di v3 dan tidak ada di v2. Di v2 kita harus pakai ",[18,1157,1158],{},"fetchContentNavigation()"," yang cara kerjanya berbeda. Ini salah satu ",[23,1161,1162],{},"breaking change"," yang paling sering bikin bingung saat upgrade.",[88,1165],{},[10,1167,1169],{"id":1168},"use-case-3-portfolio-dengan-data-json","Use Case 3 — Portfolio dengan Data JSON",[15,1171,1172,1173,1176,1177,1179],{},"Nuxt Content tidak hanya untuk Markdown. File JSON bisa dijadikan ",[23,1174,1175],{},"data collection"," yang di-",[23,1178,33],{}," juga. Cocok untuk data yang lebih terstruktur seperti daftar project atau pengalaman kerja.",[149,1181,1185],{"className":1182,"code":1183,"language":1184,"meta":154,"style":154},"language-json shiki shiki-themes github-light github-dark","\u002F\u002F content\u002Fprojects.json\n{\n  \"items\": [\n    {\n      \"title\": \"Personal Site\",\n      \"description\": \"Blog dan portfolio pribadi dibangun dengan Nuxt 3\",\n      \"tags\": [\"Nuxt\", \"Tailwind\"],\n      \"link\": \"https:\u002F\u002Fgithub.com\u002Frdwansch\u002Fpersonal-site\"\n    }\n  ]\n}\n","json",[18,1186,1187,1192,1197,1205,1210,1222,1234,1252,1262,1267,1272],{"__ignoreMap":154},[158,1188,1189],{"class":160,"line":161},[158,1190,1191],{"class":164},"\u002F\u002F content\u002Fprojects.json\n",[158,1193,1194],{"class":160,"line":168},[158,1195,1196],{"class":232},"{\n",[158,1198,1199,1202],{"class":160,"line":182},[158,1200,1201],{"class":521},"  \"items\"",[158,1203,1204],{"class":232},": [\n",[158,1206,1207],{"class":160,"line":189},[158,1208,1209],{"class":232},"    {\n",[158,1211,1212,1215,1217,1220],{"class":160,"line":195},[158,1213,1214],{"class":521},"      \"title\"",[158,1216,518],{"class":232},[158,1218,1219],{"class":175},"\"Personal Site\"",[158,1221,332],{"class":232},[158,1223,1224,1227,1229,1232],{"class":160,"line":323},[158,1225,1226],{"class":521},"      \"description\"",[158,1228,518],{"class":232},[158,1230,1231],{"class":175},"\"Blog dan portfolio pribadi dibangun dengan Nuxt 3\"",[158,1233,332],{"class":232},[158,1235,1236,1239,1242,1245,1247,1250],{"class":160,"line":335},[158,1237,1238],{"class":521},"      \"tags\"",[158,1240,1241],{"class":232},": [",[158,1243,1244],{"class":175},"\"Nuxt\"",[158,1246,78],{"class":232},[158,1248,1249],{"class":175},"\"Tailwind\"",[158,1251,244],{"class":232},[158,1253,1254,1257,1259],{"class":160,"line":346},[158,1255,1256],{"class":521},"      \"link\"",[158,1258,518],{"class":232},[158,1260,1261],{"class":175},"\"https:\u002F\u002Fgithub.com\u002Frdwansch\u002Fpersonal-site\"\n",[158,1263,1264],{"class":160,"line":357},[158,1265,1266],{"class":232},"    }\n",[158,1268,1269],{"class":160,"line":369},[158,1270,1271],{"class":232},"  ]\n",[158,1273,1274],{"class":160,"line":379},[158,1275,1276],{"class":232},"}\n",[149,1278,1280],{"className":213,"code":1279,"language":215,"meta":154,"style":154},"\u002F\u002F content.config.ts\nprojects: defineCollection({\n  type: 'data',\n  source: 'projects.json',\n  schema: z.object({\n    items: z.array(z.object({\n      title: z.string(),\n      description: z.string(),\n      tags: z.array(z.string()),\n      link: z.string().nullable(),\n    })),\n  }),\n})\n",[18,1281,1282,1287,1298,1308,1318,1327,1340,1349,1358,1372,1387,1392,1397],{"__ignoreMap":154},[158,1283,1284],{"class":160,"line":161},[158,1285,1286],{"class":164},"\u002F\u002F content.config.ts\n",[158,1288,1289,1292,1294,1296],{"class":160,"line":168},[158,1290,1291],{"class":171},"projects",[158,1293,518],{"class":232},[158,1295,318],{"class":171},[158,1297,233],{"class":232},[158,1299,1300,1303,1306],{"class":160,"line":182},[158,1301,1302],{"class":232},"  type: ",[158,1304,1305],{"class":175},"'data'",[158,1307,332],{"class":232},[158,1309,1310,1313,1316],{"class":160,"line":189},[158,1311,1312],{"class":232},"  source: ",[158,1314,1315],{"class":175},"'projects.json'",[158,1317,332],{"class":232},[158,1319,1320,1323,1325],{"class":160,"line":195},[158,1321,1322],{"class":232},"  schema: z.",[158,1324,352],{"class":171},[158,1326,233],{"class":232},[158,1328,1329,1332,1334,1336,1338],{"class":160,"line":323},[158,1330,1331],{"class":232},"    items: z.",[158,1333,395],{"class":171},[158,1335,398],{"class":232},[158,1337,352],{"class":171},[158,1339,233],{"class":232},[158,1341,1342,1345,1347],{"class":160,"line":335},[158,1343,1344],{"class":232},"      title: z.",[158,1346,363],{"class":171},[158,1348,366],{"class":232},[158,1350,1351,1354,1356],{"class":160,"line":346},[158,1352,1353],{"class":232},"      description: z.",[158,1355,363],{"class":171},[158,1357,366],{"class":232},[158,1359,1360,1363,1365,1367,1369],{"class":160,"line":357},[158,1361,1362],{"class":232},"      tags: z.",[158,1364,395],{"class":171},[158,1366,398],{"class":232},[158,1368,363],{"class":171},[158,1370,1371],{"class":232},"()),\n",[158,1373,1374,1377,1379,1382,1385],{"class":160,"line":369},[158,1375,1376],{"class":232},"      link: z.",[158,1378,363],{"class":171},[158,1380,1381],{"class":232},"().",[158,1383,1384],{"class":171},"nullable",[158,1386,366],{"class":232},[158,1388,1389],{"class":160,"line":379},[158,1390,1391],{"class":232},"    })),\n",[158,1393,1394],{"class":160,"line":389},[158,1395,1396],{"class":232},"  }),\n",[158,1398,1399],{"class":160,"line":411},[158,1400,249],{"class":232},[149,1402,1404],{"className":475,"code":1403,"language":477,"meta":154,"style":154},"\u003Cscript setup lang=\"ts\">\nconst { data: projects } = await useAsyncData('projects', () =>\n  queryCollection('projects').first()\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-for=\"project in projects?.items\" :key=\"project.title\">\n    \u003Ch3>{{ project.title }}\u003C\u002Fh3>\n    \u003Cp>{{ project.description }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[18,1405,1406,1422,1451,1465,1469,1477,1481,1489,1512,1526,1539,1547],{"__ignoreMap":154},[158,1407,1408,1410,1412,1414,1416,1418,1420],{"class":160,"line":161},[158,1409,484],{"class":232},[158,1411,488],{"class":487},[158,1413,491],{"class":171},[158,1415,494],{"class":171},[158,1417,497],{"class":232},[158,1419,500],{"class":175},[158,1421,503],{"class":232},[158,1423,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444,1447,1449],{"class":160,"line":168},[158,1425,508],{"class":222},[158,1427,511],{"class":232},[158,1429,515],{"class":514},[158,1431,518],{"class":232},[158,1433,1291],{"class":521},[158,1435,525],{"class":232},[158,1437,497],{"class":222},[158,1439,530],{"class":222},[158,1441,533],{"class":171},[158,1443,536],{"class":232},[158,1445,1446],{"class":175},"'projects'",[158,1448,542],{"class":232},[158,1450,545],{"class":222},[158,1452,1453,1455,1457,1459,1461,1463],{"class":160,"line":182},[158,1454,550],{"class":171},[158,1456,536],{"class":232},[158,1458,1446],{"class":175},[158,1460,807],{"class":232},[158,1462,816],{"class":171},[158,1464,612],{"class":232},[158,1466,1467],{"class":160,"line":189},[158,1468,558],{"class":232},[158,1470,1471,1473,1475],{"class":160,"line":195},[158,1472,621],{"class":232},[158,1474,488],{"class":487},[158,1476,503],{"class":232},[158,1478,1479],{"class":160,"line":323},[158,1480,186],{"emptyLinePlaceholder":185},[158,1482,1483,1485,1487],{"class":160,"line":335},[158,1484,484],{"class":232},[158,1486,636],{"class":487},[158,1488,503],{"class":232},[158,1490,1491,1493,1496,1498,1500,1503,1505,1507,1510],{"class":160,"line":346},[158,1492,643],{"class":232},[158,1494,1495],{"class":487},"div",[158,1497,649],{"class":171},[158,1499,497],{"class":232},[158,1501,1502],{"class":175},"\"project in projects?.items\"",[158,1504,657],{"class":171},[158,1506,497],{"class":232},[158,1508,1509],{"class":175},"\"project.title\"",[158,1511,503],{"class":232},[158,1513,1514,1516,1519,1522,1524],{"class":160,"line":357},[158,1515,669],{"class":232},[158,1517,1518],{"class":487},"h3",[158,1520,1521],{"class":232},">{{ project.title }}\u003C\u002F",[158,1523,1518],{"class":487},[158,1525,503],{"class":232},[158,1527,1528,1530,1532,1535,1537],{"class":160,"line":369},[158,1529,669],{"class":232},[158,1531,15],{"class":487},[158,1533,1534],{"class":232},">{{ project.description }}\u003C\u002F",[158,1536,15],{"class":487},[158,1538,503],{"class":232},[158,1540,1541,1543,1545],{"class":160,"line":379},[158,1542,719],{"class":232},[158,1544,1495],{"class":487},[158,1546,503],{"class":232},[158,1548,1549,1551,1553],{"class":160,"line":389},[158,1550,621],{"class":232},[158,1552,636],{"class":487},[158,1554,503],{"class":232},[88,1556],{},[10,1558,1560],{"id":1559},"mdc-markdown-component-syntax","MDC — Markdown Component Syntax",[15,1562,1563],{},"Ini fitur yang paling bikin saya tertarik: kita bisa menyisipkan komponen Vue langsung di dalam file Markdown.",[15,1565,1566],{},[67,1567,1568],{},"Komponen inline:",[149,1570,1574],{"className":1571,"code":1572,"language":1573,"meta":154,"style":154},"language-md shiki shiki-themes github-light github-dark",":badge[NEW]{type=\"success\"}\n","md",[18,1575,1576],{"__ignoreMap":154},[158,1577,1578,1581,1585],{"class":160,"line":161},[158,1579,1580],{"class":232},":badge[",[158,1582,1584],{"class":1583},"svl0z","NEW",[158,1586,1587],{"class":232},"]{type=\"success\"}\n",[15,1589,1590],{},[67,1591,1592],{},"Komponen block:",[149,1594,1596],{"className":1571,"code":1595,"language":1573,"meta":154,"style":154},"::callout{type=\"warning\"}\nHati-hati, ini adalah peringatan penting!\n::\n",[18,1597,1598,1603,1608],{"__ignoreMap":154},[158,1599,1600],{"class":160,"line":161},[158,1601,1602],{"class":232},"::callout{type=\"warning\"}\n",[158,1604,1605],{"class":160,"line":168},[158,1606,1607],{"class":232},"Hati-hati, ini adalah peringatan penting!\n",[158,1609,1610],{"class":160,"line":182},[158,1611,1612],{"class":232},"::\n",[15,1614,1615],{},[67,1616,1617],{},"Komponen dengan slot:",[149,1619,1621],{"className":1571,"code":1620,"language":1573,"meta":154,"style":154},"::card\n---\ntitle: Judul Card\ndescription: Deskripsi singkat\n---\nKonten di dalam card bisa berisi **Markdown** biasa.\n::\n",[18,1622,1623,1628,1634,1639,1644,1648,1660],{"__ignoreMap":154},[158,1624,1625],{"class":160,"line":161},[158,1626,1627],{"class":232},"::card\n",[158,1629,1630],{"class":160,"line":168},[158,1631,1633],{"class":1632},"sq-ep","---\n",[158,1635,1636],{"class":160,"line":182},[158,1637,1638],{"class":232},"title: Judul Card\n",[158,1640,1641],{"class":160,"line":189},[158,1642,1643],{"class":232},"description: Deskripsi singkat\n",[158,1645,1646],{"class":160,"line":195},[158,1647,1633],{"class":1632},[158,1649,1650,1653,1657],{"class":160,"line":323},[158,1651,1652],{"class":232},"Konten di dalam card bisa berisi ",[158,1654,1656],{"class":1655},"sIZ1i","**Markdown**",[158,1658,1659],{"class":232}," biasa.\n",[158,1661,1662],{"class":160,"line":335},[158,1663,1612],{"class":232},[15,1665,1666,1667,1670,1671,1674],{},"Supaya komponen MDC bisa dipakai, kita letakkan komponen Vue di ",[18,1668,1669],{},"components\u002Fcontent\u002F"," — Nuxt Content otomatis ",[23,1672,1673],{},"register"," semua komponen di sana sebagai komponen global yang bisa dipakai di Markdown.",[149,1676,1678],{"className":475,"code":1677,"language":477,"meta":154,"style":154},"\u003C!-- components\u002Fcontent\u002FCallout.vue -->\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  type?: 'info' | 'warning' | 'error' | 'success'\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"`callout callout-${type ?? 'info'}`\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[18,1679,1680,1685,1701,1709,1736,1741,1749,1753,1761,1777,1790,1798],{"__ignoreMap":154},[158,1681,1682],{"class":160,"line":161},[158,1683,1684],{"class":164},"\u003C!-- components\u002Fcontent\u002FCallout.vue -->\n",[158,1686,1687,1689,1691,1693,1695,1697,1699],{"class":160,"line":168},[158,1688,484],{"class":232},[158,1690,488],{"class":487},[158,1692,491],{"class":171},[158,1694,494],{"class":171},[158,1696,497],{"class":232},[158,1698,500],{"class":175},[158,1700,503],{"class":232},[158,1702,1703,1706],{"class":160,"line":182},[158,1704,1705],{"class":171},"defineProps",[158,1707,1708],{"class":232},"\u003C{\n",[158,1710,1711,1714,1717,1720,1723,1726,1728,1731,1733],{"class":160,"line":189},[158,1712,1713],{"class":514},"  type",[158,1715,1716],{"class":222},"?:",[158,1718,1719],{"class":175}," 'info'",[158,1721,1722],{"class":222}," |",[158,1724,1725],{"class":175}," 'warning'",[158,1727,1722],{"class":222},[158,1729,1730],{"class":175}," 'error'",[158,1732,1722],{"class":222},[158,1734,1735],{"class":175}," 'success'\n",[158,1737,1738],{"class":160,"line":195},[158,1739,1740],{"class":232},"}>()\n",[158,1742,1743,1745,1747],{"class":160,"line":323},[158,1744,621],{"class":232},[158,1746,488],{"class":487},[158,1748,503],{"class":232},[158,1750,1751],{"class":160,"line":335},[158,1752,186],{"emptyLinePlaceholder":185},[158,1754,1755,1757,1759],{"class":160,"line":346},[158,1756,484],{"class":232},[158,1758,636],{"class":487},[158,1760,503],{"class":232},[158,1762,1763,1765,1767,1770,1772,1775],{"class":160,"line":357},[158,1764,643],{"class":232},[158,1766,1495],{"class":487},[158,1768,1769],{"class":171}," :class",[158,1771,497],{"class":232},[158,1773,1774],{"class":175},"\"`callout callout-${type ?? 'info'}`\"",[158,1776,503],{"class":232},[158,1778,1779,1781,1784,1788],{"class":160,"line":369},[158,1780,669],{"class":232},[158,1782,1783],{"class":487},"slot",[158,1785,1787],{"class":1786},"s7hpK"," \u002F",[158,1789,503],{"class":232},[158,1791,1792,1794,1796],{"class":160,"line":379},[158,1793,719],{"class":232},[158,1795,1495],{"class":487},[158,1797,503],{"class":232},[158,1799,1800,1802,1804],{"class":160,"line":389},[158,1801,621],{"class":232},[158,1803,636],{"class":487},[158,1805,503],{"class":232},[88,1807],{},[10,1809,1811],{"id":1810},"query-layaknya-database","Query Layaknya Database",[15,1813,1814],{},"Ini bagian yang saya paling suka. API query Nuxt Content v3 terasa seperti ORM ringan:",[149,1816,1818],{"className":213,"code":1817,"language":215,"meta":154,"style":154},"\u002F\u002F Filter berdasarkan tag\nconst posts = await queryCollection('blog')\n  .where('tags', 'LIKE', '%Nuxt%')\n  .order('date', 'DESC')\n  .limit(5)\n  .all()\n\n\u002F\u002F Pencarian full-text\nconst results = await queryCollection('blog')\n  .where('body', 'LIKE', `%${keyword}%`)\n  .all()\n\n\u002F\u002F Ambil hanya field tertentu (projection)\nconst titles = await queryCollection('blog')\n  .select('title', 'date', 'path')\n  .order('date', 'DESC')\n  .all()\n",[18,1819,1820,1825,1845,1869,1885,1899,1907,1911,1916,1935,1963,1971,1975,1980,1999,2022,2038],{"__ignoreMap":154},[158,1821,1822],{"class":160,"line":161},[158,1823,1824],{"class":164},"\u002F\u002F Filter berdasarkan tag\n",[158,1826,1827,1829,1832,1834,1836,1839,1841,1843],{"class":160,"line":168},[158,1828,508],{"class":222},[158,1830,1831],{"class":521}," posts",[158,1833,765],{"class":222},[158,1835,530],{"class":222},[158,1837,1838],{"class":171}," queryCollection",[158,1840,536],{"class":232},[158,1842,555],{"class":175},[158,1844,558],{"class":232},[158,1846,1847,1850,1852,1854,1857,1859,1862,1864,1867],{"class":160,"line":182},[158,1848,1849],{"class":232},"  .",[158,1851,566],{"class":171},[158,1853,536],{"class":232},[158,1855,1856],{"class":175},"'tags'",[158,1858,78],{"class":232},[158,1860,1861],{"class":175},"'LIKE'",[158,1863,78],{"class":232},[158,1865,1866],{"class":175},"'%Nuxt%'",[158,1868,558],{"class":232},[158,1870,1871,1873,1875,1877,1879,1881,1883],{"class":160,"line":189},[158,1872,1849],{"class":232},[158,1874,590],{"class":171},[158,1876,536],{"class":232},[158,1878,595],{"class":175},[158,1880,78],{"class":232},[158,1882,600],{"class":175},[158,1884,558],{"class":232},[158,1886,1887,1889,1892,1894,1897],{"class":160,"line":195},[158,1888,1849],{"class":232},[158,1890,1891],{"class":171},"limit",[158,1893,536],{"class":232},[158,1895,1896],{"class":521},"5",[158,1898,558],{"class":232},[158,1900,1901,1903,1905],{"class":160,"line":323},[158,1902,1849],{"class":232},[158,1904,609],{"class":171},[158,1906,612],{"class":232},[158,1908,1909],{"class":160,"line":335},[158,1910,186],{"emptyLinePlaceholder":185},[158,1912,1913],{"class":160,"line":346},[158,1914,1915],{"class":164},"\u002F\u002F Pencarian full-text\n",[158,1917,1918,1920,1923,1925,1927,1929,1931,1933],{"class":160,"line":357},[158,1919,508],{"class":222},[158,1921,1922],{"class":521}," results",[158,1924,765],{"class":222},[158,1926,530],{"class":222},[158,1928,1838],{"class":171},[158,1930,536],{"class":232},[158,1932,555],{"class":175},[158,1934,558],{"class":232},[158,1936,1937,1939,1941,1943,1946,1948,1950,1952,1955,1958,1961],{"class":160,"line":369},[158,1938,1849],{"class":232},[158,1940,566],{"class":171},[158,1942,536],{"class":232},[158,1944,1945],{"class":175},"'body'",[158,1947,78],{"class":232},[158,1949,1861],{"class":175},[158,1951,78],{"class":232},[158,1953,1954],{"class":175},"`%${",[158,1956,1957],{"class":232},"keyword",[158,1959,1960],{"class":175},"}%`",[158,1962,558],{"class":232},[158,1964,1965,1967,1969],{"class":160,"line":379},[158,1966,1849],{"class":232},[158,1968,609],{"class":171},[158,1970,612],{"class":232},[158,1972,1973],{"class":160,"line":389},[158,1974,186],{"emptyLinePlaceholder":185},[158,1976,1977],{"class":160,"line":411},[158,1978,1979],{"class":164},"\u002F\u002F Ambil hanya field tertentu (projection)\n",[158,1981,1982,1984,1987,1989,1991,1993,1995,1997],{"class":160,"line":417},[158,1983,508],{"class":222},[158,1985,1986],{"class":521}," titles",[158,1988,765],{"class":222},[158,1990,530],{"class":222},[158,1992,1838],{"class":171},[158,1994,536],{"class":232},[158,1996,555],{"class":175},[158,1998,558],{"class":232},[158,2000,2001,2003,2006,2008,2011,2013,2015,2017,2020],{"class":160,"line":423},[158,2002,1849],{"class":232},[158,2004,2005],{"class":171},"select",[158,2007,536],{"class":232},[158,2009,2010],{"class":175},"'title'",[158,2012,78],{"class":232},[158,2014,595],{"class":175},[158,2016,78],{"class":232},[158,2018,2019],{"class":175},"'path'",[158,2021,558],{"class":232},[158,2023,2024,2026,2028,2030,2032,2034,2036],{"class":160,"line":429},[158,2025,1849],{"class":232},[158,2027,590],{"class":171},[158,2029,536],{"class":232},[158,2031,595],{"class":175},[158,2033,78],{"class":232},[158,2035,600],{"class":175},[158,2037,558],{"class":232},[158,2039,2041,2043,2045],{"class":160,"line":2040},17,[158,2042,1849],{"class":232},[158,2044,609],{"class":171},[158,2046,612],{"class":232},[15,2048,2049],{},"Di bawahnya, ini semua diterjemahkan ke SQL dan dieksekusi oleh SQLite. Performanya cepat bahkan untuk ratusan file konten.",[88,2051],{},[10,2053,2055],{"id":2054},"daftar-isi-otomatis","Daftar Isi Otomatis",[15,2057,2058,2060,2061,2064],{},[18,2059,873],{}," juga menyertakan ",[23,2062,2063],{},"table of contents"," yang dibangun otomatis dari heading di Markdown:",[149,2066,2068],{"className":475,"code":2067,"language":477,"meta":154,"style":154},"\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst { data: post } = await useAsyncData(route.path, () =>\n  queryCollection('blog').path(route.path).first()\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"layout\">\n    \u003Caside>\n      \u003Cul>\n        \u003Cli v-for=\"link in post?.body?.toc?.links\" :key=\"link.id\">\n          \u003Ca :href=\"`#${link.id}`\">{{ link.text }}\u003C\u002Fa>\n          \u003Cul v-if=\"link.children\">\n            \u003Cli v-for=\"child in link.children\" :key=\"child.id\">\n              \u003Ca :href=\"`#${child.id}`\">{{ child.text }}\u003C\u002Fa>\n            \u003C\u002Fli>\n          \u003C\u002Ful>\n        \u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Faside>\n\n    \u003Cmain>\n      \u003CContentRenderer :value=\"post\" \u002F>\n    \u003C\u002Fmain>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[18,2069,2070,2086,2098,2122,2140,2144,2152,2156,2164,2180,2189,2197,2219,2241,2256,2279,2300,2309,2319,2328,2337,2346,2351,2361,2376,2385,2394],{"__ignoreMap":154},[158,2071,2072,2074,2076,2078,2080,2082,2084],{"class":160,"line":161},[158,2073,484],{"class":232},[158,2075,488],{"class":487},[158,2077,491],{"class":171},[158,2079,494],{"class":171},[158,2081,497],{"class":232},[158,2083,500],{"class":175},[158,2085,503],{"class":232},[158,2087,2088,2090,2092,2094,2096],{"class":160,"line":168},[158,2089,508],{"class":222},[158,2091,762],{"class":521},[158,2093,765],{"class":222},[158,2095,768],{"class":171},[158,2097,612],{"class":232},[158,2099,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120],{"class":160,"line":182},[158,2101,508],{"class":222},[158,2103,511],{"class":232},[158,2105,515],{"class":514},[158,2107,518],{"class":232},[158,2109,783],{"class":521},[158,2111,525],{"class":232},[158,2113,497],{"class":222},[158,2115,530],{"class":222},[158,2117,533],{"class":171},[158,2119,794],{"class":232},[158,2121,545],{"class":222},[158,2123,2124,2126,2128,2130,2132,2134,2136,2138],{"class":160,"line":189},[158,2125,550],{"class":171},[158,2127,536],{"class":232},[158,2129,555],{"class":175},[158,2131,807],{"class":232},[158,2133,810],{"class":171},[158,2135,813],{"class":232},[158,2137,816],{"class":171},[158,2139,612],{"class":232},[158,2141,2142],{"class":160,"line":195},[158,2143,558],{"class":232},[158,2145,2146,2148,2150],{"class":160,"line":323},[158,2147,621],{"class":232},[158,2149,488],{"class":487},[158,2151,503],{"class":232},[158,2153,2154],{"class":160,"line":335},[158,2155,186],{"emptyLinePlaceholder":185},[158,2157,2158,2160,2162],{"class":160,"line":346},[158,2159,484],{"class":232},[158,2161,636],{"class":487},[158,2163,503],{"class":232},[158,2165,2166,2168,2170,2173,2175,2178],{"class":160,"line":357},[158,2167,643],{"class":232},[158,2169,1495],{"class":487},[158,2171,2172],{"class":171}," class",[158,2174,497],{"class":232},[158,2176,2177],{"class":175},"\"layout\"",[158,2179,503],{"class":232},[158,2181,2182,2184,2187],{"class":160,"line":369},[158,2183,669],{"class":232},[158,2185,2186],{"class":487},"aside",[158,2188,503],{"class":232},[158,2190,2191,2193,2195],{"class":160,"line":379},[158,2192,1024],{"class":232},[158,2194,1047],{"class":487},[158,2196,503],{"class":232},[158,2198,2199,2201,2203,2205,2207,2210,2212,2214,2217],{"class":160,"line":389},[158,2200,1062],{"class":232},[158,2202,101],{"class":487},[158,2204,649],{"class":171},[158,2206,497],{"class":232},[158,2208,2209],{"class":175},"\"link in post?.body?.toc?.links\"",[158,2211,657],{"class":171},[158,2213,497],{"class":232},[158,2215,2216],{"class":175},"\"link.id\"",[158,2218,503],{"class":232},[158,2220,2221,2223,2226,2229,2231,2234,2237,2239],{"class":160,"line":411},[158,2222,1078],{"class":232},[158,2224,2225],{"class":487},"a",[158,2227,2228],{"class":171}," :href",[158,2230,497],{"class":232},[158,2232,2233],{"class":175},"\"`#${link.id}`\"",[158,2235,2236],{"class":232},">{{ link.text }}\u003C\u002F",[158,2238,2225],{"class":487},[158,2240,503],{"class":232},[158,2242,2243,2245,2247,2249,2251,2254],{"class":160,"line":417},[158,2244,1078],{"class":232},[158,2246,1047],{"class":487},[158,2248,1050],{"class":171},[158,2250,497],{"class":232},[158,2252,2253],{"class":175},"\"link.children\"",[158,2255,503],{"class":232},[158,2257,2258,2261,2263,2265,2267,2270,2272,2274,2277],{"class":160,"line":423},[158,2259,2260],{"class":232},"            \u003C",[158,2262,101],{"class":487},[158,2264,649],{"class":171},[158,2266,497],{"class":232},[158,2268,2269],{"class":175},"\"child in link.children\"",[158,2271,657],{"class":171},[158,2273,497],{"class":232},[158,2275,2276],{"class":175},"\"child.id\"",[158,2278,503],{"class":232},[158,2280,2281,2284,2286,2288,2290,2293,2296,2298],{"class":160,"line":429},[158,2282,2283],{"class":232},"              \u003C",[158,2285,2225],{"class":487},[158,2287,2228],{"class":171},[158,2289,497],{"class":232},[158,2291,2292],{"class":175},"\"`#${child.id}`\"",[158,2294,2295],{"class":232},">{{ child.text }}\u003C\u002F",[158,2297,2225],{"class":487},[158,2299,503],{"class":232},[158,2301,2302,2305,2307],{"class":160,"line":2040},[158,2303,2304],{"class":232},"            \u003C\u002F",[158,2306,101],{"class":487},[158,2308,503],{"class":232},[158,2310,2312,2315,2317],{"class":160,"line":2311},18,[158,2313,2314],{"class":232},"          \u003C\u002F",[158,2316,1047],{"class":487},[158,2318,503],{"class":232},[158,2320,2322,2324,2326],{"class":160,"line":2321},19,[158,2323,1099],{"class":232},[158,2325,101],{"class":487},[158,2327,503],{"class":232},[158,2329,2331,2333,2335],{"class":160,"line":2330},20,[158,2332,1108],{"class":232},[158,2334,1047],{"class":487},[158,2336,503],{"class":232},[158,2338,2340,2342,2344],{"class":160,"line":2339},21,[158,2341,1117],{"class":232},[158,2343,2186],{"class":487},[158,2345,503],{"class":232},[158,2347,2349],{"class":160,"line":2348},22,[158,2350,186],{"emptyLinePlaceholder":185},[158,2352,2354,2356,2359],{"class":160,"line":2353},23,[158,2355,669],{"class":232},[158,2357,2358],{"class":487},"main",[158,2360,503],{"class":232},[158,2362,2364,2366,2368,2370,2372,2374],{"class":160,"line":2363},24,[158,2365,1024],{"class":232},[158,2367,849],{"class":487},[158,2369,852],{"class":171},[158,2371,497],{"class":232},[158,2373,857],{"class":175},[158,2375,860],{"class":232},[158,2377,2379,2381,2383],{"class":160,"line":2378},25,[158,2380,1117],{"class":232},[158,2382,2358],{"class":487},[158,2384,503],{"class":232},[158,2386,2388,2390,2392],{"class":160,"line":2387},26,[158,2389,719],{"class":232},[158,2391,1495],{"class":487},[158,2393,503],{"class":232},[158,2395,2397,2399,2401],{"class":160,"line":2396},27,[158,2398,621],{"class":232},[158,2400,636],{"class":487},[158,2402,503],{"class":232},[15,2404,2405,2406,2409,2410,2413],{},"Heading ",[18,2407,2408],{},"##"," menjadi level pertama, ",[18,2411,2412],{},"###"," menjadi child-nya. Semua otomatis.",[88,2415],{},[10,2417,2419],{"id":2418},"hot-reload-di-development","Hot Reload di Development",[15,2421,2422,2423,2426,2427,2429,2430,2433,2434,2437,2438,2441],{},"Saat ",[23,2424,2425],{},"development",", setiap perubahan pada file di folder ",[18,2428,29],{}," langsung ter-",[23,2431,2432],{},"reflect"," di browser tanpa perlu ",[23,2435,2436],{},"refresh"," manual. Ini karena Nuxt Content menggunakan ",[23,2439,2440],{},"file watcher"," yang terintegrasi dengan Vite HMR.",[62,2443,2444],{},[15,2445,2446,2448,2449,2452,2453,2456],{},[67,2447,69],{}," Di Nuxt Content v3, ",[23,2450,2451],{},"hot reload"," untuk konten bahkan lebih cepat dari v2 karena perubahan hanya me-",[23,2454,2455],{},"re-index"," file yang berubah, bukan semua file sekaligus. Ini terasa jelas saat project punya ratusan artikel.",[88,2458],{},[10,2460,2462],{"id":2461},"kapan-tidak-pakai-nuxt-content","Kapan Tidak Pakai Nuxt Content",[15,2464,2465,2466,2469,2470,2473,2474,2477],{},"Nuxt Content cocok untuk konten yang ",[23,2467,2468],{},"owner","-nya developer atau tim teknis yang nyaman dengan Git dan Markdown. Tapi kalau ",[23,2471,2472],{},"stakeholder"," kamu adalah content editor non-teknis yang butuh UI visual untuk nulis, lebih baik tetap pakai ",[23,2475,2476],{},"headless CMS"," seperti Sanity.io atau Directus — dan konsumsi kontennya lewat API biasa, bukan Nuxt Content.",[15,2479,2480,2481,2484],{},"Nuxt Content bukan pengganti CMS. Ia adalah pilihan tepat kalau kamu mau ",[23,2482,2483],{},"control penuh"," atas konten tanpa ketergantungan layanan eksternal.",[88,2486],{},[10,2488,2490],{"id":2489},"penutup","Penutup",[15,2492,2493,2494,2497,2498,2500,2501,2504,2505,2508,2509,2512,2513,2515],{},"Nuxt Content mengubah cara saya melihat ",[23,2495,2496],{},"content management",". Tidak ada lagi ",[23,2499,140],{}," yang memakan waktu. Tidak ada lagi ketergantungan pada ",[23,2502,2503],{},"service"," eksternal yang bisa berubah ",[23,2506,2507],{},"pricing"," kapan saja. Konten ada di Git, di-",[23,2510,2511],{},"version control",", dan bisa di-",[23,2514,33],{}," dengan cara yang ekspresif.",[15,2517,2518],{},"Kalau kamu sudah pakai Nuxt dan butuh blog, dokumentasi, atau apapun yang berbasis konten — Nuxt Content adalah pilihan pertama yang layak dicoba.",[10,2520,2522],{"id":2521},"referensi","Referensi",[15,2524,2525,2531,2532,2531,2537,2531,2542,2547],{},[2225,2526,2530],{"href":2527,"rel":2528},"https:\u002F\u002Fcontent.nuxt.com\u002F",[2529],"nofollow","Nuxt Content Official Docs"," *\n",[2225,2533,2536],{"href":2534,"rel":2535},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax",[2529],"MDC Syntax",[2225,2538,2541],{"href":2539,"rel":2540},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Futils\u002Fquery-collection",[2529],"queryCollection API",[2225,2543,2546],{"href":2544,"rel":2545},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcontent",[2529],"Nuxt Content GitHub"," *",[15,2549,2550],{},"~ Ann",[2552,2553,2554],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .svl0z, html code.shiki .svl0z{--shiki-default:#032F62;--shiki-default-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline}html pre.shiki code .sq-ep, html code.shiki .sq-ep{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .sIZ1i, html code.shiki .sIZ1i{--shiki-default:#24292E;--shiki-default-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":154,"searchDepth":168,"depth":168,"links":2556},[2557,2558,2559,2560,2561,2562,2563,2564,2565,2566,2567,2568,2569,2570],{"id":12,"depth":168,"text":13},{"id":92,"depth":168,"text":93},{"id":146,"depth":168,"text":147},{"id":260,"depth":168,"text":261},{"id":464,"depth":168,"text":465},{"id":883,"depth":168,"text":884},{"id":1168,"depth":168,"text":1169},{"id":1559,"depth":168,"text":1560},{"id":1810,"depth":168,"text":1811},{"id":2054,"depth":168,"text":2055},{"id":2418,"depth":168,"text":2419},{"id":2461,"depth":168,"text":2462},{"id":2489,"depth":168,"text":2490},{"id":2521,"depth":168,"text":2522},"2026-06-07","Mengenal Nuxt Content secara mendalam — dari konsep, use case nyata, hingga query konten layaknya database",{},"\u002Fblog\u002Fnuxt-content",{"title":5,"description":2572},"blog\u002Fnuxt-content",[2578,2579,2580],"Nuxt","Vue","JavaScript","VTlUX77QCP5mpSnnjfIOnn6BdRp_OX2bXxzxPbD46mU",1781958637478]