The latest articles on DEV Community by Ulisses Ferreira (@ulissesferreira). https://dev.to/ulissesferreira https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F53637%2F61dd6dac-a31a-4b7a-8402-0aa164409099.jpg https://dev.to/ulissesferreira en Ulisses Ferreira Sun, 25 Jul 2021 21:58:39 +0000 https://dev.to/ulissesferreira/moon-vue-3-component-library-starter-vite-o52 https://dev.to/ulissesferreira/moon-vue-3-component-library-starter-vite-o52 <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3qyxriablq3z40p03e5g.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3qyxriablq3z40p03e5g.PNG" alt="Moon component library homepage"></a></p> <p>Hello Dev.to community 👋</p> <p>Today I wanted to share with you my latest side-project, a Vue 3 component library powered by Vite. </p> <p>As some of you might know Vue 3 is out and it's doing a great job offering a more lightweight alternative to React. I decided to dig into it only to find that most resources on the web are still talking about Vue 2.</p> <p>Having had to work on a component library at my job (using Vue 2) I decided to try and create one from scratch using the latest tech avaliable for Vue 3.</p> <p>My goal was to provide a perfectionist's dream setup with the fewest dependencies possible but including those that are really valuable for development.</p> <p>After researching about the best way to achieve this goal I settled with <a href="https://vitejs.dev/" rel="noopener noreferrer">Vite</a>.</p> <p>Using Vite's library mode and VitePress (a Vite powered VuePress) I created a low config component library with documentation included. I called it <a href="https://moon.ulissesferreira.dev/" rel="noopener noreferrer">🌙 Moon</a>. I believe my setup is easy to replicate and could provide value for others trying to create a component library for Vue 3. The fact that Vite uses <a href="https://esbuild.github.io/" rel="noopener noreferrer">esbuild</a> also provides a great developer experience with blazing fast build speeds.</p> <p>Currently the component library includes the following utilities:</p> <ol> <li>ES Modules + UMD build</li> <li>ESLint + Prettier setup with individual commands</li> <li> <a href="https://www.npmjs.com/package/rollup-plugin-visualizer" rel="noopener noreferrer">rollup-plugin-visualizer</a> that allows you to check your bundle size breakdown</li> <li>Blazing fast build speed.</li> <li>Least amount of config possible</li> </ol> <p>There are 13 components available and I intend to add some more that I feel are essential to most interfaces (like Tabs and Selects). These components were built with accessibility in mind, use as little JS as possible and try to keep the HTML markup as light as possible as well.</p> <p>I have already identified some possible improvements but I haven't had much time to work on them. Even though it's still a work in progress I am sure it will be of help for those researching about this topic.</p> <p>Feel free to fork it or take a look under the hood and get some inspiration for your own projects</p> <p><a href="https://github.com/ulissesferreira/moon" rel="noopener noreferrer">https://github.com/ulissesferreira/moon</a></p> vue