Building a Terminal Component in Vue
4/14/2025
There’s something inherently cool about terminal interfaces. They’re minimal, efficient, and a little nostalgic. I wanted to bring some of that charm to my site — not just as a design gimmick, but as an interactive way for visitors to explore who I am and what I do.
This blog post is a quick behind-the-scenes look at how I built my terminal-style component using Vue and Nuxt 3.
Where the Idea Came From
I’ve always loved sites that play with unconventional UIs — command line games, portfolio terminals, hacker-themed Easter eggs. One day I thought, “Why not just make my site talk like a terminal?” I didn’t want to overdo it, but it felt like a fun way to bring some personality into my portfolio without relying on overused templates.
Plus, it let me flex a bit of frontend muscle in a playful way.
How I Built It
I started with a basic Vue component and styled it using Tailwind CSS, keeping things simple and accessible. The terminal accepts commands like help, about, and contact, and responds accordingly — kind of like a mini shell emulator, but with just enough logic to make it feel interactive.
Some things I wanted to make sure it had:
Command history with arrow key navigation
A realistic typing animation for responses
Different output based on commands like sudo hire-me or coffee
Dark mode support
A nod to macOS terminal with the red/yellow/green window buttons
Nuxt 3 made this process smooth — I used <script setup>, ref, and some lightweight logic to manage state. The typing effect uses await with a timed delay to animate the text, which adds a nice bit of feedback when a user runs a command.
What’s Next
I’m planning to hook it up with more content — like blog posts, project links, maybe even a text-based game mode if I get carried away. For now, it’s just a fun piece of the site that helps me stand out a bit.