[{"data":1,"prerenderedAt":728},["ShallowReactive",2],{"blog-post-/nuxt-content-features":3},{"id":4,"title":5,"body":6,"date":716,"description":717,"draft":718,"extension":313,"image":719,"meta":720,"navigation":235,"path":721,"seo":722,"stem":723,"tags":724,"__hash__":727},"content_en/02.nuxt-content-features.md","Let's  try some of the nuxt content features",{"type":7,"value":8,"toc":708},"minimark",[9,14,25,28,33,44,58,64,73,76,80,83,86,128,141,145,152,154,306,309,331,334,340,343,347,356,366,485,496,500,517,693,697,704],[10,11,13],"h1",{"id":12},"what-is-nuxt-content","What is Nuxt Content?",[15,16,17,21,22],"p",{},[18,19,20],"strong",{},"Content"," is a Nuxt module that helps you to work with markdowns easily.\nNuxt Content reads the '/content' directory in your project, parses them to create\na powerful data layer for nuxt application! ",[23,24],"br",{},[15,26,27],{},"Let's see what it can do for us in more details 🚀",[29,30,32],"h2",{"id":31},"parse-markdowns","Parse Markdowns",[15,34,35,36,38,39,41,42],{},"Obivesly it can parse Markdown files to HTML tags! ",[23,37],{},"\n(this whole page you see is actually built upon this!) ",[23,40],{},"\nand because of this, you inherit all of the basic markdown capabilities.\nfor example: ",[23,43],{},[15,45,46,49,50,52,49,56],{},[18,47,48],{},"Bold text"," ",[23,51],{},[53,54,55],"em",{},"Italic text",[23,57],{},[59,60,61],"blockquote",{},[15,62,63],{},"Quoting text",[15,65,66],{},[67,68,72],"a",{"href":69,"rel":70},"https://content.nuxt.com/",[71],"nofollow","Link",[15,74,75],{},"and etc...",[29,77,79],{"id":78},"code-highlighting","Code Highlighting",[15,81,82],{},"you can render codeblocks in you Markdowns with beautiful syntax highliting.",[15,84,85],{},"Example:",[87,88,93],"pre",{"className":89,"code":90,"language":91,"meta":92,"style":92},"language-ts shiki shiki-themes github-dark","export default {\n itsAwesome: true\n}\n","ts","",[94,95,96,112,122],"code",{"__ignoreMap":92},[97,98,101,105,108],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"snl16","export",[97,106,107],{"class":103}," default",[97,109,111],{"class":110},"s95oV"," {\n",[97,113,115,118],{"class":99,"line":114},2,[97,116,117],{"class":110}," itsAwesome: ",[97,119,121],{"class":120},"sDLfK","true\n",[97,123,125],{"class":99,"line":124},3,[97,126,127],{"class":110},"}\n",[15,129,130,131,136,137,140],{},"this is made possible using ",[67,132,135],{"href":133,"rel":134},"https://github.com/shikijs/shiki",[71],"Shiki"," under the hood.\nit has so many themes that you can choose. that one i have used is called ",[18,138,139],{},"github-dark",".",[29,142,144],{"id":143},"vue-components-inside-markdowns","Vue Components Inside Markdowns",[15,146,147,148,151],{},"Create Vue Components inside ",[94,149,150],{},"/components/content",", then you can use them in markdowns!",[15,153,85],{},[87,155,159],{"className":156,"code":157,"language":158,"meta":92,"style":92},"language-vue shiki shiki-themes github-dark","\u003C!-- Alert.vue -->\n\u003Ctemplate>\n    \u003Cdiv role=\"alert\" class=\"rounded border-s-4 border-red-500 bg-red-50 p-4 dark:border-red-600 dark:bg-red-900\">\n        \u003Cstrong class=\"block font-medium text-red-800 dark:text-red-100\"> Alert \u003C/strong>\n\n        \u003Cp class=\"mt-2 text-sm text-red-700 dark:text-red-200\">\n            \u003Cslot>\u003C/slot> \n            \u003C!-- the slot tag is recieve our value from markdown -->\n        \u003C/p>\n    \u003C/div>\n\u003C/template>\n","vue",[94,160,161,167,179,208,230,237,253,270,276,286,296],{"__ignoreMap":92},[97,162,163],{"class":99,"line":100},[97,164,166],{"class":165},"sAwPA","\u003C!-- Alert.vue -->\n",[97,168,169,172,176],{"class":99,"line":114},[97,170,171],{"class":110},"\u003C",[97,173,175],{"class":174},"s4JwU","template",[97,177,178],{"class":110},">\n",[97,180,181,184,187,191,194,198,201,203,206],{"class":99,"line":124},[97,182,183],{"class":110},"    \u003C",[97,185,186],{"class":174},"div",[97,188,190],{"class":189},"svObZ"," role",[97,192,193],{"class":110},"=",[97,195,197],{"class":196},"sU2Wk","\"alert\"",[97,199,200],{"class":189}," class",[97,202,193],{"class":110},[97,204,205],{"class":196},"\"rounded border-s-4 border-red-500 bg-red-50 p-4 dark:border-red-600 dark:bg-red-900\"",[97,207,178],{"class":110},[97,209,211,214,216,218,220,223,226,228],{"class":99,"line":210},4,[97,212,213],{"class":110},"        \u003C",[97,215,18],{"class":174},[97,217,200],{"class":189},[97,219,193],{"class":110},[97,221,222],{"class":196},"\"block font-medium text-red-800 dark:text-red-100\"",[97,224,225],{"class":110},"> Alert \u003C/",[97,227,18],{"class":174},[97,229,178],{"class":110},[97,231,233],{"class":99,"line":232},5,[97,234,236],{"emptyLinePlaceholder":235},true,"\n",[97,238,240,242,244,246,248,251],{"class":99,"line":239},6,[97,241,213],{"class":110},[97,243,15],{"class":174},[97,245,200],{"class":189},[97,247,193],{"class":110},[97,249,250],{"class":196},"\"mt-2 text-sm text-red-700 dark:text-red-200\"",[97,252,178],{"class":110},[97,254,256,259,262,265,267],{"class":99,"line":255},7,[97,257,258],{"class":110},"            \u003C",[97,260,261],{"class":174},"slot",[97,263,264],{"class":110},">\u003C/",[97,266,261],{"class":174},[97,268,269],{"class":110},"> \n",[97,271,273],{"class":99,"line":272},8,[97,274,275],{"class":165},"            \u003C!-- the slot tag is recieve our value from markdown -->\n",[97,277,279,282,284],{"class":99,"line":278},9,[97,280,281],{"class":110},"        \u003C/",[97,283,15],{"class":174},[97,285,178],{"class":110},[97,287,289,292,294],{"class":99,"line":288},10,[97,290,291],{"class":110},"    \u003C/",[97,293,186],{"class":174},[97,295,178],{"class":110},[97,297,299,302,304],{"class":99,"line":298},11,[97,300,301],{"class":110},"\u003C/",[97,303,175],{"class":174},[97,305,178],{"class":110},[15,307,308],{},"then, use it in Markdowns like this:",[87,310,314],{"className":311,"code":312,"language":313,"meta":92,"style":92},"language-md shiki shiki-themes github-dark","::alert\nThe content of the card\n::\n","md",[94,315,316,321,326],{"__ignoreMap":92},[97,317,318],{"class":99,"line":100},[97,319,320],{"class":110},"::alert\n",[97,322,323],{"class":99,"line":114},[97,324,325],{"class":110},"The content of the card\n",[97,327,328],{"class":99,"line":124},[97,329,330],{"class":110},"::\n",[15,332,333],{},"Output:",[335,336,337],"alert",{},[15,338,339],{},"The content of the card",[15,341,342],{},"Cool!",[29,344,346],{"id":345},"query-on-your-data","Query on your data",[15,348,349,350,353,354],{},"Content module provides some Composables that can do various things for us. One of them is ",[94,351,352],{},"queryContent()",". ",[23,355],{},[15,357,358,359,362,363,365],{},"The ",[94,360,361],{},"queryContent"," composable provides methods for querying and fetching your contents. ",[23,364],{},"\nExample:",[87,367,369],{"className":156,"code":368,"language":158,"meta":92,"style":92},"\u003Cscript setup>\nconst { data } = await useAsyncData('home', () => queryContent('/').findOne())\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cpre>\n    {{ data }}\n  \u003C/pre>\n\u003C/template>\n",[94,370,371,383,434,442,446,454,463,468,477],{"__ignoreMap":92},[97,372,373,375,378,381],{"class":99,"line":100},[97,374,171],{"class":110},[97,376,377],{"class":174},"script",[97,379,380],{"class":189}," setup",[97,382,178],{"class":110},[97,384,385,388,391,394,397,399,402,405,408,411,414,417,420,422,425,428,431],{"class":99,"line":114},[97,386,387],{"class":103},"const",[97,389,390],{"class":110}," { ",[97,392,393],{"class":120},"data",[97,395,396],{"class":110}," } ",[97,398,193],{"class":103},[97,400,401],{"class":103}," await",[97,403,404],{"class":189}," useAsyncData",[97,406,407],{"class":110},"(",[97,409,410],{"class":196},"'home'",[97,412,413],{"class":110},", () ",[97,415,416],{"class":103},"=>",[97,418,419],{"class":189}," queryContent",[97,421,407],{"class":110},[97,423,424],{"class":196},"'/'",[97,426,427],{"class":110},").",[97,429,430],{"class":189},"findOne",[97,432,433],{"class":110},"())\n",[97,435,436,438,440],{"class":99,"line":124},[97,437,301],{"class":110},[97,439,377],{"class":174},[97,441,178],{"class":110},[97,443,444],{"class":99,"line":210},[97,445,236],{"emptyLinePlaceholder":235},[97,447,448,450,452],{"class":99,"line":232},[97,449,171],{"class":110},[97,451,175],{"class":174},[97,453,178],{"class":110},[97,455,456,459,461],{"class":99,"line":239},[97,457,458],{"class":110},"  \u003C",[97,460,87],{"class":174},[97,462,178],{"class":110},[97,464,465],{"class":99,"line":255},[97,466,467],{"class":110},"    {{ data }}\n",[97,469,470,473,475],{"class":99,"line":272},[97,471,472],{"class":110},"  \u003C/",[97,474,87],{"class":174},[97,476,178],{"class":110},[97,478,479,481,483],{"class":99,"line":278},[97,480,301],{"class":110},[97,482,175],{"class":174},[97,484,178],{"class":110},[15,486,487,488,491,492,495],{},"Here we use queryContent Composable to fetch single document that exists in ",[94,489,490],{},"/"," ( slash '/' means ",[94,493,494],{},"/content"," folder in this context)",[29,497,499],{"id":498},"render-markdowns-in-page","Render markdowns in page",[15,501,502,503,353,506,508,509,511,512,353,514,516],{},"Content module provides some Components that can do various things for us. One of them is ",[94,504,505],{},"\u003CContentRenderer>",[23,507],{},"\nThe ",[94,510,505],{}," component renders a document coming from a query with ",[94,513,352],{},[23,515],{},"\nWe pass the data to the component and it renders.\nLook at the example below:",[87,518,520],{"className":156,"code":519,"language":158,"meta":92,"style":92},"\u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cmain>\n    Parse & render markdown  fetched\n    \u003CContentRenderer :value=\"data\"> \n      \u003Ctemplate #empty>\n        \u003Cp>No content found.\u003C/p>\n      \u003C/template>\n    \u003C/ContentRenderer>\n  \u003C/main>\n\u003C/template>\n",[94,521,522,540,578,586,590,598,607,612,629,644,657,666,675,684],{"__ignoreMap":92},[97,523,524,526,528,530,533,535,538],{"class":99,"line":100},[97,525,171],{"class":110},[97,527,377],{"class":174},[97,529,380],{"class":189},[97,531,532],{"class":189}," lang",[97,534,193],{"class":110},[97,536,537],{"class":196},"\"ts\"",[97,539,178],{"class":110},[97,541,542,544,546,548,550,552,554,556,558,561,563,565,567,569,572,574,576],{"class":99,"line":114},[97,543,387],{"class":103},[97,545,390],{"class":110},[97,547,393],{"class":120},[97,549,396],{"class":110},[97,551,193],{"class":103},[97,553,401],{"class":103},[97,555,404],{"class":189},[97,557,407],{"class":110},[97,559,560],{"class":196},"'page-data'",[97,562,413],{"class":110},[97,564,416],{"class":103},[97,566,419],{"class":189},[97,568,407],{"class":110},[97,570,571],{"class":196},"'/hello'",[97,573,427],{"class":110},[97,575,430],{"class":189},[97,577,433],{"class":110},[97,579,580,582,584],{"class":99,"line":124},[97,581,301],{"class":110},[97,583,377],{"class":174},[97,585,178],{"class":110},[97,587,588],{"class":99,"line":210},[97,589,236],{"emptyLinePlaceholder":235},[97,591,592,594,596],{"class":99,"line":232},[97,593,171],{"class":110},[97,595,175],{"class":174},[97,597,178],{"class":110},[97,599,600,602,605],{"class":99,"line":239},[97,601,458],{"class":110},[97,603,604],{"class":174},"main",[97,606,178],{"class":110},[97,608,609],{"class":99,"line":255},[97,610,611],{"class":110},"    Parse & render markdown  fetched\n",[97,613,614,616,619,622,624,627],{"class":99,"line":272},[97,615,183],{"class":110},[97,617,618],{"class":174},"ContentRenderer",[97,620,621],{"class":189}," :value",[97,623,193],{"class":110},[97,625,626],{"class":196},"\"data\"",[97,628,269],{"class":110},[97,630,631,634,636,639,642],{"class":99,"line":278},[97,632,633],{"class":110},"      \u003C",[97,635,175],{"class":174},[97,637,638],{"class":110}," #",[97,640,641],{"class":189},"empty",[97,643,178],{"class":110},[97,645,646,648,650,653,655],{"class":99,"line":288},[97,647,213],{"class":110},[97,649,15],{"class":174},[97,651,652],{"class":110},">No content found.\u003C/",[97,654,15],{"class":174},[97,656,178],{"class":110},[97,658,659,662,664],{"class":99,"line":298},[97,660,661],{"class":110},"      \u003C/",[97,663,175],{"class":174},[97,665,178],{"class":110},[97,667,669,671,673],{"class":99,"line":668},12,[97,670,291],{"class":110},[97,672,618],{"class":174},[97,674,178],{"class":110},[97,676,678,680,682],{"class":99,"line":677},13,[97,679,472],{"class":110},[97,681,604],{"class":174},[97,683,178],{"class":110},[97,685,687,689,691],{"class":99,"line":686},14,[97,688,301],{"class":110},[97,690,175],{"class":174},[97,692,178],{"class":110},[29,694,696],{"id":695},"learn-more-about-nuxt-content","Learn more about Nuxt-Content",[15,698,699,700,140],{},"If you intrested, i suggest to take a look at their ",[67,701,703],{"href":69,"rel":702},[71],"documentation",[705,706,707],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":92,"searchDepth":114,"depth":114,"links":709},[710,711,712,713,714,715],{"id":31,"depth":114,"text":32},{"id":78,"depth":114,"text":79},{"id":143,"depth":114,"text":144},{"id":345,"depth":114,"text":346},{"id":498,"depth":114,"text":499},{"id":695,"depth":114,"text":696},"2023-09-05T00:00:00.000Z","Seeing nuxt content features in action",false,"/blog-images/cows.webp",{},"/nuxt-content-features",{"title":5,"description":717},"02.nuxt-content-features",[725,726],"nuxt-content","test3","K3e3CMDBujJYhznZR50xdJLBQWlY12drE-7ECHFxEsc",1772192624971]