{"id":1849,"date":"2024-05-02T10:49:50","date_gmt":"2024-05-02T16:49:50","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1849"},"modified":"2024-05-05T07:42:17","modified_gmt":"2024-05-05T13:42:17","slug":"the-vue-ecosystem-in-2024","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-vue-ecosystem-in-2024\/","title":{"rendered":"The Vue Ecosystem in 2024"},"content":{"rendered":"\n

Since its inception in February 2014, Vue<\/a> 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<\/a> of creating an approachable, performant, and versatile approach to building scalable apps.<\/p>\n\n\n\n

Once you\u2019ve chosen Vue to build your app, it\u2019s 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<\/a> has introduced lots of exciting new changes to the ecosystem.  Let\u2019s look at some of the popular tools and libraries used by the community today.<\/p>\n\n\n\n

Getting Started with Vue<\/h2>\n\n\n\n

There are three primary approaches to scaffolding your Vue app:<\/p>\n\n\n\n

    \n
  1. Content Delivery Network (CDN)<\/li>\n\n\n\n
  2. Build Tools<\/li>\n\n\n\n
  3. Using a meta-framework like Nuxt<\/li>\n<\/ol>\n\n\n\n

    CDN<\/h3>\n\n\n\n

    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!<\/p>\n\n\n

    <!-- unpkg --><\/span>\n<script<\/span> src<\/span>=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"<\/span>><\/span><\/script<\/span>><\/span>\n\n<!-- jsdelivr --><\/span>\n<script<\/span> src<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.4.25\/dist\/vue.global.min.js\"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Or if you\u2019re already using ES modules, you can also use it as follows:<\/p>\n\n\n
    <script<\/span> type<\/span>=\"module\"<\/span>><\/span>\n  import<\/span> { createApp, ref } from<\/span> 'https:\/\/unpkg.com\/vue@3\/dist\/vue.esm-browser.js'<\/span>\n  \/\/ or 'https:\/\/esm.sh\/vue'<\/span>\n\n  createApp({\n    setup() {\n      const<\/span> message = ref('Hello Vue!'<\/span>)\n      return<\/span> {\n        message\n      }\n    }\n  }).mount('#app'<\/span>)\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Build Tools<\/h3>\n\n\n\n
    When your app is ready for build tools (e.g., Vite, Rollup, webpack) and\/or you want to use Single-File Components<\/a> (*.vue), the best way is to use Vite<\/a> for Vue 3 projects. Why Vite?<\/a> 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.<\/p>\n\n\n\n
    Fun fact, Vite was written by Evan You<\/a> (founder of Vue), so naturally there’s a way to scaffold a Vue project with it!<\/p>\n\n\n
    npm create vue@latest<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    Meta-frameworks<\/h3>\n\n\n\n
    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<\/a>.<\/p>\n\n\n
    npx nuxi@latest init <project-name><\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    That said, here are two other options I wanted to give a shoutout to:<\/p>\n\n\n\n
    \n
    \n
    \n
    \n  Meta Framework\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    VitePress<\/a><\/h4>\n\n\n\n
    A fantastic static site generator that uses Markdown to create beautiful docs in minutes (while powered by Vue theming for easy customization).<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n  Meta Framework\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Quasar<\/a><\/h4>\n\n\n\n
    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.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    Routing<\/h2>\n\n\n\n
    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.<\/p>\n\n\n\n
    \n
    \n
    \n
    \n  Meta Framework\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vue Router<\/a><\/h4>\n\n\n\n
    This is the official router for Vue. Expressive, configurable and convenient routing.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n  Meta Framework\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Nuxt<\/a><\/h4>\n\n\n\n
    For those who love file-based routing, you’ll get that automatically in conjunction with Vue Router when you use Nuxt<\/a> with no additional configuration needed.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    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<\/a>!<\/p>\n\n\n\n
    State Management<\/h2>\n\n\n\n
    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.<\/p>\n\n\n\n
    \n
    \n
    \n
    \n  State Management\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Pinia<\/a><\/strong><\/h4>\n\n\n\n
    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!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  State Management\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    XState<\/a><\/strong><\/h4>\n\n\n\n
    For those familiar with state machines, you’ll want to check out XState<\/a> 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.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n  State Management\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    TanStack Query<\/a><\/strong><\/h4>\n\n\n\n
    One of the major challenges that developers face with state management is around granular state management within the context of async calls. TanStack Query<\/a> is a popular pick in the community for helping to manage this.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  State Management\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Composables<\/a><\/strong><\/h4>\n\n\n\n
    With the addition of the Composition API, Vue makes it easier than ever for developers to create their own state management solutions with composables<\/a>. While this can be useful in certain scenarios, it’s recommended to use a standard like Pinia to ensure consistent patterns across teams.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    Component Libraries<\/h2>\n\n\n\n
    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.<\/p>\n\n\n\n
    \n
    \n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    <\/a>PrimeVue<\/a><\/h4>\n\n\n\n
    A powerful and flexible component library that contains styled and unstyled components to make it easier to cater to your app’s needs.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \n
    \"\"<\/figure>\n\n\n\n
    Radix Vue<\/a><\/h4>\n\n\n\n
    Unstyled and accessible components for building high\u2011quality design systems and web apps in Vue<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Quasar Components<\/a><\/h4>\n\n\n\n
    UI components that follow Material Guidelines for those using Quasar<\/a>.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vuetify<\/a><\/h4>\n\n\n\n
    A longstanding favorite in the Vue community for Material components that has great docs.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    NuxtLabs UI<\/a><\/h4>\n\n\n\n
    Fully styled and customizable components for those using Nuxt<\/a><\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    Honorable Mentions<\/h3>\n\n\n\n
    \n
    \n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Buefy<\/a><\/h4>\n\n\n\n
    For those who love Bulma<\/a>, this is in active development for Vue 3.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Element Plus<\/a> <\/h4>\n\n\n\n
    A Vue 3 UI Library made by Element team with a strong Chinese and English community.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    BootstrapVue<\/a><\/h4>\n\n\n\n
    For those who love Bootstrap<\/a>, it’s not fully ready for Vue 3 at the time of publication, but keep an eye on this library.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  Component Library\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vuestic UI \u2014 Vue 3 UI framework<\/a><\/h4>\n\n\n\n
    A free and open source UI Library for Vue 3<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    Testing<\/h2>\n\n\n\n
    When it comes to testing your app, here’s a quick overview of what the community is using.<\/p>\n\n\n\n
    Unit<\/h3>\n\n\n\n
    \n
    \n
    \n
    \n  Unit Testing\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vitest<\/a><\/h4>\n\n\n\n
    No contest here. With most Vue projects being Vite<\/a> based, the performance gain here over previous unit testing libraries like Jest<\/a> is hard to ignore.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    <\/div>\n<\/div>\n\n\n\n
    Component<\/h3>\n\n\n\n
    There are three primary options for component testing depending on your use case:<\/p>\n\n\n\n
    \n
    \n
    \n
    \n  Component Testing\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vitest<\/a><\/h4>\n\n\n\n
    Vitest is great for components or composables that render headlessly.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    \n  Component Testing\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vue Testing Library<\/a><\/h4>\n\n\n\n
    Vue Testing Library is light-weight solution for testing Vue components that provides light utility functions on top of @vue\/test-utils.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n  Component Testing\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Vue Test Utils<\/a><\/h4>\n\n\n\n
    Vue Test Utils is another option for testing components and DOM.<\/p>\n\n\n\n
    \n
    \n  Component Testing\n<\/header>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n
    Cypress Component Testing<\/a><\/h4>\n\n\n\n
    Cypress is great for components whose expected behavior depends on properly rendering styles or triggering native DOM events.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    E2E<\/h3>\n\n\n\n
    While other tests are great, one of my mentors likes to say that there are only two tests that matter for any code base. <\/p>\n\n\n\n
      \n
    1. Can the user login?<\/li>\n\n\n\n
    2. Can the user pay us?<\/li>\n<\/ol>\n\n\n\n
      Everything else is optional.  <\/p>\n\n\n\n
      And that\u2019s where end-to-end (E2E) tests come into play. There are two primary candidates to choose from when selecting your E2E testing framework:<\/p>\n\n\n\n
      \n
      \n
      \n
      \n  End to End Testing\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      Cypress<\/a><\/h4>\n\n\n\n
      Cypress has been a longtime favorite of the community with its intuitive API and ability to run and debug tests directly in the browser.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
      \n
      \n
      \n  End to End Testing\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      Playwright<\/a><\/h4>\n\n\n\n
      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.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
      For additional reading about testing in Vue, check out the official docs<\/a>.<\/p>\n\n\n\n
      Mobile Development<\/h2>\n\n\n\n
      \n
      \n
      \n
      \n  Mobile Framework\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      Capacitor<\/a><\/strong><\/h4>\n\n\n\n
      You might be familiar with Ionic<\/a>, a popular open-source UI toolkit for building mobile apps with web technologies. Well, Capacitor<\/a> is the foundation that Ionic is built on top of which enables you to build the actual app.<\/p>\n\n\n\n
      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.<\/p>\n\n\n\n
      You can learn more at their official docs for Capacitor + Vue<\/a>.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
      \n
      \n
      \n  Mobile Framework\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      NativeScript<\/a><\/strong><\/h4>\n\n\n\n
      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.<\/p>\n\n\n\n
      Note: <\/em><\/strong>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.<\/p>\n\n\n\n
      To learn more or follow along, check out the official repo for NativeScript<\/a><\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
      Bonus Libraries<\/h2>\n\n\n\n
      These libraries don’t have a distinct category of their own, but I wanted to give a special shoutout to the following libraries:<\/p>\n\n\n\n
      \n
      \n
      \n
      \n  Bonus\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      VueUse<\/a><\/strong><\/h4>\n\n\n\n
      When it comes to utility libraries, VueUse<\/a> 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.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
      \n
      \n  Bonus\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      Petite-Vue<\/a><\/strong><\/h4>\n\n\n\n
      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<\/a>, which is only ~6kb! <\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
      \n
      \n
      \n  Bonus\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      FormKit<\/a><\/strong><\/h4>\n\n\n\n
      Let’s face it. Forms are a big part of most web apps, whether you like it or not. FormKit<\/a> is a library that aims to make the process easier by providing standards for things like form structure, generation, validation, and more.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
      \n
      \n  Bonus\n<\/header>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \n
      TresJS<\/a><\/strong><\/h4>\n\n\n\n
      TresJS<\/a> is a library that aims to make building 3D experiences with Three.js<\/a> and Vue a lot easier.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
      Looking Ahead<\/h2>\n\n\n\n
      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<\/strong>. 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.<\/p>\n\n\n\n
      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!<\/p>\n","protected":false},"excerpt":{"rendered":"
      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.<\/p>\n
      Let\u2019s look at some of the popular tools and libraries used by the community today.<\/p>\n","protected":false},"author":22,"featured_media":1852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[168],"class_list":["post-1849","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-vue"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/ecosystem-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1849"}],"version-history":[{"count":34,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1849\/revisions"}],"predecessor-version":[{"id":2055,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1849\/revisions\/2055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1852"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    To learn more, check out the official docs for getting started with Nuxt<\/a>.<\/p>\n\n\n\n
    To learn more about creating a Vue application with Vite, check out the official docs<\/a>.<\/p>\n\n\n\n
    To learn more, check out the official docs<\/a>.<\/p>\n\n\n\n