[{"data":1,"prerenderedAt":600},["ShallowReactive",2],{"blog-post-/blog/nuxt-content-module/":3},{"id":4,"title":5,"body":6,"description":578,"extension":579,"meta":580,"navigation":399,"path":595,"seo":596,"sitemap":597,"stem":598,"__hash__":599},"content/blog/nuxt-content-module.md","Getting Started with Nuxt 3 Content Module",{"type":7,"value":8,"toc":569},"minimark",[9,13,17,22,51,55,62,125,129,140,144,333,341,539,543,562,565],[10,11,5],"h1",{"id":12},"getting-started-with-nuxt-3-content-module",[14,15,16],"p",{},"The Nuxt 3 Content module lets you manage and render static or dynamic content in your Nuxt apps. It's perfect for blogs, documentation sites, portfolios, and product catalogs.",[18,19,21],"h2",{"id":20},"installation","Installation",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","yarn add --dev @nuxt/content\n","bash","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45,48],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sBMFI","yarn",[33,42,44],{"class":43},"sfazB"," add",[33,46,47],{"class":43}," --dev",[33,49,50],{"class":43}," @nuxt/content\n",[18,52,54],{"id":53},"configuration","Configuration",[14,56,57,58,61],{},"Add to ",[30,59,60],{},"nuxt.config.ts",":",[23,63,67],{"className":64,"code":65,"language":66,"meta":28,"style":28},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxt/content'],\n})\n","ts",[30,68,69,90,116],{"__ignoreMap":28},[33,70,71,75,78,82,86],{"class":35,"line":36},[33,72,74],{"class":73},"s7zQu","export",[33,76,77],{"class":73}," default",[33,79,81],{"class":80},"s2Zo4"," defineNuxtConfig",[33,83,85],{"class":84},"sTEyZ","(",[33,87,89],{"class":88},"sMK4o","{\n",[33,91,93,97,99,102,105,108,110,113],{"class":35,"line":92},2,[33,94,96],{"class":95},"swJcz","  modules",[33,98,61],{"class":88},[33,100,101],{"class":84}," [",[33,103,104],{"class":88},"'",[33,106,107],{"class":43},"@nuxt/content",[33,109,104],{"class":88},[33,111,112],{"class":84},"]",[33,114,115],{"class":88},",\n",[33,117,119,122],{"class":35,"line":118},3,[33,120,121],{"class":88},"}",[33,123,124],{"class":84},")\n",[18,126,128],{"id":127},"create-content-files","Create Content Files",[14,130,131,132,135,136,139],{},"Create a ",[30,133,134],{},"content/blog/"," directory and add Markdown files (e.g., ",[30,137,138],{},"my-first-post.md",").",[18,141,143],{"id":142},"list-all-blog-posts-indexvue","List All Blog Posts (index.vue)",[23,145,149],{"className":146,"code":147,"language":148,"meta":28,"style":28},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CContentList path=\"/blog\" v-slot=\"{ list }\">\n      \u003Cdiv v-for=\"post in list\" :key=\"post._path\">\n        \u003Cp>{{ post.title }}\u003C/p>\n        \u003CNuxtLink :to=\"post._path\">Read more\u003C/NuxtLink>\n      \u003C/div>\n    \u003C/ContentList>\n  \u003C/div>\n\u003C/template>\n","vue",[30,150,151,162,172,209,243,264,294,304,314,324],{"__ignoreMap":28},[33,152,153,156,159],{"class":35,"line":36},[33,154,155],{"class":88},"\u003C",[33,157,158],{"class":95},"template",[33,160,161],{"class":88},">\n",[33,163,164,167,170],{"class":35,"line":92},[33,165,166],{"class":88},"  \u003C",[33,168,169],{"class":95},"div",[33,171,161],{"class":88},[33,173,174,177,180,184,187,190,193,195,198,200,202,205,207],{"class":35,"line":118},[33,175,176],{"class":88},"    \u003C",[33,178,179],{"class":95},"ContentList",[33,181,183],{"class":182},"spNyl"," path",[33,185,186],{"class":88},"=",[33,188,189],{"class":88},"\"",[33,191,192],{"class":43},"/blog",[33,194,189],{"class":88},[33,196,197],{"class":182}," v-slot",[33,199,186],{"class":88},[33,201,189],{"class":88},[33,203,204],{"class":43},"{ list }",[33,206,189],{"class":88},[33,208,161],{"class":88},[33,210,212,215,217,220,222,224,227,229,232,234,236,239,241],{"class":35,"line":211},4,[33,213,214],{"class":88},"      \u003C",[33,216,169],{"class":95},[33,218,219],{"class":182}," v-for",[33,221,186],{"class":88},[33,223,189],{"class":88},[33,225,226],{"class":43},"post in list",[33,228,189],{"class":88},[33,230,231],{"class":182}," :key",[33,233,186],{"class":88},[33,235,189],{"class":88},[33,237,238],{"class":43},"post._path",[33,240,189],{"class":88},[33,242,161],{"class":88},[33,244,246,249,251,254,257,260,262],{"class":35,"line":245},5,[33,247,248],{"class":88},"        \u003C",[33,250,14],{"class":95},[33,252,253],{"class":88},">",[33,255,256],{"class":84},"{{ post.title }}",[33,258,259],{"class":88},"\u003C/",[33,261,14],{"class":95},[33,263,161],{"class":88},[33,265,267,269,272,275,277,279,281,283,285,288,290,292],{"class":35,"line":266},6,[33,268,248],{"class":88},[33,270,271],{"class":95},"NuxtLink",[33,273,274],{"class":182}," :to",[33,276,186],{"class":88},[33,278,189],{"class":88},[33,280,238],{"class":43},[33,282,189],{"class":88},[33,284,253],{"class":88},[33,286,287],{"class":84},"Read more",[33,289,259],{"class":88},[33,291,271],{"class":95},[33,293,161],{"class":88},[33,295,297,300,302],{"class":35,"line":296},7,[33,298,299],{"class":88},"      \u003C/",[33,301,169],{"class":95},[33,303,161],{"class":88},[33,305,307,310,312],{"class":35,"line":306},8,[33,308,309],{"class":88},"    \u003C/",[33,311,179],{"class":95},[33,313,161],{"class":88},[33,315,317,320,322],{"class":35,"line":316},9,[33,318,319],{"class":88},"  \u003C/",[33,321,169],{"class":95},[33,323,161],{"class":88},[33,325,327,329,331],{"class":35,"line":326},10,[33,328,259],{"class":88},[33,330,158],{"class":95},[33,332,161],{"class":88},[18,334,336,337,340],{"id":335},"render-individual-posts-slugvue","Render Individual Posts (",[33,338,339],{},"...slug",".vue)",[23,342,344],{"className":146,"code":343,"language":148,"meta":28,"style":28},"\u003Ctemplate>\n  \u003CContentRenderer v-if=\"data\" :value=\"data\" />\n\u003C/template>\n\n\u003Cscript setup>\nconst { path } = useRoute()\nconst { data } = await useAsyncData(`content-${path}`, () => {\n  return queryContent().where({ _path: path }).findOne()\n})\n\u003C/script>\n",[30,345,346,354,387,395,401,413,435,483,525,531],{"__ignoreMap":28},[33,347,348,350,352],{"class":35,"line":36},[33,349,155],{"class":88},[33,351,158],{"class":95},[33,353,161],{"class":88},[33,355,356,358,361,364,366,368,371,373,376,378,380,382,384],{"class":35,"line":92},[33,357,166],{"class":88},[33,359,360],{"class":95},"ContentRenderer",[33,362,363],{"class":182}," v-if",[33,365,186],{"class":88},[33,367,189],{"class":88},[33,369,370],{"class":43},"data",[33,372,189],{"class":88},[33,374,375],{"class":182}," :value",[33,377,186],{"class":88},[33,379,189],{"class":88},[33,381,370],{"class":43},[33,383,189],{"class":88},[33,385,386],{"class":88}," />\n",[33,388,389,391,393],{"class":35,"line":118},[33,390,259],{"class":88},[33,392,158],{"class":95},[33,394,161],{"class":88},[33,396,397],{"class":35,"line":211},[33,398,400],{"emptyLinePlaceholder":399},true,"\n",[33,402,403,405,408,411],{"class":35,"line":245},[33,404,155],{"class":88},[33,406,407],{"class":95},"script",[33,409,410],{"class":182}," setup",[33,412,161],{"class":88},[33,414,415,418,421,424,426,429,432],{"class":35,"line":266},[33,416,417],{"class":182},"const",[33,419,420],{"class":88}," {",[33,422,423],{"class":84}," path ",[33,425,121],{"class":88},[33,427,428],{"class":88}," =",[33,430,431],{"class":80}," useRoute",[33,433,434],{"class":84},"()\n",[33,436,437,439,441,444,446,448,451,454,456,459,462,465,468,471,474,477,480],{"class":35,"line":296},[33,438,417],{"class":182},[33,440,420],{"class":88},[33,442,443],{"class":84}," data ",[33,445,121],{"class":88},[33,447,428],{"class":88},[33,449,450],{"class":73}," await",[33,452,453],{"class":80}," useAsyncData",[33,455,85],{"class":84},[33,457,458],{"class":88},"`",[33,460,461],{"class":43},"content-",[33,463,464],{"class":88},"${",[33,466,467],{"class":84},"path",[33,469,470],{"class":88},"}`",[33,472,473],{"class":88},",",[33,475,476],{"class":88}," ()",[33,478,479],{"class":182}," =>",[33,481,482],{"class":88}," {\n",[33,484,485,488,491,494,497,500,502,505,508,510,512,515,518,520,523],{"class":35,"line":306},[33,486,487],{"class":73},"  return",[33,489,490],{"class":80}," queryContent",[33,492,493],{"class":95},"()",[33,495,496],{"class":88},".",[33,498,499],{"class":80},"where",[33,501,85],{"class":95},[33,503,504],{"class":88},"{",[33,506,507],{"class":95}," _path",[33,509,61],{"class":88},[33,511,183],{"class":84},[33,513,514],{"class":88}," }",[33,516,517],{"class":95},")",[33,519,496],{"class":88},[33,521,522],{"class":80},"findOne",[33,524,434],{"class":95},[33,526,527,529],{"class":35,"line":316},[33,528,121],{"class":88},[33,530,124],{"class":84},[33,532,533,535,537],{"class":35,"line":326},[33,534,259],{"class":88},[33,536,407],{"class":95},[33,538,161],{"class":88},[18,540,542],{"id":541},"use-cases","Use Cases",[544,545,546,550,553,556,559],"ol",{},[547,548,549],"li",{},"Blogging platform",[547,551,552],{},"Documentation website",[547,554,555],{},"E-commerce product catalog",[547,557,558],{},"Portfolio or personal website",[547,560,561],{},"News or magazine site",[14,563,564],{},"By following these steps, you can effectively use the Nuxt 3 Content module to create dynamic, content-driven websites.",[566,567,568],"style",{},"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}",{"title":28,"searchDepth":92,"depth":92,"links":570},[571,572,573,574,575,577],{"id":20,"depth":92,"text":21},{"id":53,"depth":92,"text":54},{"id":127,"depth":92,"text":128},{"id":142,"depth":92,"text":143},{"id":335,"depth":92,"text":576},"Render Individual Posts (...slug.vue)",{"id":541,"depth":92,"text":542},"Learn how to use the Nuxt 3 Content module to build a dynamic blog. Covers installation, configuration, listing posts with ContentList, and rendering with ContentRenderer.","md",{"author":581,"date":582,"image":583,"category":584,"tags":585,"featured":594,"draft":594},"Aysegul Karadan","2023-07-19T10:00:00.000Z","/img/nuxtcontent/nuxt.png","Web Development",[586,587,148,588,589,590,591,592,593],"nuxt","nuxt-content","tutorial","nuxt3-content-module","how-to-use-nuxt-content","nuxt-content-blog","nuxt-content-setup","dynamic-blog-nuxt",false,"/blog/nuxt-content-module",{"title":5,"description":578},{"loc":595},"blog/nuxt-content-module","lpCri23TH9CXAcgfNTCpWVK9faM9hHGotorVzM2qrPE",1782986782614]