Best practices (2024) to build your own tree-shakeable component library

[tibineagu]

Hi there, Vue community!

I have been searching and searching and yet cannot find on this vast internet the solution to my problem.

I am maintaining a Vue 2 component library with several dozen components and utilities. It gets bundled with rollup and results in two builds:

• a cjs build that's one big file
• an esm build that transpiles the various components and modules and creates a "mirror" of the folder structure but where all the files have been compiled

I am now in the process of migrating this library to Vue 3, but the tooling does not seem to have a "vue 3" equivalent, and therefore I found myself having to try and find alternatives.

There are several articles online that seem to guide towards using vite (or rollup directly), but i've been having issues with both of these approaches in the sense that they are not resulting in a 1:1 equivalent of the old vue 2 setup.

Here are my requirements

1. the library needs to be tree-shakeable. I need to import { MyComponent, someUtility } from 'my-library' and have only the code belonging to those items be included in the page's bundle.
2. the styles associated with the components must be bundled with the components themselves
   • there should not be any extra imports of style files
   • definitely there should not be one BIG style file for the entire library that I have to import
   • I should just import { MyComponent } from 'my-library' and be at ease that the styles for MyComponent will be included in the page styles
3. It should compile the Vue SFCs instead of just "copying" over the .vue file to the dist/
   • Some tools like unbuild seem to simply copy the code over. This is resulting in compiler errors during SSR for statements like var _MyComponent = _interopRequireDefault(require("./MyComponent.vue"));

So, TL;DR:

Is there a "template" for building a modern tree-shakeable Vue 3 component library with multiple components, for use in a Vue3+Vite (or Nuxt) app?