Recently, I've been using Nuxt for my front-end projects and have really fallen in love with the ease and convenience this framework offers. Now, I even opt for it in projects where Vue alone would suffice, because Nuxt provides a wealth of helpful features, such as automatic imports.
But what's even more impressive is how, over time, the Nuxt team has developed a comprehensive ecosystem that positions this framework as increasingly "all-batteries-included". Unlike with other frameworks, I have the option to "not decide", I can rely exclusively on the official Nuxt (or Vue) tools and have nearly everything I need to construct a front-end oriented website. Moreover, I can be confident that the setup process will be straightforward.
A few days ago, I decided to streamline my personal website (the one you're currently browsing) by dividing it into two main sections:
- An interactive Resume that's also printer-friendly.
- A Blog, including the homepage and individual article pages.
I quickly recognized that the Nuxt stack would be the ideal solution for this project. In this post, I’ll demonstrate how and why I utilized official Nuxt tools to develop this new website both simply and quickly.
Nuxt
I don't need to reintroduce Nuxt in details as everyone knows the purpose of this kind of frameworks. Of course, let's note here that the server-side rendering is very important for SEO and to generate the right meta and open-graph tags, thanks to the useSeoMeta composable.
It provides thumbnails like this one when sharing blog posts:
Moreover, for smaller websites, the conventions over configuration approach is often a boon. Features like file-based routing and auto-imports serve to further simplify the code.
Modules significantly streamline the process of incorporating additional features, sparing you the hassle of handling the implementation yourself. Typically, you just install the module, add it to nuxt.config.ts, and it just works. For instance, here's the only code I needed to integrate Google Fonts into my project:
modules: [
[
"@nuxtjs/google-fonts",
{
families: {
"Space Grotesk": [300, 400, 500, 600, 700],
},
},
],
],
Besides, deploying with Nuxt is smooth, especially with hosting services like Vercel. Thanks to serverless architecture, this kind of website can be hosted for free. Setting up the hosting part took me less than 5 minutes.
Nuxt UI
Nuxt UI is a UI Library specifically crafted for Nuxt, leveraging TailwindCSS. It's free, fully typed, supports Dark Mode, and even provides tools for form validation. It has a decent amount of components, whose UI is pretty easy to customize using tailwind-merge.
I mainly used it for buttons, badges, tooltips, popovers, and slideovers, aiming to give my resume a more dynamic touch than a typical PDF would offer.
Nuxt Color Mode
This module allows to handle dark mode in a very easy way, storing user preferences in local storage. Since it's seamlessly integrated with Nuxt UI, all components are natively compatible, allowing me to implement dark mode with minimal additional effort.
Nuxt Icon
I'm a big fan of incorporating icons into websites, but the cumbersome setup and imports were always a deterrent. However, that's a thing of the past now. Nuxt Icon provides access to more than 200,000 icons without any need for manual imports.
With Nuxt UI (relying on Nuxt Icon), adding an icon to my project look like:
<UIcon name="i-ph-globe" />
And thanks to Iconify VS Code extension (from the same author), I get icon names auto complete in VS Code, and a live display of the icon right in the code:
VueUse
Ok, this one is from Vue team, but aligns perfectly with the "all-batteries-included" that I love. It's essentially a collection of utilities that you may need in any vue project. The purpose here is to not reinvent the wheel, and avoid the hassle of dealing with low-level code, especially when you're doing what's everyone is doing too.
In my resume, I use it for example to allow users to copy my email adress in their clipboard, using useClipboard utility.
Nuxt Content
Last but not least, Nuxt Content is THE tool that convinced me to abandon my backend and database in favor of a fully static approach.
Essentially, it reads my Markdown blog posts stored in the /content folder and transforms them into data that can be queried and rendered in Vue components, acting as a file-based CMS.
It uses front-matter syntax (yaml at the top of md files) to add data on my blog post, enabling me to use it as if it were coming from a database For example, here is the top portion of one of my article:
---
title: 10 Lessons Learned from migrating from PaaS to Docker on a VPS
date: 2023-07-13
language: EN
image: server
readTime: 6
deprecated: false
tags: [server, virtualization, architecture]
---
Besides, it natively supports code highlighting, with seamless integration of dark mode.
The process to create a new blog post, is simply to create a .md file, write the article, and push the code to Github.
Conclusion
The Nuxt ecosystem, in my opinion, is currently underrated. It offers something unique: a cohesive set of tools designed to work in perfect harmony. In a JavaScript ecosystem where developers often spend considerable time evaluating, selecting, and integrating tools, it's refreshing to have an option that simplifies the whole process and accelerates development.
Naturally, every choice comes with trade-offs, and this convenience does add a certain degree of lock-in within the Nuxt ecosystem. However, in my view, particularly for those seeking simplicity, I think it's absolutely worth it.
I can't imagine another tech stack that could have made the rework of my personal website faster or simpler.