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

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"

If you have any questions please share them in the comments, and don't forget to subscribe for more content like this.

----

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

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

[colinj]

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.

[armandoalamilla]

Thanks for this awesome tutorial. There are just a few tutorials about create typescript libraries and this is one of them with a great explanation quality. Keep sharing this type of content. You save the world.

[theonlycatonice]

25:25 fyi for anyone who runs into module resolution errors, the function's file in the subfolder needs to be named index.ts as well in the folder. Idk why just yet but it threw me for a loop. So it seems the entry file and files holding these functions need to be named index.ts unless you want to explicitly export them one at a time

[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.

[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.

[ugurokur]

Hello, could you do this in react lib ?

[MarkoMilicevic-kq]

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

[giorginfire]

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

[quanshen]

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

[ShoTHIk]

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

[MrEladEdri]

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

[Flawel]

very good explained, keep going ma boi

[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 :)

[ProfesorThoth]

This useful for create a react library components?

[virketrang]

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

[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!

[lucaargentieri]

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

[josealfonso]

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

[vetersvobodnyi]

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"
}
}