Developer Experience for Nuxt
Open Source Plugins (Since 2022)
Most of my projects emerge from a mix of personal need and creative drive. My Nuxt plugins are no exception.
It all started with this use case: a friend asked me to build an online presence for her yoga, systemic counseling, and women’s coaching practice. Since I was building most of my websites with Kirby at the time, it made sense to use Kirby for this project too. Around the same time, I was diving into the Nuxt ecosystem – primarily for multi-tenant admin panels in a B2B context. From that fresh enthusiasm for Nuxt came the idea of trying something architecturally new: using Kirby purely as a headless CMS and Nuxt on the frontend.
For that to work well, I needed a bridge between the two layers. It didn’t exist yet. And so the yoga website became the prototype for my first Nuxt plugin.
Nuxt Kirby: Integrating Kirby CMS
The learning curve for my first Nuxt module was steep. Kirby markets itself as headless-ready, but in practice, setting up a headless instance was more involved than expected. So the first step was building my Kirby Headless Starter: a starter kit with bearer token authentication and CORS handling, neither of which Kirby supports out of the box. That starter kit then became the backend foundation for the website.
The Nuxt module followed. Nitro internals, server routes – all uncharted territory for me. I read through the source code of other plugins to better understand how things fit together. The key insight came almost as a side effect: a server proxy in Nuxt that intercepts API requests, protects credentials, and bypasses CORS – without the frontend ever knowing. A pattern I would reuse later.
Over a few months, Nuxt Kirby took shape. A holistic module for integrating Kirby into Nuxt, now also used in larger commercial projects like netbid.com and deadstock.de.
Nuxt API Party: A Server Proxy for Any API
The server proxy in Nuxt Kirby was a Kirby-specific solution – but underneath it hid a universal pattern. Any API could be connected this way: credentials stay on the server, so those all-too-familiar CORS errors are no longer an issue. The Nuxt frontend only talks to the internal backend.
From that realization, Nuxt API Party was born: the simplest way to tap into external APIs in a Nuxt project. Define an API in the config, and the module generates typed composables for it. Perhaps the strongest feature: OpenAPI integration. Provide a schema, and you get end-to-end type safety – from the API schema all the way to the composable in your frontend.
Nuxt API Party is the module I’m most proud of. Not because it’s the most complex, but because it’s a simple abstraction for a common problem.
Nuxt Plausible – Used by Nuxt.com Itself
Who doesn’t know them – cookie banners. From a UX perspective alone, they’re a thorn in my side. Plausible sidesteps the problem: GDPR-compliant tracking, no banner, the user isn’t obstructively hindered while browsing. For a few client projects, I wrote a plugin to integrate Plausible into Nuxt as easily as possible.
Later, the Nuxt authors caught wind of it and offered to host the module as an official Nuxt module (@nuxtjs/plausible). Gladly!
What makes me happiest is that Nuxt.com uses it itself. When the framework you build modules for uses your own tools – that’s something.
Under the Hood
Not every module tells a story. Some solve a precise problem and then disappear under the hood.
Nuxt Prepare fills an architectural gap: nuxt.config.ts is synchronous, but builds for complex websites often need asynchronous preparation steps. The module runs build actions and exposes the results as typed constants.
Nuxt Gtag integrates Google Analytics with Consent Mode v2 into Nuxt. The idea: analytics only after explicit consent. All the learnings from Nuxt Plausible came in handy here, letting me build a holistic solution for Google products that use a Gtag ID.
Nuxt Vitalizer is a collection of workarounds packaged as a Nuxt module that does one thing particularly well: optimizing Largest Contentful Paint (LCP) in Google Lighthouse and Google PageSpeed Insights. This module offers solutions for known Nuxt issues that haven’t been fixed in core yet.
Who’s Using All This?
Over the years, I got curious: who actually uses these modules? Besides Nuxt.com itself, I managed to track down a few other projects.
Looking back, none of these modules were planned. Each one grew out of a concrete need, and from what I’d learned building the previous one. When I first stepped into the Nuxt ecosystem, I had no idea how many modules I’d end up building. These days, I’m running out of ideas faster than the itch to build them! Got one?