Writing achievement guides and nonsense with Nuxt Studio and the Steam API

3 min read • Posted on Jun 24, 2024

A shiny new Nuxt module called Nuxt Studio, an editor for Nuxt Content websites, has officially released. I was lucky enough to get early access on the waiting list so I needed an excuse to make full use of it. I've started writing achievement guides for games towards the end of 2023 and having a CMS to write them would be great for my productivity.

When I picked it up, content was written directly in Markdown, with the ability to create and edit markdown files, use custom Vue components and upload images. At the time of writing, the Nuxt Studio team just launched Nuxt Studio v2 with a complete redesign and "Notion-like editor". I'm actually using it right now to write this post. It has live collaboration for teams, live preview, drafts and easy integration into any Nuxt project.

I started building Moon's Game Guides in December 2023 with the intention of writing my achievement guides in Nuxt Studio and then porting them over to Steam, as well as having my own designed website for them to live. I already had 4 guides written on Steam so that allowed some foundations on how it should look.

One of my favourite features of Nuxt Content is the ability to use custom Vue components in the markdown files. For example, on achievement guides I can create an Achievement.vue component that has the image, title and description of the achievement, as well as using component slots for rendering any other content such as YouTube videos and a checkbox to allow tracking the completed state.

I started playing with the Steam API, not too much longer after that. The main thing I was eyeing up was the News API that allowed me to pull latest news for the games I've set up, from Steam itself, as well as some partnered news providers like PC Gamer, VG247, PCGamesN and Rock, Paper, Shotgun.

The partnered providers come with an excerpt of the articles in HTML and the Steam articles come in full in BBCode. Those ones in particular were a little difficult, as it required a BBCode to HTML parser. There weren't many parsers out in the wild that converted Steam's own BBCode tags properly and could be extended with custom tags that it uses so I created my own parser using regex for converting BBCode tags to HTML tags. This was a great point in the project to use Vitest for TDD, as I had a plethora of test cases from the Steam API to test against to make sure the content was displayed properly.

I had a Steam API key, so I wanted to make the most of it. I started playing with the other endpoints Steam had to offer. While the API isn't amazing, I could get a decent amount of data such as basic game information, achievements, assets, player counts, my user profile and my recently played games. This allowed me to create scripts to automatically create game pages, with news, achievements and player counts.

I could also create my profile page that showed what game I'm currently playing, my recently played games and a Year in Review showcase.

I'm still having fun implementing new ideas into the site. It's been a good opportunity to get more experience with a modern stack using Nuxt 3, TypeScript, UnoCSS and Vitest.