10 Years of Vue: the Past and the Future

Rate this content
Bookmark
Vue.js Live 2024 highlighted Vue's journey over the past decade. With 9,326 commits and 493 versions released, Vue has grown to serve 2 million users worldwide. Vue.js introduced tracking-based reactivity and a balance between template syntax and manual render functions. The Vue 3 ecosystem, including Vite, continues to thrive with performance improvements and new features like Vapor mode. Vue remains independent, focusing on user interests. The latest release, Vue 3.4, brought performance boosts, and Vue 3.5 will enhance reactivity efficiency. The Vue community's support is vital for ongoing development and innovation.

From Author:

Vue was first publicly announced in 2014 and is 10 years old this year! In this talk, we will take a look back together at how it changed and evolved from its humble beginnings, discuss some of the challenges and learnings, and how we think about its future.

This talk has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.

FAQ

Vue.js Live 2024 is an event where Evan Yew, the creator of Vue and Vite, shares a retrospective on the 10-year history of Vue.js, including its impact, evolution, and future directions.

As of Vue.js Live 2024, Vue has over 9,326 commits and has released over 493 versions.

Vue.js has over 2 million users worldwide, 250,000 GitHub stars, 4.9 million weekly npm downloads, and over 1 billion monthly CDN requests on jsdeliver.

Vue.js introduced deep tracking-based reactivity, single-file components with build tools, and a compiler-powered reactivity sugar called reactivity transform. It also supports both template and virtual DOM render functions.

Vue.js was first released in 2013, with its public announcement in February 2014.

Vue is unique in being a mainstream framework that remains independent, not dominantly owned by a single corporation. This ensures that the framework operates solely considering the interests of its users without influence from a single financial backer.

As of Vue.js Live 2024, Vue 3 usage has increased by 77.6% over the past year, constituting over 58.3% of total npm usage.

Vue 3.4 introduced a completely rewritten posture that is two times faster, a more efficient reactivity system, and significant server-side rendering performance improvements.

Planned features for Vue 3.5 include more reactivity efficiency improvements, stabilizing reactive props de-structure, and stabilizing suspense for server-side rendering.

Vapor mode is an advanced implementation for Vue.js that focuses on component implementation and interop between vapor and virtual DOM. It is led by Kevin and aims to enhance the development experience.

Evan You
Evan You
29 min
25 Apr, 2024

Comments

Sign in or register to post your comment.
  • Hodadis  Birhan
    Hodadis Birhan
    This a great showcase for vue communities and developers how the Vue is improved with promising features that help developers to build best performance and secured web application easily.

Video Transcription

1. Introduction to Vue.js Live 2024

Short description:

Hello everyone and welcome to Vue.js Live 2024. I'm Evan Yew, the creator of Vue and Vite. Today I'm super excited to share with you a 10 years retrospective on Vue.js. Vue is already 10 years old. In this talk, we'll see the history of Vue, its technical impact, and how we are keeping it alive. Vue has over 9,326 commits, 493 versions released, 2 million users worldwide, 250,000 GitHub stars, 4.9 million weekly npm downloads, and 1 billion monthly CDN requests on jsdeliver. Vue was the first framework to do tracking-based reactivity, combine single-file components with build tools, and explore a compiler-powered reactivity sugar. Vue also supports both template and virtual DOM render functions.

Hello everyone and welcome to Vue.js Live 2024. I'm Evan Yew, the creator of Vue and Vite. Today I'm super excited to share with you a 10 years retrospective on Vue.js. Yes, you heard that right. Vue is already 10 years old. Sounds like a very long time in front-end world. And of course, Vue is no longer a new technology, but in this talk we'll see some of the history of it and we'll also see what we're doing to Vue to keep it alive and well.

Okay, let's dive right into it. First of all, Vue's today in some numbers. Here are some stats of combined Vue.js slash Vue and Vue.js slash Core combined stats on GitHub. We have today over 9,326 commits across the two repositories. We have released over 493 versions of Vue. We have over 2 million users worldwide, 250,000 GitHub stars, 4.9 million weekly npm downloads, and over 1 billion monthly CDN requests on jsdeliver.

And we also want to talk about some of the technical impact of Vue, because despite using it day to day, maybe a lot of new users today aren't as familiar with the history of it and what ideas first came out of Vue and what ideas kind of influenced other technologies, right? Back in 2014, Vue was the first JavaScript framework to do deep tracking-based reactivity. Now, tracking-based reactivity is a paradigm that dates all the way back to Knockout.js and Meteor Tracker. That's an even older technology than Vue, but Vue was the first one to apply this principle into deep objects. So you can have an object mutated and things just work, and Vue was the first framework to do that. Vue was also the first framework to combine the idea of single-file components with build tools. The idea of single-file components isn't necessarily new. There was in fact an internal project at Google when I was working there, it was a source of inspiration. But Vue was the first one to combine this idea with a build tool called Browserify Backend, and later on, we also supported Webpack. But the ability of single-file components with build tools, the uniqueness of that is that we can use additional languages in these script blocks or template or style blocks. So you can use CoffeeScript back then, today you can mostly use TypeScript, you can use SAS, LASP, preprocessors, you can use PostCSS to process your CSS, you can even use POD, which was called Jade back then, different templates in text with templates. So Vue was the first framework to support this kind of usage. And Composition API was the first to combine Signo style reactivity, which is also the tracking-based reactivity that we talked about earlier, with modern component models. So you can use Vue refs in a script setup syntax with modern component models, and Vue was the first to actually combine that model into the model component model that we are all familiar with today. And Vue was also the first to explore a compiler-powered reactivity sugar for Signos in the form of the reactivity transform, which was an experimental proposal that we ran with for a period of time, but in the end we decided that it was not the best direction for Vue. However, we are actually pretty happy to see that this direction is being picked up by other frameworks, for example, Svelte 5, that actually is also exploring this direction. So it might be a better fit for Svelte, but we believe Vue is in a pretty good place with its own paradigm. Now, Vue is also unique in supporting both template and virtual DOM render functions.

2. Vue's Impact and Timeline

Short description:

Vue offers a balance between template syntax and manual render functions. Vue pioneered the concept of a progressive framework, allowing incremental adoption. The timeline of Vue includes the first release in 2013, reaching 1.0 in 2015, and the major rewrite in 2.0 in 2016. The work on Vue 3 started in 2018 and was soft launched in 2020 before becoming the default version in 2022. Vue 2 reached end of life in 2023. The technology adoption cycle includes triggers, expectations, disillusionment, enlightenment, and productivity.

This affords a very good balance that offers familiarity for users who prefer the template syntax and a smoother developer experience for people who prefer HTML-style templates. But at the same time, in advanced use cases and for library authors, you can still skip the template layer and drop down into manually writing render functions that gives you a lot more flexibility in doing advanced features.

And finally, Vue pioneered the concept of the progressive framework, the idea of a framework that is not monolithic, the idea that a framework can be made up of individual pieces but with a coherent design that you can adopt and use incrementally based on how much you need from the framework. I believe Vue is the first one to pioneer this idea, and it's also the only one that has implemented it really well.

Now, looking back, here's a brief timeline of what Vue did. We did the first release with the name Vue.js in 2013. That was the first time the name Vue.js ever appeared. But the public announcement was in February 2014. It remained as a side project for me for a very long time, and it took quite some time for me to polish it enough to feel comfortable, to feel confident to share it with the world. In October 2015, we reached 1.0. I actually took a long break in order to push it towards 1.0. And after 1.0, the template syntax largely set. In 2.0, we did the major rewrite, which we implemented the rendering to use virtual DOM, and was released in October 2016. 2016 was also the year that I started working on Vue full-time. Now, the work on Vue 3 actually started in September 2018. That was a very long time ago. But 3.0 took much, much longer than expected because of the scale of changes and the scale of impact on the ecosystem it created. Vue 2 was already very, very widely used, and the work on 3.0 was a learning process for us. There were definitely ups and downs, mistakes that were made, and lessons learned. So 3.0 was soft launched in September 2020, and eventually became the default version in January 2022. So the whole process took a few years. But we are really happy that the ecosystem has finally embraced Vue 3, and we'll see some stats later. So Vue 2 has officially reached end of life in December 2023. And we really encourage users who are still on Vue 2 to consider upgrading, or you should seek out relevant support to keep your Vue 2 versions running.

Now, so this was a really kind of like a nostalgic moment where I still have this blog post up somewhere talking about the first week of launch of Vue.js, and I was really happy that I got a few hundred GitHub stars in the first week, which was a great achievement for me back then. But after the initial launch, right, there were the moments, there were ups and downs where the reality hits. So I don't know if anyone has heard of the technology adoption cycle. There is, whenever a new technology comes out, there is a technology trigger. There's a peak of inflated expectations. Then there's the trial of disillusionment, slope of enlightenment, and finally you reach the plateau of productivity.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.