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:

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.

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.

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.

Honorable Mentions

Testing

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

Unit

Component

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

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:

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

Mobile Development

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:

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!