[{"data":1,"prerenderedAt":276},["ShallowReactive",2],{"/2025/09/01-crm-using-nuxt-content":3},{"id":4,"title":5,"body":6,"date":267,"description":253,"extension":268,"meta":269,"navigation":270,"path":271,"robots":272,"seo":273,"stem":274,"__hash__":275},"posts/2025/09/01 CRM-using-nuxt-content.md","01 CRM Using Nuxt Content",{"type":7,"value":8,"toc":252},"minimark",[9,18,21,25,27,35,38,48,56,58,64,67,69,75,86,88,94,101,103,109,119,121,127,142,144,150,153,161,168,170,176,179,210,212,218,225,227,233,236,238,244],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"crm-using-nuxt-content","CRM using Nuxt Content",[19,20],"br",{},[22,23,24],"p",{},"I was looking for an alternative to existing blogging technology. Preferrably without database backing, support static side generator (SSG) so I can host it cheaply, and less painful to update content. I have used Next.js with json on my other site, but json isn't easy to write post on. When I read on Nuxt content, I decided to give it a try.",[19,26],{},[28,29,30],"section-title",{},[31,32,34],"h2",{"id":33},"installation","Installation",[22,36,37],{},"It didn't go very smooth as of this writing. First, I created a Nuxt project. It prompted for additional tools that I would like to install. One of the tools is Nuxt Content. Well, it's a convenient start. Sadly, that's also when the inconvenient starts.",[22,39,40,41,47],{},"Nuxt Content failed to install on my Windows machine due to missing better-sqlite3. Based on the error, better-sqlite3 failed to install due to missing VC++ toolset. After few failed tries, I stumble upon this: ",[42,43,44],"a",{"href":44,"rel":45},"https://github.com/WiseLibs/better-sqlite3/blob/HEAD/docs/troubleshooting.md",[46],"nofollow",".",[22,49,50,51,55],{},"Basically, I need to make sure my Node JS is supported and then run the script in ",[52,53,54],"code",{},"C:\\Program Files\\nodejs\\install_tools.bat",". It will install Chocolatey, Python, and Visual Studio Build Tools 2019. Both Chocolatey and Python installations went smoothly, but Visual Studio Build Tools 2019 installation failed. I ended up finishing the installation through Visual Studio Installer. Then, re-installing better-sqlite3 finally completed.",[19,57],{},[28,59,60],{},[31,61,63],{"id":62},"contents","Contents",[22,65,66],{},"On how to add posts as contents are pretty easy. I have to define a collection, add my posts to content folder, and render it with a slug page and queryCollection() method. As expected, Nuxt will use folder path as url path which makes it easy to track down the location of a content.",[19,68],{},[28,70,71],{},[31,72,74],{"id":73},"navigation-tree","Navigation Tree",[22,76,77,78,81,82,85],{},"So, I tried to create a list of posts. This is when ",[52,79,80],{},"queryCollectionNavigation()"," is useful. One thing that's not documented is the result is to be rendered one level at a time. I use ",[52,83,84],{},"children"," property to get to the next level.",[19,87],{},[28,89,90],{},[31,91,93],{"id":92},"frontmatter","Frontmatter",[22,95,96,97],{},"This is a great way to add metadata to the markdown. Also, I bind it to the component, so I can render some properties without having to write them twice. Just one thing to note, it has to be on the top of the markdown. For more details: ",[42,98,99],{"href":99,"rel":100},"https://content.nuxt.com/docs/files/markdown#frontmatter",[46],[19,102],{},[28,104,105],{},[31,106,108],{"id":107},"custom-style-with-mdc","Custom Style with MDC",[22,110,111,112,115,116],{},"MDC syntax is what I used to customize the style of some part of the markdown. In my case, the title, date, and the code block. Basically it allows the content to be wrapped in a Vue component with styling included. The content is wrapped with double colon ",[52,113,114],{},"::",". For more details: ",[42,117,99],{"href":99,"rel":118},[46],[19,120],{},[28,122,123],{},[31,124,126],{"id":125},"date-formatting","Date Formatting",[22,128,129,130,137,138,141],{},"This is the most painful case. For somewhat reason, formatting date is not easy. First, I tried to format it in the markdown itself and it didn't work even with MDC syntax data binding. I ended up using a Vue component to enhance the rendering, so I can format it using Javascript. Refer to ",[42,131,136],{"href":132,"rel":133,"className":134},"https://github.com/nik-yo/Nikki-no-Nikki",[46],[135],"text-blue-600","GitHub repo"," for more details. Check the top of the markdown under content and the ",[52,139,140],{},"PostTitle"," components.",[19,143],{},[28,145,146],{},[31,147,149],{"id":148},"data-binding","Data Binding",[22,151,152],{},"In order not to duplicate metadata, I utilize data binding. I tried binding data in markdown itself using the supported:",[154,155,156],"code-block",{},[22,157,158],{},[52,159,160],{},"{{ $doc.variable || 'defaultValue' }}",[22,162,163,164],{},"But it doesn't support much formatting when I tried to render the data. So, I bind the metadata to a prop to Vue component instead. For more details: ",[42,165,166],{"href":166,"rel":167},"https://content.nuxt.com/docs/files/markdown#props",[46],[19,169],{},[28,171,172],{},[31,173,175],{"id":174},"custom-font","Custom Font",[22,177,178],{},"As for custom font, I used Nuxt Fonts + Google Fonts. Once Nuxt Fonts is installed, the rest is just css and Nuxt font will pull the font from built-in repository, in my case, it is Google font. For more details:",[180,181,182,198],"ul",{},[183,184,185,189,190],"li",{},[186,187,188],"strong",{},"Nuxt Fonts",": ",[191,192,194],"span",{"className":193},[135],[42,195,196],{"href":196,"rel":197},"https://nuxt.com/modules/fonts",[46],[183,199,200,189,203],{},[186,201,202],{},"Google Fonts",[191,204,206],{"className":205},[135],[42,207,208],{"href":208,"rel":209},"https://fonts.google.com/",[46],[19,211],{},[28,213,214],{},[31,215,217],{"id":216},"attribute-styling","Attribute Styling",[22,219,220,221],{},"This is a powerful feature. It allows me to use tailwind class in markdown for styling. For more details: ",[42,222,223],{"href":223,"rel":224},"https://content.nuxt.com/docs/files/markdown#attributes",[46],[19,226],{},[28,228,229],{},[31,230,232],{"id":231},"conclusion","Conclusion",[22,234,235],{},"Finally, this blog is done. I learned a lot and can share what I learn with the world.",[19,237],{},[28,239,240],{},[31,241,243],{"id":242},"github-repository","GitHub Repository",[22,245,246],{},[191,247,249],{"className":248},[135],[42,250,132],{"href":132,"rel":251},[46],{"title":253,"searchDepth":254,"depth":254,"links":255},"",2,[256,257,258,259,260,261,262,263,264,265,266],{"id":33,"depth":254,"text":34},{"id":62,"depth":254,"text":63},{"id":73,"depth":254,"text":74},{"id":92,"depth":254,"text":93},{"id":107,"depth":254,"text":108},{"id":125,"depth":254,"text":126},{"id":148,"depth":254,"text":149},{"id":174,"depth":254,"text":175},{"id":216,"depth":254,"text":217},{"id":231,"depth":254,"text":232},{"id":242,"depth":254,"text":243},"2025-09-01T00:00:00.000Z","md",{},true,"/2025/09/01-crm-using-nuxt-content",null,{"title":5,"description":253},"2025/09/01 CRM-using-nuxt-content","_-kkIbIzSujp9q0fYeTHf9Su3NCl-dzH0exOMyrNjIY",1785167453318]