Champion Vuer is a web app that allows you to input champions and then go through their skins, abilities, and see various information from them. The information is generated through Riot Games’s Data Dragon API for general League of Legends content.
Why
At the time of making this project, I wanted to make a personal project to a decent level for most of the games that I played. One of these was League of Legends, a game that I have played since 2012. At some point in this thought flow, I decided that I wanted to learn Vue, and Nuxt.js was introduced halfway through development.
What I Learned
I learned Vue, as well as Nuxt.js, through the development of this. I like that Vue has so many officially supported libraries for various needs like routing and state. Getting used to how Vue renders and updates the DOM was difficult coming from React. Resources for Vue2 vs Vue3, options vs composition API, and Nuxt2 vs Nuxt 3 online was very confusing. To be honest, having coded in Svelte, it feels like Svelte with a bit more boilerplate, but after having made this project, I have a greater appreciation for Vue and the framework overall.
Stack
| Frontend | Backend | Libraries |
|---|---|---|
| Vue | Node.js | Pinia |
| Nuxt.js | Nuxt.js | |
| Typescript |