Create a library using Vite lib mode

Most of the tutorials out there are pretty much a basic HelloWorld, but did you know you can also create professional OSS libraries using Vite Lib Mode?
Vite lib mode allows you to easily generate esm, umd, iife bundles as a library, generate proper typescript declarations and be ready for npm publish
Resources
- ViteJS lib mode vitejs.dev/guide/build.html#l...
I'm also happy to announce that I will be talking at NuxtNation conference on the 16th & 17th of November 2022 on "How to add 3D to your Nuxt website using ThreeJS"
Claim your FREE ticket here bit.ly/3t4ELkv
If you have any questions please share them in the comments, and don't forget to subscribe for more content like this.
Come say hi on Twitter / alvarosabu
----
Our Sponsors
Meet Storyblok (not Storybook which is a different thing) The world's first headless CMS that works for both developers & business users.
I must warn you when you start using it, you will never go back to any other CMS solution
Give it a try at t.co/aaEZxcPC4W 😜
00:00 - Intro
01:10 - pnpm workspace
02:19 - Utils package
05:38 - Vite lib mode
09:59 - Create the playground app
11:00 - Testing the lib in the app
19:23 - Typescript declarations
23:34 - More cool stuff on the lib
27:34 - Ehance your lib - Visualizer plugin
29:25 - Outro

[@colinj8852]

Thank you Alvaro. Another awesome tutorial. There are so few articles or videos on how to create libraries using Vite and even those are very brief. Your tutorial goes into details and you even show the errors and issues that often happen and how to solve them. This is pure gold. Thank you for also briefly showing how to use pnpm and monorepos. I would love you to do a whole tutorial on how you setup and organise a pnpm monorepo because I still find that a struggle. Bravo.

[@AlvaroDevLabs]

Oh Colin, you don't know how much I appreciate your comment. I'm really happy that was helpful for you and thanks a lot for the support.

[@kissu_io]

You're on the goddamn right channel if you want to be taken care off! 🤗 ♥

[@AaronGreenlee]

Very helpful. I made the same mistakes, in the same order as you -- and your video helped me re-read the documentation to fix them. Thanks. I have subscribed to your channel.

[@user-nn1ux2vn4j]

So hard to find concise info of best-practice setup. This was sooo helpful. Thank you Alvaro.

[@jorgeagoiz5268]

Epic video, thanks a lot Alvaro !! Very useful for me!!

[@ShoTHIk]

Thanks! It's very usefull video. You covered almost all of my questions to stackoverflow on this topic :)

[@pinheirovisky]

You saved my job, man! Congrats!

[@quanshen86]

Thank you very much, Alvaro, that's really cool.

[@Flawel1337]

very good explained, keep going ma boi

[@mohammedsaber6782]

Good job man, Keep going

[@MrEladEdri]

@alvaro - iife stands for Immediately Invoked Function Expression. Which means a module that is invoked upon import.

[@alex-bello]

Excellent video! Came here hoping to find help with using Vite to build a library and left with so much more! I'd never heard of PNPM before and the workspaces are going to be a life saver for me. No more separate projects and repos for libraries and their demo apps!
Did have a question though. What is the name of the library that gives you the "nr" alias? I still have many projects on npm and yarn and that would simplify my life a lot!

[@sassyermy_tft]

Nice video! I have a question about building a library that include n components. How to configure the build to get an output of a dist folder containing a folder for each component?It would be great if I could have at least some hint on how to do it :)

[@user-dv1iz1sb6q]

thank you ！

[@virketrang]

Does anyone know why vite emits multiple .d.ts files?

[@josealfonso2117]

Awesome tutorial. Very clear. Thank you! Can you please make those formatting and "is" utils available somewhere. That can be very useful. Thanks! :-)

[@AlvaroDevLabs]

Thanks a lot for the nice feedback, you can actually use them by installing @alvarosabu/utils 😉

[@ugurokur]

Hello, could you do this in react lib ?

[@tosheen20]

Is this example treeshakeable?

[@lucaargentieri1107]

Hey! Thank you.
Can you make a video talking about how create a component library with nuxt3?

[@AlvaroDevLabs]

Hey there, may I ask why Nuxt for a component library? Nuxt is a meta-framework great for static site generation and SSR, not sure how it would be use to build a UI library, can you share more?

[@DKSubconscious]

7:49 Tadaaaaaaaaaaaa 😛

[@LostBoyLA]

How can I have my demo app running for a lib and while making live changes to the lib? It seems I have to stop and rebuild lib and restart my demo which I don't like.

[@lucas38458]

type declarions dont work for me

[@ProfesorThoth]

This useful for create a react library components?

[@AlvaroDevLabs]

Vite is framework agnostic, just add the plugin for your framework and voilá

[@boomshakalaka656]

What’s that sound 😅7:52

[@eminekebeli1612]

I heard the same sound too, and I was doubting myself until I saw your comment. 😄 It's a bit freaky

[@AlvaroDevLabs]

tadaaaaaaa

[@vetersvobodnyi3210]

types no longer work, types should by inside exports
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/awesome-lib.js",
"require": "./dist/awesome-lib.umd.cjs"
}
}

[@AlvaroDevLabs]

Yep, specially if you use vite with moduleResolution bundler

[@user-mi9wo4tu7w]

Thanks!