Note: My blog actually doesn't run on Nuxt anymore. I migrated to Remix about a year after posting this. I'm keeping this around as an archive of my initial impressions with Vue.
A couple months ago, after working on Lumastic full-time for 2 years, I made the decision to go part-time and get a “real” job. During that journey, I realized how much easier applying and interviewing for positions would be if I had a personal website that documented who I am and the projects I’ve worked on.
So, after I got my job at Simple Thread, I decided to take a couple weekends and make it happen. But, as I quickly found out, there are A LOT of ways to build a simple blog. So, in this post, I’m going to outline why I decided to build mine with NuxtJS, TailwindCSS, and GraphCMS.
Wait, Nuxt not Next?
I’m a big React fanboy. So, obviously when I started looking for a Server Side Generator (SSG) to build this site I immediately thought of Next.js. However, I thought that a simple project like this would actually be a good opportunity to learn something new. That’s why I chose NuxtJS - a similar framework built around VueJS.
I’d heard a lot about Vue and always thought about it as a lesser React. And, for some use cases, I still think that. The funky :prop & v-directive syntax and less than great linting and Typescript support (although that might just be a Nuxt thing) definitely did not leave me jumping aboard the Vue train completely. However, for this project, I’m really grateful I went with Vue.
The return of true lifecycle methods.
Although I never want to go back to writing class-based React components, there is something to be said for having dedicated beforeMount and mounted functions. As a developer, it just feels more reliable to have a common function flow across components rather than remembering when to employ useEffect and useLayoutEffect.
I utilized these methods a bunch when creating all of the animations on the home page. Tweening with GSAP was a lot more pleasurable with the security of using mounted in Vue.
Components have scoped css
My god, I never realized how much of a hassle using styled components or CSS modules was until writing scoped styles in Vue. Writing HTML and CSS for a component in the same file with a simple PostCSS build process that packs everything together out of the box feels like magic.
This is something I’m begging the React team to steal.
Native Transition Support
Vue’s native CSS-based page and component transition support still blows my mind. It’s such an easy and powerful tool that really sets the library apart. I will miss this greatly on my next React project when I have to re-remember how to use ReactTransitionGroup.
View Comes First
This feels like a really minor thing, but as a frontend developer playing a full-stack engineer on TV, I really love how .vue files start with…well…the view.
In React, it can get really annoying opening up a component file and scrolling through a swathe of import statements, business logic, and a big old return function before actually getting to see what the component renders to the page. With Vue, it felt a lot easier to toggle between multiple components simply because the context of the actual webpage was always right in front of me at the top of the file.
Wait, what was better about React?
Honestly, Vue is really awesome and I had a ton of fun with it. I probably won’t turn to it the next time I’m building a full-fledge web-app. But for marketing sites, blogs, and simple projects like this, I’m really glad I’ve added Vue to the quiver.
Now, let’s talk about TailwindCSS.
For the design of this site, I wanted to keep it simple and have it evoke the feeling of a personal notebook. So, to implement that design, I decided to use TailwindCSS.
If you haven’t heard of Tailwind, it’s not your mama’s old-school CSS framework. Unlike Bootstrap, Chakra, or Bulma, Tailwind is not a set of layout and component styles. Instead, it’s a set of CSS utility classes that make quickly creating completely customized design systems super easy - especially when combined with component-based JavaScript frameworks like React or Vue.
For example, instead of having base classes from a normal CSS framework like btn or btn-primary that you then override with important! statements in your own stylesheets, you can string together small CSS utilities like px-3 py-5 uppercase bg-red-400 text-white hover:bg-red-500 to create a completely custom button.
At first glance, it might seem more complicated than just adding Bootstrap’s btn class, but I think that’s like comparing apple’s to oranges. See, Tailwind isn’t a design system, it’s a set of utilities that make it faster to create and iterate your own.
Which means, if you’re working on a solo project and want a prefabricated design system that just works, go with a CSS framework like Bootstrap. However, if you’re a frontend developer that likes to create customize designs, I highly recommend TailwindCSS.
With an incredible compiler that keeps your stylesheet small and only imports the utilities that you’re actually using and AMAZING tooling that makes it almost completely unnecessary to ever leave your code to read documentation, Tailwind truly lives up to the hype.
Tying it together with GraphCMS
Finally, let’s talk about the most important part of creating a personal blog: the actual blog. Before this project, I’d only ever used content management systems (CMS) like Wordpress and SquareSpace. So, when I started looking for a headless CMS, my only requirement was that it needed to have a generous free-tier and a simple to use API.
I found both of those and more with GraphCMS. Not only does their free-forever tier give most developers everything possibly needed, but they also have a great UI that makes it really easy to setup models. And, because it’s based on GraphQL, creating queries with the integrated GraphiQL playground is a breeze.
It’s honestly such a good product that I’m thinking of using it as a way to quickly mock a backend for another project I’m working on. It’s that powerful and easy.
Conclusions and future improvements
This quick personal blog was really fun to make. It gave me the opportunity to try some new technologies while leaving me with a nice place to share my thoughts and projects.
In the future, I want to add a simple contact form using formsubmit.co and figure out how to add support for MDX content so I can add custom components and animations to posts.
All of the code for this site is available on GitHub. So, if you’ve got any implementation questions or have any suggestions for things I should change or add, message me on Twitter or send me an email.
