Between work, YouTube, and my Twitch livestreams, I have created a lot of Vue.js projects over the last several years. Of course, Vue has a lot of core libraries that I frequently use like Vuex, Vue Test Utils, and Vue Router. In this post, I want to highlight some of the other third-party libraries that are maintained by members of the Vue community which I have found very useful.

Vue Meta

vue-meta is a plugin for Vue.js which helps you to manage your app's metadata. You can set the page title and other metadata by setting variables directly in your components. I like that you can set  defaults in the parent components and overwrite them where you want in the children.

Vuelidate

There are a few good libraries for form validation in the Vue.js ecosystem, but I always found Vuelidate to be the easiest to use while still providing a robust options and enough flexibility for production applications. Importantly, it's great for validating variables nested inside of arrays and objects; which is not usually an easy thing to do.

You can see an example where I used this in my curriculum app project on Github.

Prime Vue

PrimeVue is a Vue component library that is one of the only ones to already be fully compatible (and production-ready) with Vue 3. It is MIT licensed and made from PrimeFaces, which is an open source UI component suite with wrappers for every major web framework. PrimeTek is the name of the company behind it.

I started using this library last year only because I wanted to use Vue 3, but it has really grown on me over time. Now I use it for almost every project; personally as well as professionally.

There are a few different parts of PrimeVue:

  • The core Vue.js components with Javascript and all related CSS styling
  • Theming: Can use a preset or their custom theme designer
  • PrimeFlex Grid system: Uses their own 12-column grid system and/or flexbox layouts
  • PrimeIcons: An icon set made for the Prime library

The library is quite large, but you don't have to use all of the different pieces, just import and use what you need. I usually import everything in development and figure out what I need as I go.

Some of my favorite things about this library:

  • There are so many components that cover almost every common need for front-end applications
  • They have a lot of options to handle complex elements like advanced data tables
  • It's very easy to customize the theme and overwrite the default styles

Vuex Persisted State

Vuex Persisted State is a library for persisting and rehydrating Vuex state so it doesn't reset with every page refresh. You basically just install it and add it to your Vuex plugins list and it just works out of the box. It's very convenient.

If you don't want to use the browser's localStorage API, you can use custom functions with whatever storage option you want.

Vue Multiselect

Almost every app I build seems to have complicated form needs with various kinds of dropdown. Vue Multiselect makes it easy to customize dropdown menus with search functionality, tagging, and many more options.

Here Are a Few More Great Libraries :)

These are projects that I sometimes use but didn't make the cut for my top 5:

Loading indicators

Directives for debouncing inputs

Did I miss any libraries or tools for Vue apps? Join my Discord and let me know: https://discord.gg/FYXuwQvh4z

Check out my YouTube channel and Twitch streams for more Vue.js content.
😁🤗❤️