Component Filter

One monorepo held several projects that shared most of their code and differed in the parts users see: styles first, sometimes logic. The usual answers all move the cost somewhere unpleasant — duplicate a component per brand and maintain the copies in parallel, branch at runtime and ship every brand’s code to every build, or fork the repository and watch the forks drift

What we wanted was one component that could hold the shared part and the project-specific parts together, and a build that knew which project it was producing

A Vite plugin that adds scoped sections to Vue single-file components. A block tagged with a proj keyword belongs to that project; at build time the plugin reads the key of the project being built and strips the blocks belonging to the others

The same component could contain shared code and project-specific blocks, with the build selecting the variant for the target project. In practice that means one template, one script, and as many style blocks as there are projects:

<style scoped proj="project-a">
...
</style>

<style scoped proj="project-b">
...
</style>

<style scoped proj="project-c">
...
</style>

Each build then contains the shared code plus exactly one of those blocks. Nothing branches at runtime, nothing ships dead CSS, and the variant boundary stays visible in the source — right next to the code it varies

Internal tooling, never published, living in the monorepo it was built for