Getting Started with Monorepo, Linter, and Formatter
Start your monorepo journey! Learn how to set up a linter and formatter for streamlined coding and organizing your project.
Welcome! 👋
Initially, this series was intended to be a single article, but it soon became apparent that it would be too lengthy. Even GitHub didn't want to display it in the file tab of pull requests. Therefore, I decided to divide it into multiple articles to make it more digestible and to focus on each part individually.
This series is somewhat of a sequel to the article The Simplest Method to Create a Vue.js Component Library but adopts a more professional approach. You will learn how the most popular component libraries are constructed behind the scenes and how to create your own.
The Simplest Method to Create a Vue.js Component LibraryWhile it's still my preferred method when I am certain about what I want to achieve, I also received feedback from readers seeking more custom behavior and requiring more complex features.
That's understandable. While unbuild is a powerful tool, it cannot match the flexibility, plugin ecosystem, and adoption of Vite.
Throughout this series, we will address the following topics:
By the end of this series, you will have a complete Vue.js component library that you can use in your projects or share with the community, like a professional developer. Isn't that exciting? 😎
Feel free to comment below if you have any questions or suggestions. Let's get started!
Tip
If you're not familiar with component libraries, I recommend starting with the previous article to grasp the basics.
Start your monorepo journey! Learn how to set up a linter and formatter for streamlined coding and organizing your project.
Creating a simple Vue.js button component using Tailwind CSS for styling and variants, along with step-by-step library build configuration using Vite.
Learn how to configure TypeScript with multiple contexts and generate types for a library to expose types to developers.
Learn how to automate testing for Vue.js components using Vitest and Testing Library for efficient and user-focused testing.
Implement a CI pipeline with GitHub Actions and automate the release process to npm for Vue.js component libraries.
Learn how to create a playground and use Histoire to visualize and document your components in both isolated and combined scenarios.
Discover how to seamlessly integrate a Vue.js component library using Unplugin Vue Components and Nuxt Module, enhancing usability and developer experience.
Thanks for reading! My name is Estéban, and I love to write about web development.
I've been coding for several years now, and I'm still learning new things every day. I enjoy sharing my knowledge with others, as I would have appreciated having access to such clear and complete resources when I first started learning programming.
If you have any questions or want to chat, feel free to comment below or reach out to me on Bluesky, X, and LinkedIn.
I hope you enjoyed this article and learned something new. Please consider sharing it with your friends or on social media, and feel free to leave a comment or a reaction below—it would mean a lot to me! If you'd like to support my work, you can sponsor me on GitHub!