[{"data":1,"prerenderedAt":1219},["ShallowReactive",2],{"blog:2023:rendering-content-with-nuxt3":3,"blogMore-Development":1205,"comments-rendering-content-with-nuxt3":1218},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"tags":12,"excerpt":15,"body":30,"_type":1196,"_id":1197,"_source":1198,"_file":1199,"_stem":1200,"_extension":1201,"url":1202,"wordCount":1203,"minutes":425,"commentCount":1204},"/blog/2023/rendering-content-with-nuxt3","2023",false,"en","Rendering content with Nuxt3","I've been a big fan of Nuxt2 and Nuxt3 is definitely a learning curve and I have to admit the documentation is a bit lacking - lots of small fragments and many different ways to do things.","2023-02-10T10:03:00-08:00","Development",[13,14],"Nuxt","webdev",{"type":16,"children":17},"root",[18,25],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":9},"text",{"type":19,"tag":20,"props":26,"children":27},{},[28],{"type":24,"value":29},"I basically wanted a simple example or page that looks at the slug, finds the markdown content for it and renders it unless it's missing in which case returns a 404. Oh, and I want to use Typescript.",{"type":16,"children":31,"toc":1183},[32,36,43,47,52,59,89,95,134,139,145,181,193,199,211,222,228,257,263,292,298,311,317,322,1128,1139,1145,1172,1177],{"type":19,"tag":20,"props":33,"children":34},{},[35],{"type":24,"value":9},{"type":19,"tag":37,"props":38,"children":40},"h2",{"id":39},"what-i-wanted",[41],{"type":24,"value":42},"What I wanted",{"type":19,"tag":20,"props":44,"children":45},{},[46],{"type":24,"value":29},{"type":19,"tag":20,"props":48,"children":49},{},[50],{"type":24,"value":51},"Simple right? Yeah, not so much if you want to use...",{"type":19,"tag":53,"props":54,"children":56},"h3",{"id":55},"the-composition-api",[57],{"type":24,"value":58},"The Composition API",{"type":19,"tag":20,"props":60,"children":61},{},[62,64,71,73,79,81,87],{"type":24,"value":63},"The composition API (that's the ",{"type":19,"tag":65,"props":66,"children":68},"code",{"className":67},[],[69],{"type":24,"value":70},"\u003Cscript setup>",{"type":24,"value":72}," bit) is the new hotness but means you have to use different functions and return different structures from Nuxt3. The other API is still around means a lot of the samples you find online aren't going to work. Things like ",{"type":19,"tag":65,"props":74,"children":76},{"className":75},[],[77],{"type":24,"value":78},"useAsyncData",{"type":24,"value":80}," instead of the old ",{"type":19,"tag":65,"props":82,"children":84},{"className":83},[],[85],{"type":24,"value":86},"asyncData",{"type":24,"value":88}," etc. It can be quite overwhelming when all the snippets are using a different mechanism that doesn't easily port.",{"type":19,"tag":53,"props":90,"children":92},{"id":91},"grabbing-the-slug",[93],{"type":24,"value":94},"Grabbing the slug",{"type":19,"tag":20,"props":96,"children":97},{},[98,100,106,108,117,119,124,126,132],{"type":24,"value":99},"You now need to ",{"type":19,"tag":65,"props":101,"children":103},{"className":102},[],[104],{"type":24,"value":105},"useRoute",{"type":24,"value":107}," to get the current route and then you can grab parameters off it. If you want to use Typescript then you can install ",{"type":19,"tag":109,"props":110,"children":114},"a",{"href":111,"rel":112},"https://www.npmjs.com/package/nuxt-typed-router",[113],"nofollow",[115],{"type":24,"value":116},"nuxt-typed-router",{"type":24,"value":118}," which will let you specify the route name into ",{"type":19,"tag":65,"props":120,"children":122},{"className":121},[],[123],{"type":24,"value":105},{"type":24,"value":125}," and as a result will strongly-type the parameters so ",{"type":19,"tag":65,"props":127,"children":129},{"className":128},[],[130],{"type":24,"value":131},"route.params.slug",{"type":24,"value":133}," autocompletes and compiles without warnings.",{"type":19,"tag":20,"props":135,"children":136},{},[137],{"type":24,"value":138},"Nice.",{"type":19,"tag":53,"props":140,"children":142},{"id":141},"querying-content",[143],{"type":24,"value":144},"Querying content",{"type":19,"tag":20,"props":146,"children":147},{},[148,150,156,158,164,166,172,174,179],{"type":24,"value":149},"The content system has changed quite a lot. The new Nuxt3 content does have a lot of stuff that just helps you now such as components that can go and get the page and render it for you a single step - and the markdown itself can specify the template. I'll dig more into that in the future but for now I just wanted to get the article so get used to things like ",{"type":19,"tag":65,"props":151,"children":153},{"className":152},[],[154],{"type":24,"value":155},"find()",{"type":24,"value":157}," and ",{"type":19,"tag":65,"props":159,"children":161},{"className":160},[],[162],{"type":24,"value":163},"findOne()",{"type":24,"value":165}," which you access through ",{"type":19,"tag":65,"props":167,"children":169},{"className":168},[],[170],{"type":24,"value":171},"queryContent",{"type":24,"value":173}," inside of ",{"type":19,"tag":65,"props":175,"children":177},{"className":176},[],[178],{"type":24,"value":78},{"type":24,"value":180},".",{"type":19,"tag":20,"props":182,"children":183},{},[184,186,191],{"type":24,"value":185},"Note that the first parameter into ",{"type":19,"tag":65,"props":187,"children":189},{"className":188},[],[190],{"type":24,"value":78},{"type":24,"value":192}," is effectively a cache key for rendering the page so don't let it collide with a component that's also rendering on that page.",{"type":19,"tag":53,"props":194,"children":196},{"id":195},"_404-when-not-found",[197],{"type":24,"value":198},"404 when not found",{"type":19,"tag":20,"props":200,"children":201},{},[202,204,209],{"type":24,"value":203},"None of the snippets I could find showed how to return a 404 with the composition ",{"type":19,"tag":65,"props":205,"children":207},{"className":206},[],[208],{"type":24,"value":78},{"type":24,"value":210}," pattern (the non-composition one returns an error object which makes life simpler).",{"type":19,"tag":20,"props":212,"children":213},{},[214,220],{"type":19,"tag":65,"props":215,"children":217},{"className":216},[],[218],{"type":24,"value":219},"createError",{"type":24,"value":221}," is your friend and just throw what it creates with the right statusCode should the content result be missing.",{"type":19,"tag":53,"props":223,"children":225},{"id":224},"output-front-matter-elements",[226],{"type":24,"value":227},"Output Front Matter elements",{"type":19,"tag":20,"props":229,"children":230},{},[231,233,239,241,247,249,255],{"type":24,"value":232},"This turned out to be an easy part - binding is pretty much the same. ",{"type":19,"tag":65,"props":234,"children":236},{"className":235},[],[237],{"type":24,"value":238},"{{ something }}",{"type":24,"value":240}," for inner-Text and ",{"type":19,"tag":65,"props":242,"children":244},{"className":243},[],[245],{"type":24,"value":246},"v-bind:attribute",{"type":24,"value":248}," for attributes. The only oddity here was having to ",{"type":19,"tag":65,"props":250,"children":252},{"className":251},[],[253],{"type":24,"value":254},"?.",{"type":24,"value":256}," the properties because Typescript believes they can be null.",{"type":19,"tag":53,"props":258,"children":260},{"id":259},"render-the-markdown",[261],{"type":24,"value":262},"Render the Markdown",{"type":19,"tag":20,"props":264,"children":265},{},[266,268,274,276,282,284,290],{"type":24,"value":267},"This isn't too tricky. There are a whole bunch of components now for the Nuxt Content package but these two work well if you want a level of control. ",{"type":19,"tag":65,"props":269,"children":271},{"className":270},[],[272],{"type":24,"value":273},"\u003CContentRender>",{"type":24,"value":275}," provides some of the basic infrastructure/setup while ContentRendererMarkdown actually does the Markdown conversion. I could have put the ",{"type":19,"tag":65,"props":277,"children":279},{"className":278},[],[280],{"type":24,"value":281},"\u003Ch1>",{"type":24,"value":283}," for example inside ",{"type":19,"tag":65,"props":285,"children":287},{"className":286},[],[288],{"type":24,"value":289},"\u003CContentRenderer>",{"type":24,"value":291}," but this looked fine.",{"type":19,"tag":53,"props":293,"children":295},{"id":294},"set-the-page-title-etc",[296],{"type":24,"value":297},"Set the page title etc.",{"type":19,"tag":20,"props":299,"children":300},{},[301,303,309],{"type":24,"value":302},"Finally we need to set the page title and the composition API ",{"type":19,"tag":65,"props":304,"children":306},{"className":305},[],[307],{"type":24,"value":308},"useHead",{"type":24,"value":310}," is what you're after here. We also set the page meta description from the post article Front Matter.",{"type":19,"tag":37,"props":312,"children":314},{"id":313},"show-me-the-code",[315],{"type":24,"value":316},"Show me the code",{"type":19,"tag":20,"props":318,"children":319},{},[320],{"type":24,"value":321},"Okay, here's the sample for displaying a single blog post using the composition API and all we talked about.",{"type":19,"tag":323,"props":324,"children":329},"pre",{"className":325,"code":326,"language":327,"meta":328,"style":328},"language-vue shiki shiki-themes everforest-light dracula","\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch1>{{ post?.title }}\u003C/h1>\n    \u003CContentRenderer :value=\"post\">\n      \u003CContentRendererMarkdown :value=\"post\" />\n    \u003C/ContentRenderer>\n  \u003C/article>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\n\nconst route = useRoute('blog-slug')\nconst { data: post } = await useAsyncData('post/' + route.params.slug, () => queryContent('blog', route.params.slug).findOne())\nif (post.value == null) throw createError({ statusCode: 404, message: 'Post not found' })\n\nuseHead({\n  title: post.value.title,\n  meta: [\n  {\n    hid: 'description',\n    name: 'description',\n    content: post.value.description,\n  },\n})\n\u003C/script>\n","vue","",[330],{"type":19,"tag":65,"props":331,"children":332},{"__ignoreMap":328},[333,356,374,423,472,515,532,549,565,575,620,628,678,825,917,925,938,973,991,1000,1031,1060,1094,1103,1112],{"type":19,"tag":334,"props":335,"children":338},"span",{"class":336,"line":337},"line",1,[339,345,351],{"type":19,"tag":334,"props":340,"children":342},{"style":341},"--shiki-default:#8DA101;--shiki-dark:#F8F8F2",[343],{"type":24,"value":344},"\u003C",{"type":19,"tag":334,"props":346,"children":348},{"style":347},"--shiki-default:#F57D26;--shiki-dark:#FF79C6",[349],{"type":24,"value":350},"template",{"type":19,"tag":334,"props":352,"children":353},{"style":341},[354],{"type":24,"value":355},">\n",{"type":19,"tag":334,"props":357,"children":359},{"class":336,"line":358},2,[360,365,370],{"type":19,"tag":334,"props":361,"children":362},{"style":341},[363],{"type":24,"value":364},"  \u003C",{"type":19,"tag":334,"props":366,"children":367},{"style":347},[368],{"type":24,"value":369},"article",{"type":19,"tag":334,"props":371,"children":372},{"style":341},[373],{"type":24,"value":355},{"type":19,"tag":334,"props":375,"children":377},{"class":336,"line":376},3,[378,383,388,393,399,405,410,415,419],{"type":19,"tag":334,"props":379,"children":380},{"style":341},[381],{"type":24,"value":382},"    \u003C",{"type":19,"tag":334,"props":384,"children":385},{"style":347},[386],{"type":24,"value":387},"h1",{"type":19,"tag":334,"props":389,"children":390},{"style":341},[391],{"type":24,"value":392},">",{"type":19,"tag":334,"props":394,"children":396},{"style":395},"--shiki-default:#5C6A72;--shiki-dark:#FF79C6",[397],{"type":24,"value":398},"{{",{"type":19,"tag":334,"props":400,"children":402},{"style":401},"--shiki-default:#5C6A72;--shiki-dark:#F8F8F2",[403],{"type":24,"value":404}," post?.title ",{"type":19,"tag":334,"props":406,"children":407},{"style":395},[408],{"type":24,"value":409},"}}",{"type":19,"tag":334,"props":411,"children":412},{"style":341},[413],{"type":24,"value":414},"\u003C/",{"type":19,"tag":334,"props":416,"children":417},{"style":347},[418],{"type":24,"value":387},{"type":19,"tag":334,"props":420,"children":421},{"style":341},[422],{"type":24,"value":355},{"type":19,"tag":334,"props":424,"children":426},{"class":336,"line":425},4,[427,431,436,441,447,453,459,464,468],{"type":19,"tag":334,"props":428,"children":429},{"style":341},[430],{"type":24,"value":382},{"type":19,"tag":334,"props":432,"children":433},{"style":347},[434],{"type":24,"value":435},"ContentRenderer",{"type":19,"tag":334,"props":437,"children":438},{"style":401},[439],{"type":24,"value":440}," :",{"type":19,"tag":334,"props":442,"children":444},{"style":443},"--shiki-default:#DFA000;--shiki-default-font-style:inherit;--shiki-dark:#50FA7B;--shiki-dark-font-style:italic",[445],{"type":24,"value":446},"value",{"type":19,"tag":334,"props":448,"children":450},{"style":449},"--shiki-default:#8DA101;--shiki-dark:#FF79C6",[451],{"type":24,"value":452},"=",{"type":19,"tag":334,"props":454,"children":456},{"style":455},"--shiki-default:#8DA101;--shiki-dark:#E9F284",[457],{"type":24,"value":458},"\"",{"type":19,"tag":334,"props":460,"children":461},{"style":401},[462],{"type":24,"value":463},"post",{"type":19,"tag":334,"props":465,"children":466},{"style":455},[467],{"type":24,"value":458},{"type":19,"tag":334,"props":469,"children":470},{"style":341},[471],{"type":24,"value":355},{"type":19,"tag":334,"props":473,"children":475},{"class":336,"line":474},5,[476,481,486,490,494,498,502,506,510],{"type":19,"tag":334,"props":477,"children":478},{"style":341},[479],{"type":24,"value":480},"      \u003C",{"type":19,"tag":334,"props":482,"children":483},{"style":347},[484],{"type":24,"value":485},"ContentRendererMarkdown",{"type":19,"tag":334,"props":487,"children":488},{"style":401},[489],{"type":24,"value":440},{"type":19,"tag":334,"props":491,"children":492},{"style":443},[493],{"type":24,"value":446},{"type":19,"tag":334,"props":495,"children":496},{"style":449},[497],{"type":24,"value":452},{"type":19,"tag":334,"props":499,"children":500},{"style":455},[501],{"type":24,"value":458},{"type":19,"tag":334,"props":503,"children":504},{"style":401},[505],{"type":24,"value":463},{"type":19,"tag":334,"props":507,"children":508},{"style":455},[509],{"type":24,"value":458},{"type":19,"tag":334,"props":511,"children":512},{"style":341},[513],{"type":24,"value":514}," />\n",{"type":19,"tag":334,"props":516,"children":518},{"class":336,"line":517},6,[519,524,528],{"type":19,"tag":334,"props":520,"children":521},{"style":341},[522],{"type":24,"value":523},"    \u003C/",{"type":19,"tag":334,"props":525,"children":526},{"style":347},[527],{"type":24,"value":435},{"type":19,"tag":334,"props":529,"children":530},{"style":341},[531],{"type":24,"value":355},{"type":19,"tag":334,"props":533,"children":535},{"class":336,"line":534},7,[536,541,545],{"type":19,"tag":334,"props":537,"children":538},{"style":341},[539],{"type":24,"value":540},"  \u003C/",{"type":19,"tag":334,"props":542,"children":543},{"style":347},[544],{"type":24,"value":369},{"type":19,"tag":334,"props":546,"children":547},{"style":341},[548],{"type":24,"value":355},{"type":19,"tag":334,"props":550,"children":552},{"class":336,"line":551},8,[553,557,561],{"type":19,"tag":334,"props":554,"children":555},{"style":341},[556],{"type":24,"value":414},{"type":19,"tag":334,"props":558,"children":559},{"style":347},[560],{"type":24,"value":350},{"type":19,"tag":334,"props":562,"children":563},{"style":341},[564],{"type":24,"value":355},{"type":19,"tag":334,"props":566,"children":568},{"class":336,"line":567},9,[569],{"type":19,"tag":334,"props":570,"children":572},{"emptyLinePlaceholder":571},true,[573],{"type":24,"value":574},"\n",{"type":19,"tag":334,"props":576,"children":578},{"class":336,"line":577},10,[579,583,588,593,598,602,606,612,616],{"type":19,"tag":334,"props":580,"children":581},{"style":341},[582],{"type":24,"value":344},{"type":19,"tag":334,"props":584,"children":585},{"style":347},[586],{"type":24,"value":587},"script",{"type":19,"tag":334,"props":589,"children":590},{"style":443},[591],{"type":24,"value":592}," setup",{"type":19,"tag":334,"props":594,"children":595},{"style":443},[596],{"type":24,"value":597}," lang",{"type":19,"tag":334,"props":599,"children":600},{"style":449},[601],{"type":24,"value":452},{"type":19,"tag":334,"props":603,"children":604},{"style":455},[605],{"type":24,"value":458},{"type":19,"tag":334,"props":607,"children":609},{"style":608},"--shiki-default:#8DA101;--shiki-dark:#F1FA8C",[610],{"type":24,"value":611},"ts",{"type":19,"tag":334,"props":613,"children":614},{"style":455},[615],{"type":24,"value":458},{"type":19,"tag":334,"props":617,"children":618},{"style":341},[619],{"type":24,"value":355},{"type":19,"tag":334,"props":621,"children":623},{"class":336,"line":622},11,[624],{"type":19,"tag":334,"props":625,"children":626},{"emptyLinePlaceholder":571},[627],{"type":24,"value":574},{"type":19,"tag":334,"props":629,"children":631},{"class":336,"line":630},12,[632,637,642,646,652,657,663,669,673],{"type":19,"tag":334,"props":633,"children":634},{"style":347},[635],{"type":24,"value":636},"const",{"type":19,"tag":334,"props":638,"children":639},{"style":401},[640],{"type":24,"value":641}," route ",{"type":19,"tag":334,"props":643,"children":644},{"style":347},[645],{"type":24,"value":452},{"type":19,"tag":334,"props":647,"children":649},{"style":648},"--shiki-default:#8DA101;--shiki-dark:#50FA7B",[650],{"type":24,"value":651}," useRoute",{"type":19,"tag":334,"props":653,"children":654},{"style":401},[655],{"type":24,"value":656},"(",{"type":19,"tag":334,"props":658,"children":660},{"style":659},"--shiki-default:#DFA000;--shiki-dark:#E9F284",[661],{"type":24,"value":662},"'",{"type":19,"tag":334,"props":664,"children":666},{"style":665},"--shiki-default:#DFA000;--shiki-dark:#F1FA8C",[667],{"type":24,"value":668},"blog-slug",{"type":19,"tag":334,"props":670,"children":671},{"style":659},[672],{"type":24,"value":662},{"type":19,"tag":334,"props":674,"children":675},{"style":401},[676],{"type":24,"value":677},")\n",{"type":19,"tag":334,"props":679,"children":681},{"class":336,"line":680},13,[682,686,691,696,701,705,711,716,720,724,729,733,738,743,748,753,757,762,767,772,776,780,785,789,794,798,802,806,811,815,820],{"type":19,"tag":334,"props":683,"children":684},{"style":347},[685],{"type":24,"value":636},{"type":19,"tag":334,"props":687,"children":688},{"style":401},[689],{"type":24,"value":690}," { data",{"type":19,"tag":334,"props":692,"children":693},{"style":395},[694],{"type":24,"value":695},":",{"type":19,"tag":334,"props":697,"children":698},{"style":401},[699],{"type":24,"value":700}," post } ",{"type":19,"tag":334,"props":702,"children":703},{"style":347},[704],{"type":24,"value":452},{"type":19,"tag":334,"props":706,"children":708},{"style":707},"--shiki-default:#F85552;--shiki-dark:#FF79C6",[709],{"type":24,"value":710}," await",{"type":19,"tag":334,"props":712,"children":713},{"style":648},[714],{"type":24,"value":715}," useAsyncData",{"type":19,"tag":334,"props":717,"children":718},{"style":401},[719],{"type":24,"value":656},{"type":19,"tag":334,"props":721,"children":722},{"style":659},[723],{"type":24,"value":662},{"type":19,"tag":334,"props":725,"children":726},{"style":665},[727],{"type":24,"value":728},"post/",{"type":19,"tag":334,"props":730,"children":731},{"style":659},[732],{"type":24,"value":662},{"type":19,"tag":334,"props":734,"children":735},{"style":347},[736],{"type":24,"value":737}," +",{"type":19,"tag":334,"props":739,"children":740},{"style":401},[741],{"type":24,"value":742}," route",{"type":19,"tag":334,"props":744,"children":746},{"style":745},"--shiki-default:#939F91;--shiki-dark:#F8F8F2",[747],{"type":24,"value":180},{"type":19,"tag":334,"props":749,"children":750},{"style":401},[751],{"type":24,"value":752},"params",{"type":19,"tag":334,"props":754,"children":755},{"style":745},[756],{"type":24,"value":180},{"type":19,"tag":334,"props":758,"children":759},{"style":401},[760],{"type":24,"value":761},"slug, () ",{"type":19,"tag":334,"props":763,"children":764},{"style":347},[765],{"type":24,"value":766},"=>",{"type":19,"tag":334,"props":768,"children":769},{"style":648},[770],{"type":24,"value":771}," queryContent",{"type":19,"tag":334,"props":773,"children":774},{"style":401},[775],{"type":24,"value":656},{"type":19,"tag":334,"props":777,"children":778},{"style":659},[779],{"type":24,"value":662},{"type":19,"tag":334,"props":781,"children":782},{"style":665},[783],{"type":24,"value":784},"blog",{"type":19,"tag":334,"props":786,"children":787},{"style":659},[788],{"type":24,"value":662},{"type":19,"tag":334,"props":790,"children":791},{"style":401},[792],{"type":24,"value":793},", route",{"type":19,"tag":334,"props":795,"children":796},{"style":745},[797],{"type":24,"value":180},{"type":19,"tag":334,"props":799,"children":800},{"style":401},[801],{"type":24,"value":752},{"type":19,"tag":334,"props":803,"children":804},{"style":745},[805],{"type":24,"value":180},{"type":19,"tag":334,"props":807,"children":808},{"style":401},[809],{"type":24,"value":810},"slug)",{"type":19,"tag":334,"props":812,"children":813},{"style":745},[814],{"type":24,"value":180},{"type":19,"tag":334,"props":816,"children":817},{"style":648},[818],{"type":24,"value":819},"findOne",{"type":19,"tag":334,"props":821,"children":822},{"style":401},[823],{"type":24,"value":824},"())\n",{"type":19,"tag":334,"props":826,"children":828},{"class":336,"line":827},14,[829,834,839,843,848,853,859,864,869,874,879,884,889,894,898,903,908,912],{"type":19,"tag":334,"props":830,"children":831},{"style":707},[832],{"type":24,"value":833},"if",{"type":19,"tag":334,"props":835,"children":836},{"style":401},[837],{"type":24,"value":838}," (post",{"type":19,"tag":334,"props":840,"children":841},{"style":745},[842],{"type":24,"value":180},{"type":19,"tag":334,"props":844,"children":845},{"style":401},[846],{"type":24,"value":847},"value ",{"type":19,"tag":334,"props":849,"children":850},{"style":347},[851],{"type":24,"value":852},"==",{"type":19,"tag":334,"props":854,"children":856},{"style":855},"--shiki-default:#DF69BA;--shiki-dark:#BD93F9",[857],{"type":24,"value":858}," null",{"type":19,"tag":334,"props":860,"children":861},{"style":401},[862],{"type":24,"value":863},") ",{"type":19,"tag":334,"props":865,"children":866},{"style":707},[867],{"type":24,"value":868},"throw",{"type":19,"tag":334,"props":870,"children":871},{"style":648},[872],{"type":24,"value":873}," createError",{"type":19,"tag":334,"props":875,"children":876},{"style":401},[877],{"type":24,"value":878},"({ statusCode",{"type":19,"tag":334,"props":880,"children":882},{"style":881},"--shiki-default:#939F91;--shiki-dark:#FF79C6",[883],{"type":24,"value":695},{"type":19,"tag":334,"props":885,"children":886},{"style":855},[887],{"type":24,"value":888}," 404",{"type":19,"tag":334,"props":890,"children":891},{"style":401},[892],{"type":24,"value":893},", message",{"type":19,"tag":334,"props":895,"children":896},{"style":881},[897],{"type":24,"value":695},{"type":19,"tag":334,"props":899,"children":900},{"style":659},[901],{"type":24,"value":902}," '",{"type":19,"tag":334,"props":904,"children":905},{"style":665},[906],{"type":24,"value":907},"Post not found",{"type":19,"tag":334,"props":909,"children":910},{"style":659},[911],{"type":24,"value":662},{"type":19,"tag":334,"props":913,"children":914},{"style":401},[915],{"type":24,"value":916}," })\n",{"type":19,"tag":334,"props":918,"children":920},{"class":336,"line":919},15,[921],{"type":19,"tag":334,"props":922,"children":923},{"emptyLinePlaceholder":571},[924],{"type":24,"value":574},{"type":19,"tag":334,"props":926,"children":928},{"class":336,"line":927},16,[929,933],{"type":19,"tag":334,"props":930,"children":931},{"style":648},[932],{"type":24,"value":308},{"type":19,"tag":334,"props":934,"children":935},{"style":401},[936],{"type":24,"value":937},"({\n",{"type":19,"tag":334,"props":939,"children":941},{"class":336,"line":940},17,[942,947,951,956,960,964,968],{"type":19,"tag":334,"props":943,"children":944},{"style":401},[945],{"type":24,"value":946},"  title",{"type":19,"tag":334,"props":948,"children":949},{"style":881},[950],{"type":24,"value":695},{"type":19,"tag":334,"props":952,"children":953},{"style":401},[954],{"type":24,"value":955}," post",{"type":19,"tag":334,"props":957,"children":958},{"style":745},[959],{"type":24,"value":180},{"type":19,"tag":334,"props":961,"children":962},{"style":401},[963],{"type":24,"value":446},{"type":19,"tag":334,"props":965,"children":966},{"style":745},[967],{"type":24,"value":180},{"type":19,"tag":334,"props":969,"children":970},{"style":401},[971],{"type":24,"value":972},"title,\n",{"type":19,"tag":334,"props":974,"children":976},{"class":336,"line":975},18,[977,982,986],{"type":19,"tag":334,"props":978,"children":979},{"style":401},[980],{"type":24,"value":981},"  meta",{"type":19,"tag":334,"props":983,"children":984},{"style":881},[985],{"type":24,"value":695},{"type":19,"tag":334,"props":987,"children":988},{"style":401},[989],{"type":24,"value":990}," [\n",{"type":19,"tag":334,"props":992,"children":994},{"class":336,"line":993},19,[995],{"type":19,"tag":334,"props":996,"children":997},{"style":401},[998],{"type":24,"value":999},"  {\n",{"type":19,"tag":334,"props":1001,"children":1003},{"class":336,"line":1002},20,[1004,1009,1013,1017,1022,1026],{"type":19,"tag":334,"props":1005,"children":1006},{"style":401},[1007],{"type":24,"value":1008},"    hid",{"type":19,"tag":334,"props":1010,"children":1011},{"style":881},[1012],{"type":24,"value":695},{"type":19,"tag":334,"props":1014,"children":1015},{"style":659},[1016],{"type":24,"value":902},{"type":19,"tag":334,"props":1018,"children":1019},{"style":665},[1020],{"type":24,"value":1021},"description",{"type":19,"tag":334,"props":1023,"children":1024},{"style":659},[1025],{"type":24,"value":662},{"type":19,"tag":334,"props":1027,"children":1028},{"style":401},[1029],{"type":24,"value":1030},",\n",{"type":19,"tag":334,"props":1032,"children":1034},{"class":336,"line":1033},21,[1035,1040,1044,1048,1052,1056],{"type":19,"tag":334,"props":1036,"children":1037},{"style":401},[1038],{"type":24,"value":1039},"    name",{"type":19,"tag":334,"props":1041,"children":1042},{"style":881},[1043],{"type":24,"value":695},{"type":19,"tag":334,"props":1045,"children":1046},{"style":659},[1047],{"type":24,"value":902},{"type":19,"tag":334,"props":1049,"children":1050},{"style":665},[1051],{"type":24,"value":1021},{"type":19,"tag":334,"props":1053,"children":1054},{"style":659},[1055],{"type":24,"value":662},{"type":19,"tag":334,"props":1057,"children":1058},{"style":401},[1059],{"type":24,"value":1030},{"type":19,"tag":334,"props":1061,"children":1063},{"class":336,"line":1062},22,[1064,1069,1073,1077,1081,1085,1089],{"type":19,"tag":334,"props":1065,"children":1066},{"style":401},[1067],{"type":24,"value":1068},"    content",{"type":19,"tag":334,"props":1070,"children":1071},{"style":881},[1072],{"type":24,"value":695},{"type":19,"tag":334,"props":1074,"children":1075},{"style":401},[1076],{"type":24,"value":955},{"type":19,"tag":334,"props":1078,"children":1079},{"style":745},[1080],{"type":24,"value":180},{"type":19,"tag":334,"props":1082,"children":1083},{"style":401},[1084],{"type":24,"value":446},{"type":19,"tag":334,"props":1086,"children":1087},{"style":745},[1088],{"type":24,"value":180},{"type":19,"tag":334,"props":1090,"children":1091},{"style":401},[1092],{"type":24,"value":1093},"description,\n",{"type":19,"tag":334,"props":1095,"children":1097},{"class":336,"line":1096},23,[1098],{"type":19,"tag":334,"props":1099,"children":1100},{"style":401},[1101],{"type":24,"value":1102},"  },\n",{"type":19,"tag":334,"props":1104,"children":1106},{"class":336,"line":1105},24,[1107],{"type":19,"tag":334,"props":1108,"children":1109},{"style":401},[1110],{"type":24,"value":1111},"})\n",{"type":19,"tag":334,"props":1113,"children":1115},{"class":336,"line":1114},25,[1116,1120,1124],{"type":19,"tag":334,"props":1117,"children":1118},{"style":347},[1119],{"type":24,"value":414},{"type":19,"tag":334,"props":1121,"children":1122},{"style":401},[1123],{"type":24,"value":587},{"type":19,"tag":334,"props":1125,"children":1126},{"style":347},[1127],{"type":24,"value":355},{"type":19,"tag":20,"props":1129,"children":1130},{},[1131,1133],{"type":24,"value":1132},"You would name this file ",{"type":19,"tag":65,"props":1134,"children":1136},{"className":1135},[],[1137],{"type":24,"value":1138},"/pages/blog/[slug].vue",{"type":19,"tag":37,"props":1140,"children":1142},{"id":1141},"if-youre-using-javascript",[1143],{"type":24,"value":1144},"If you're using JavaScript...",{"type":19,"tag":20,"props":1146,"children":1147},{},[1148,1150,1156,1158,1163,1165,1170],{"type":24,"value":1149},"If you don't want to use TypeScript remove ",{"type":19,"tag":65,"props":1151,"children":1153},{"className":1152},[],[1154],{"type":24,"value":1155},"lang=\"ts\"",{"type":24,"value":1157}," as well as the ",{"type":19,"tag":65,"props":1159,"children":1161},{"className":1160},[],[1162],{"type":24,"value":668},{"type":24,"value":1164}," from ",{"type":19,"tag":65,"props":1166,"children":1168},{"className":1167},[],[1169],{"type":24,"value":105},{"type":24,"value":1171}," and all should be fine. Obviously also don't install nuxt-typed-router either.",{"type":19,"tag":20,"props":1173,"children":1174},{},[1175],{"type":24,"value":1176},"Have fun!",{"type":19,"tag":1178,"props":1179,"children":1180},"style",{},[1181],{"type":24,"value":1182},"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);}",{"title":328,"searchDepth":358,"depth":358,"links":1184},[1185,1194,1195],{"id":39,"depth":358,"text":42,"children":1186},[1187,1188,1189,1190,1191,1192,1193],{"id":55,"depth":376,"text":58},{"id":91,"depth":376,"text":94},{"id":141,"depth":376,"text":144},{"id":195,"depth":376,"text":198},{"id":224,"depth":376,"text":227},{"id":259,"depth":376,"text":262},{"id":294,"depth":376,"text":297},{"id":313,"depth":358,"text":316},{"id":1141,"depth":358,"text":1144},"markdown","content:blog:2023:rendering-content-with-nuxt3.md","content","blog/2023/rendering-content-with-nuxt3.md","blog/2023/rendering-content-with-nuxt3","md","/blog/2023/rendering-content-with-nuxt3/",788,0,[1206,1210,1214],{"title":1207,"date":1208,"url":1209},"HTML5 Video Cheatsheet: Optimizing videos for the web","2025-12-05T00:00:00Z","/blog/2025/html5-video-cheatsheet/",{"title":1211,"date":1212,"url":1213},"Transactions in the MongoDB EF Core Provider","2025-10-25","/blog/2025/mongodb-explicit-transactions/",{"title":1215,"date":1216,"url":1217},"Queryable Encryption with the MongoDB EF Core Provider","2025-09-22","/blog/2025/mongodb-queryable-encryption/",[],1779224631192]