How to Build and Publish a Vue.js Component Library with GitHub Actions and Vite

[@donnacasterr6223]

Thanks for the Precise and useful tutorial. So many videos on here were just beating around the bush or talking about a totally different technology. Great job.

[@letstalkdev]

Thank you so much!

[@taylorjohnsonct]

Great video! It helped me right when I needed it with a good title while being short and to the point. Your explanations on certain config properties were great!

[@letstalkdev]

Thank you very much! Glad you've enjoyed the video

[@bobek8030]

is dts required as a plugin? you didint mention this

[@letstalkdev]

Thanks for your comment! Indeed vite-plugin-dts is used in ui-lib. This is particularly useful when you are developing a library or a component in TypeScript and want to distribute it with type definitions, so consumers of your library can have type checking and IntelliSense support in their IDEs. This plugin automatically generates these declaration files from your TypeScript source files as part of the Vite build process. It is responsible for generating /ui-lib/dist/src/main.d.ts and without it you won't have intellisense on imports.

[@blindpupil]

Thank you. I added some scoped styles in scss and installed the vite sass package to handle it. But after bundling and importing the library, the custom styles are not being applied. Any idea how to fix this so that scoped scss styles in the CL work when imported somewhere in a different project?

[@letstalkdev]

Thanks! Interesting issue, the component library build should contain all the styles it needs to render the components properly, I don't really use sass, so I'm not sure, but would it be possible that your sass is not compiled to css at build time?

[@blindpupil]

Could be@@letstalkdev The problem is that I need to also be able to import scss variables inside the CL to other projects (design tokens). So I'd need make sure the scoped scss is compiled, but the unscoped scss (in @assets) gets also compiled but not removed so that it can be imported. If you ever make a similar implementation to this one please share 🙏 P.D. I ended up with a solution that involves git submodules, but it isn't ideal because I can't run vue-tsc checks in any project that uses the CL. It fails when running tsc in the submodule, and if I remove the submodule from the tsc check then it fails because it's not able to find anything imported from the submodule... 😩

[@peoray]

Very insightful video. If I want to publish this to a normal (I guess public npm name), what would I do differently?

[@letstalkdev]

Thank you! Well you would need to add npm credentials to an .npmrc file, and make sure package.json isn't set to "private: true", and then just follow the docs for publishing.

[@dharnilm]

Hi, I liked your video lots but I am facing some issues with the end result. Is it ok to pick your brains about how to resolve This happens when I type

[@letstalkdev]

Hi and thank you for the feedback! Could you try running the library build script at least once, before starting it in dev / watch mode?

[@degradiranjepodcast6776]

Good tutorial, but missing the usage. Also, an advice - someone told you, or you have read somewhere that by waving your hands like this in front of the camera - that you are improving your authority, but you are just mingling with those hands in unnatural way so it becomes annoying :). Just and advice, don't take it personally.

[@letstalkdev]

Thanks for your feedback, will take into account!