Search

The Vue Ecosystem in 2024

Since its inception in February 2014, Vue has become one of the top JavaScript frameworks for building and maintaining web apps. It is a popular pick for many developers because of its philosophy of creating an approachable, performant, and versatile approach to building scalable apps.

Once you’ve chosen Vue to build your app, it’s important to consider what tools and libraries can help you ship features faster to users. While a lot has changed over the years, the addition of new features like the Composition API has introduced lots of exciting new changes to the ecosystem.  Let’s look at some of the popular tools and libraries used by the community today.

Getting Started with Vue

There are three primary approaches to scaffolding your Vue app:

  1. Content Delivery Network (CDN)
  2. Build Tools
  3. Using a meta-framework like Nuxt

CDN

While most JavaScript frameworks require a build toolchain to work, one of the great things about Vue is that it can be added directly on a page. No build tools necessary!

<!-- unpkg -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.25/dist/vue.global.min.js"></script>Code language: HTML, XML (xml)

Or if you’re already using ES modules, you can also use it as follows:

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  // or 'https://esm.sh/vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>Code language: HTML, XML (xml)

To learn more, check out the official docs.

Build Tools

When your app is ready for build tools (e.g., Vite, Rollup, webpack) and/or you want to use Single-File Components (*.vue), the best way is to use Vite for Vue 3 projects. Why Vite? It leverages both latest advancements in the ecosystem: the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages.

Fun fact, Vite was written by Evan You (founder of Vue), so naturally there’s a way to scaffold a Vue project with it!

npm create vue@latestCode language: Bash (bash)

To learn more about creating a Vue application with Vite, check out the official docs.

Meta-frameworks

For those interested in taking Vue beyond client-side rendering to other realms such as static-site generation (SSG), server-side rendering (SSR), and other rendering methods, you’ll want to start your project with scaffolding from popular meta-frameworks such as Nuxt.

npx nuxi@latest init <project-name>Code language: Bash (bash)

To learn more, check out the official docs for getting started with Nuxt.

That said, here are two other options I wanted to give a shoutout to:

Meta Framework

VitePress

A fantastic static site generator that uses Markdown to create beautiful docs in minutes (while powered by Vue theming for easy customization).

Meta Framework

Quasar

A cross-platform Vue meta-framework that comes with a lot things out of the box like Material components, various build modes, and much more.

Routing

When it comes to your routing solution in Vue, it’s a straightforward choice because Vue has an official library for routing, but a meta framework can help as well.

Meta Framework

Vue Router

This is the official router for Vue. Expressive, configurable and convenient routing.

Meta Framework

Nuxt

For those who love file-based routing, you’ll get that automatically in conjunction with Vue Router when you use Nuxt with no additional configuration needed.

If you’re interested in following or contributing to an up-and-coming extension on Vue Router that allows you to do file-based routing with TS support, be sure to keep an eye on unplugin-vue-router!

State Management

Similar to routing, Vue makes it easy for you by providing an official library for state management, but since state management is more particular to the requirements of an app and how a team approaches it, here are some popular options in the community.

State Management

Pinia

Pinia, formerly known as Vuex, is the official state management library for Vue. On top of being TypeScript-friendly, it takes a huge leap forward from the traditional redux pattern by eliminating the need for explicitly defining mutations. In other words, a lot less code while still being declarative!

State Management

XState

For those familiar with state machines, you’ll want to check out XState as an option for managing state within your app. As a bonus, a fantastic team backs it and has been a consistent favorite within the community.

State Management

TanStack Query

One of the major challenges that developers face with state management is around granular state management within the context of async calls. TanStack Query is a popular pick in the community for helping to manage this.

State Management

Composables

With the addition of the Composition API, Vue makes it easier than ever for developers to create their own state management solutions with composables. While this can be useful in certain scenarios, it’s recommended to use a standard like Pinia to ensure consistent patterns across teams.

Component Libraries

Selecting the right component library depends on your app’s requirements. Here are some popular libraries that aim to provide accessible components and are backed by good English documentation.

Component Library

PrimeVue

A powerful and flexible component library that contains styled and unstyled components to make it easier to cater to your app’s needs.

Component Library

Radix Vue

Unstyled and accessible components for building high‑quality design systems and web apps in Vue

Component Library

Quasar Components

UI components that follow Material Guidelines for those using Quasar.

Component Library

Vuetify

A longstanding favorite in the Vue community for Material components that has great docs.

Component Library

NuxtLabs UI

Fully styled and customizable components for those using Nuxt

Honorable Mentions

Component Library

Buefy

For those who love Bulma, this is in active development for Vue 3.

Component Library

Element Plus

A Vue 3 UI Library made by Element team with a strong Chinese and English community.

Component Library

BootstrapVue

For those who love Bootstrap, it’s not fully ready for Vue 3 at the time of publication, but keep an eye on this library.

Component Library

Vuestic UI — Vue 3 UI framework

A free and open source UI Library for Vue 3

Testing

When it comes to testing your app, here’s a quick overview of what the community is using.

Unit

Unit Testing

Vitest

No contest here. With most Vue projects being Vite based, the performance gain here over previous unit testing libraries like Jest is hard to ignore.

Component

There are three primary options for component testing depending on your use case:

Component Testing

Vitest

Vitest is great for components or composables that render headlessly.

Component Testing

Vue Testing Library

Vue Testing Library is light-weight solution for testing Vue components that provides light utility functions on top of @vue/test-utils.

Component Testing

Vue Test Utils

Vue Test Utils is another option for testing components and DOM.

Component Testing

Cypress Component Testing

Cypress is great for components whose expected behavior depends on properly rendering styles or triggering native DOM events.

E2E

While other tests are great, one of my mentors likes to say that there are only two tests that matter for any code base. 

  1. Can the user login?
  2. Can the user pay us?

Everything else is optional.  

And that’s where end-to-end (E2E) tests come into play. There are two primary candidates to choose from when selecting your E2E testing framework:

End to End Testing

Cypress

Cypress has been a longtime favorite of the community with its intuitive API and ability to run and debug tests directly in the browser.

End to End Testing

Playwright

Playwright has become another popular choice amongst the community as well for its ability to test across any browser or platform using a singular API.

For additional reading about testing in Vue, check out the official docs.

Mobile Development

Mobile Framework

Capacitor

You might be familiar with Ionic, a popular open-source UI toolkit for building mobile apps with web technologies. Well, Capacitor is the foundation that Ionic is built on top of which enables you to build the actual app.

It’s also backed by a team that have been great partners to the Vue community. Definitely worth checking out if you want to build a mobile app with Vue.

You can learn more at their official docs for Capacitor + Vue.

Mobile Framework

NativeScript

If you’re looking for a React Native equivalent in Vue, while there is no official support from the core team, NativeScript is a solution for building true native mobile apps with JavaScript.

Note: It’s currently in release candidate (RC) and not officially production ready, but it has been a past favorite for Vue 2 apps, so it’s included as an alternative to Capacitor.

To learn more or follow along, check out the official repo for NativeScript

Bonus Libraries

These libraries don’t have a distinct category of their own, but I wanted to give a special shoutout to the following libraries:

Bonus

VueUse

When it comes to utility libraries, VueUse gets the MVP award for providing an incredible assortment of useful abstractions for common functionality such as copying to clipboard, dark / light mode, local storage, and more.

Bonus

Petite-Vue

For those who need only a subset of Vue features and just want to sprinkle some interactivity onto a page, you definitely want to look into petite-vue, which is only ~6kb! 

Bonus

FormKit

Let’s face it. Forms are a big part of most web apps, whether you like it or not. FormKit is a library that aims to make the process easier by providing standards for things like form structure, generation, validation, and more.

Bonus

TresJS

TresJS is a library that aims to make building 3D experiences with Three.js and Vue a lot easier.

Looking Ahead

While I’ve highlighted some popular solutions in the ecosystem, I want to emphasize that at the end of the day, what matters most is choosing the right solution for your team and app. If the solution you and/or your team are using didn’t make it on this list, that doesn’t make it any less valid.

Finally, the reality is that the landscape for tooling and libraries is constantly changing. While it may seem like specific problems have “already been solved,” I assure you there is still much room for new ideas and improvements. The community is still ripe for contributions, and I hope to recommend something you build someday!

Wanna learn Vue deeply?

One response to “The Vue Ecosystem in 2024”

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.