Top 10 Vue Components Libraries

Monday 6th March, 2023 —

Every developer knows that building a project from scratch is a time-consuming process. At, we've' using Vue for a long time and we have built a lot of projects with it. We often see developers complaining about the Vue ecosystem, when it's sometimes hard to find a good library, compare to React. However, we still think that the Vue community has a lot to offer.

In this article, we will cover some of our most loved open-source vue components / composables libraries that will help you to build solid projects with amazing features, incredibly fast, and also featuring a great developer and user experience.

We carefully picked libraries that are well maintained and have a good documentation. Also note that Tailwind CSS, touch and accessibility support are some of the most important features that should be included, regarding the way we build things.


Headless UI

pnpm add @headlessui-vue

Unstyled, fully accessible UI components.

We always need to render custom dropdowns, modals, etc. Headless UI is a great library that will help you building your own UI components. It is fully accessible and has a great documentation.



pnpm add v-calendar

An elegant calendar and datepicker plugin for Vuejs.

When we need to render a calendar or a datepicker, we always use v-calendar. It is very easy to use and has a lot of features. It is also very customizable, if you take the time to dive in their documentation.


Vue Flow

pnpm add @vue-flow/core

A highly customizable Flowchart component.

Rendering flowcharts is a not a fairly common task. But when we need to do it, we use vue-flow. Everything is hackable and you can customize it as you want.


Advanced Cropper

pnpm add vue-advanced-cropper

A complete tool set to crop images.

Having a preview of an image before uploading it is a great feature. We use vue-advanced-cropper to let users crop their images before uploading them.


Floating UI

pnpm add @floating-ui/vue

Tooltip and popover positioning for vue, successor of popper.js.

Positioning a tooltip or a popover while taking care of the viewport is a hard task. Popper.js is a great library that does this for you. Floating UI is a wrapper around this library and makes it a great choice in a vue context.


Smooth DnD

pnpm add vue3-smooth-dnd

A powerfull wrapper for proven smooth dnd library

Reordering items in a list with drag and drop makes your app more user friendly. smooth-dnd was created for this. Vue3-smooth-dnd is a wrapper for this library nad makes it very easy to use with Vue.



pnpm add splitpanes

Simple and touch-ready panes splitter / resizer.

Creating fancy layouts with draggable panes is a great way to improve user experience. Splitpanes is here to save you time.


Vue Focus Trap

pnpm add focus-trap focus-trap-vue

Trap focus within a DOM node.

When you have some form that appears on top of the page content (ex: in a modal, or a drawer), you need to trap the focus inside the form so that the user can't tab outside the form. focus-trap-vue is a great library that will help you with this kind of problem.


Vee Validate

pnpm add vee-validate zod @vee-validate/zod

Flexible form validation tool set.

In every project, we need to validate forms and give feedback to the user about what he's been doing wrong. Vee-validate provide a powerful composition API with great support for Zod.


Virtual Scroller

pnpm add vue-virtual-scroller

Render large elements in scrollable view.

Having a lot of elements in a list can slow down your app. Vue-virtual-scroller is a great library that will help you to render only the elements that are visible in the viewport.

We hope you found this article useful. We didn't include pinia, vueuse or vue-i18n as we consider everyone should already be using them!

Let us know in the comments what are your favorites!

Bonus: You may have noticed that we use pnpm instead of npm. The short story is that it saves a lot of time and disk space. Since Node +16.15, you can activate it using corepack enable and corepack prepare pnpm@latest --activate

Back to Blog

Continue reading

Server Cache Invalidation in Nuxt and Nitro

Top 10 Vue Components Libraries

How to build a filterable list with Nuxt and Tailwind