It only took me a year but I finally figured out how to type a Vue Input component.
Unlike React, Vue doesn't ship with synthetic types for inputs which can cause problems for Typescript.
I turned to everyone's favorite "AI" programmer, Claude, and politely asked for the solution:
<script setup lang="ts">
function It's always bothered me that when I share a post from this site the metadata wasn't dynamic and would be a generic image placeholder and link info (because of the nature of Single Page Applications (SPA)).
This isn't the best way to promote my posts and it's also pretty bad for my SEO scores in general, including lighthouse which is becoming an ever increasingly metric used for frontend development -- to a detriment but that's a different post.
I tried some hacky solutions...
GraphQL seemed like such a great idea when I first learned about it
Essentially it's the reinvention of an API endpoint. Instead of hitting a specific API to get back a certain set of data, let's have one endpoint that will return what's requested.
For example instead of an endpoint to retrieve a user's data, typically /user, instead pointing to /graphql and making requests against that endpoint for what a developer would like...
In the last post, I outlined how to instantiate Apollo Client between the server and client components in our application. The important takeaways were that each component type would need it's own Apollo Client instance and also that passing something like a bearer token between the two component types is possible using the cookie function as outlined in Next.js's documentation.
Of course, using cookies, or even local storage for that matter, is a very poor way of managing data, and...
Being the loyalist that I am to Apollo GraphQL (so that we can interface with the Strawberry GraphQL backend), we're going to use Apollo with our React Server Components as outlined in this blog post about how to use it's experimental RSC plugin to deal with the use client/use server dynamic - How to Use Apollo Client with Next.js 13.
The most important concept...
I'll be honest, I really started this project hoping to dig much more into FastAPI and Strawberry and add some fullstack cred to my developer resume. But when I started working on it, instead of opting for my usual Vue3 install, I thought "hey, might as well try to do a simple frontend using Next.js."
Like you, I've been seeing React Server Components around the ol' interwebs, and have mostly been terrified in it's implementation implications. But I thought to myself...
One of the biggest differences that I've found between Strawberry and a the standard FastAPI REST solution is how to handle a database session.
I posted previous about the thoroughness of FastAPI's documentation on connecting endpoints and databases, and my implementation for it is:
# domains/core/database.py
Alright, time to really start digging into this crazy thing.
The app I'm building is a project I've been trying to get up and going for years, even before I was a programmer - a Fantasy Football app.
I think this is a really good project for anyone to work on, the concepts and relationships are really simple, and there's a lot of data to mess around with that can be used to build out complex structures.
For years the hardest part of the project was getting actual NFL data,...
I took a bit of time off from my day job for the holidays, so what else am I going to do but build out a whole gigantic app. WHY NOT??
There's a couple of motivations behind this, but the big ones being that since my day job switched tech stacks from Vue and Python to React and Elixir (and Graphql) I've been wanting to make a project that would let me dig into that side of things, particularly GraphQL.
Also, I am always looking to expand my knowledge of my...
I love testing, and when my day job transitioned to a React stack the fact that React had a novel approach to testing that I hadn't seen in other roles I'd been in was one of the more interesting things that I had to learn.
There's two main things that drive testing in the React ecosystem, the first one being React Testing Library (RTL), which is the React-centric version of Testing Library. RTL focuses on UI elements in...
This should be a match made in heaven, a pair of qualified professionals working hand in hand to create highly functional applications that are beautiful and a dream to use.
In theory it should be the most natural working relationship on a software development team, but as most frontend engineers could attest it rarely works out that way.
Personally, I believe that designers and frontend engineers should be best friends. We should have the fun kind of working relationship where we're...
In the previous post I wrote about how to approach a testing in Vue app using the React Testing Library perspective.
This time I'm going to dig more deeply into exactly how to implement this mixed style.
To generate a standard bowling score UI, we're going to do a simple v-for loop on a data item for the frames (which we'll figure out later):
In the last post, I described how React Testing Library's integration style testing can be extremely useful in a Test Driven Design, especially coming from a perspective of integration.
A great example comes from a personal project of mine, creating a bowling scoring app:
Well, it was bound to happen, but I've gone and bitten the React apple, and the slithering snake of frontend framework evolution has a solid hold on me. And now that I'm bi-lingual it's time to grab some parts of this new eco-system and apply it across my own programming universe.
I'm going to have a much larger post coming up regarding my descent into the world of React, but I had to take the time to specifically focus on a paradigm that felt very foreign to the Vue world but will be very powerful...
Previously I've written about a similar functionality that's a plugin for Nuxt: Using Nuxt's New @nuxt/content Module To Launch A New Site.
While I love Nuxt's robust ecosystem, there is a growing bevy of issues using their framework^2 that makes it less and less worth using.
To name a few:
Docs: Vuex Documentation
State Management is one of the most elusive topics for most developers to wrap their head around, and, quite frankly, one of concepts that when done wrong leads to messy, complicated, and hard to understand code.
There's two main parts to this topic - the first, which is a more basic issue, is around the concept of props drilling and the misuse of passing data around one's app. I'd argue this should be a fundamental...
The above...
Now to get into the nitty gritty of testing a Vue SFC file.
I'm going to approach this from a Test Driven Development perspective - it's my opinion that this is by far the most effective way to write code. While it adds a layer of complication, it eventually becomes extremely helpful to writing hyper-fast code.
For this example, we're going to make a fairly simple component to display a User Card.
This will require us building out a page which will make an API call to get the Users,...
One of the biggest benefits of working with VueJS is the built in component focused conceptual framework and the ability to create isolated environments for handling styles and data.
But while the ability to create components is fundamental to VueJS there is a lingering question on how to structure them in a clear and efficient way.
I group Props and Emits together because they are the most used and direct ways to pass data back and forth...
"VueJS doesn't scale well."
It's one of those things that's said often about arguably the most powerful frontend framework in modern web development, and anyone who's been part of a large enough Vue project knows exactly what that looks like.
Components grow uncontrollably, code is repeated all over the place, various types of approaches to solving problems are applied across various components, etc.
Not to mention how much that problem is exacerbated...
It's can be hard to get started with Unit Testing, and I would argue it's because of a fairly simple misunderstanding between unit tests and e2e tests.
When starting to write tests, some people will find that the mental diagram of what they're programming creates a test that goes through too many sequences, and it makes it difficult to create a test that makes much sense of what exactly is happening.
Example: I want to test that when I click a button that it displays a message...
Unit Testing in Frontend is like the janitor's role for a dev team. They're kind of gross, really irritating, and most times gets left undone.
There was a reason I set out to specialize in Unit Testing and it's because most devs don't want to do it. In an effort to find a niche to help with job prospects, I stumbled into a really enjoyable aspect of programming that I think has really made me a much better developer.
The point of this article is to approach some vital parts of Testing VueJS...
It was about time I spruced up the old portfolio website, and the timing was perfect as it lined up with Nuxt introducing a new content generation module - @nuxt/content module.
The setup for the @nuxt/content is the same as any other new nuxt project. I prefer using:
yarn create nuxt-app <project-name>
Then you can add the module:
yarn add...