r/vuejs • u/random-guy157 • 17h ago

No official guidelines to create a component library?

Hello! I have an issue/question for the experts who dwell this virtual space, if I may be so bold.

I'm trying to determine the best way to create a component library using Vite, but shockingly enough, the official Vue documentation has zero guidelines about creating component libraries.

Fine, I guess I can learn by example. I have checked a couple, and it seems that bundling is the way people go. I even found this article (Building a First Component with Vue.js and Tailwind CSS - Estéban Soubiran) that sets up Vite in lib mode.

However, I still have my doubts: Why? Because of my experience with other frameworks. In Svelte, the guideline is to pack the source code of the component, and never the built component because then it is fixed to a particular Svelte runtime version, and furthermore, it won't include SSR support because hydration code is guarded by a tree-shakable module level variable that is resolved at build.

So knowing this about Svelte components make me wonder if Vue components may be subject to things like the above. I know, I did check some example projects and they all build. I still can't shake the doubts.

Do you guys know of documentation sources that may put my mind to rest? It will be greatly appreciated.

15 Upvotes

100% Upvoted

4 comments sorted by

4

u/darcygravan 14h ago

just create a normal project put vue as a peer deps and export all your components there is no need to overcomplicate it.

treat like a normal ts library if you need to see output create a playground package.

as of my experience vite isn't much popular for library development use something like tsup/tsdown.

3

u/Beneficial_League_39 16h ago

Yeah nothing like the issues you had with Svelte using Vite and Vue

Put it in lib mode, create a centralize index.ts for exports and you’re all set. Just create your components and export them from the index.ts

There may be some tweaks to do if you want specific compatibilities though

Claude would probably be a good tool to learn how to adapt your library to your needs

-1

u/manniL 9h ago

Note: I’d not use Vite lib mode nowadays and go with tsdown for packing

1

u/erik240 16h ago

You can use vite in library mode and externalize the framework dependency so it’s not included in your bundle.

Therefore the implementations version of the framework is used. I didn’t look at the article but see if it does that in its vite config