State of Vue in Mid 2023: A Detailed Analysis

Introduction

Greetings, developers! This article will provide an in-depth analysis of Vue 3, a significant update to the popular JavaScript framework. We’ll explore its reactivity system, TypeScript integration, and the overall state of its ecosystem. However, the reception hasn’t been entirely positive. As of 2023, Vue’s reactivity system and TypeScript integration continue to pose challenges for some developers, and we’ll delve into why that is.

Vue’s Reactivity System and TypeScript: A Complex Relationship

Vue’s reactivity system is powerful, but its complexity can be intimidating, especially when integrating it with TypeScript. Vue 3 aimed to simplify this, but the results have been mixed. A significant change in Vue 3’s reactivity system is the introduction of Proxies. Proxies provide a more flexible and powerful way to observe and react to changes. However, they also introduce a new layer of complexity. This can be a hurdle for many developers, particularly those new to Vue or unfamiliar with the Proxy concept.

Both reactive and ref, two fundamental aspects of Vue’s reactivity system, are based on Proxies. The ref function, in particular, is used to create a reactive reference to a value. It wraps the value in an object with a single property .value, allowing it to be used directly in templates and be de-referenced automatically.

Vue 3’s Ecosystem: Lingering Beta Feelings

Despite its initial stable release on Sep 18, 2020, and being tagged as the default version on Feb 7, 2022, Vue 3’s ecosystem still feels like it’s in beta. This prolonged period of instability is a significant concern for developers and organizations alike. It’s a long time for a community to keep up with, and for many, it’s where things started to go wrong.

This situation contrasts sharply with the React ecosystem, which is vast, mature, and supported by a vibrant community. Many of Vue’s packages and tools, despite the passage of time, remain in beta. This can pose a significant challenge when trying to build a production-ready application, as the reliability and stability of these tools are crucial for maintaining a robust codebase. For example, Vue Router and Vuex, two essential tools in the Vue ecosystem, have had their fair share of issues during the transition to Vue 3.

// Vue Router example
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
})

In contrast, React Router has been a stable solution for routing in React applications. Here’s a simple example of how routing is done in React using React Router:

// App.tsx
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Let’s also take a look at how routing is handled in Svelte and SolidJS. In Svelte, we use the svelte-routing package to manage routes in our application:

// App.svelte
<script>
  import { Router, Link, Route } from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";

  export let url = "";
</script>

<Router {url}>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/blog">Blog</Link>
  </nav>
  <div>
    <Route path="/blog/:id" component={BlogPost} />
    <Route path="/blog" component={Blog} />
    <Route path="/about" component={About} />
    <Route path="/"><Home /></Route>
  </div>
</Router>

In SolidJS, we use the @solidjs/router package for routing. Here’s a simple example:

// SolidJS routing example
import { Routes, Route } from "@solidjs/router";

import Home from "./pages/Home";
import Users from "./pages/Users";

export default function App() {
  return (
    <>
      <h1>My Site with Lots of Pages</h1>
      <Routes>
        <Route path="/users" component={Users} />
        <Route path="/" component={Home} />
        <Route
          path="/about"
          element={<div>This site was made with Solid</div>}
        />
      </Routes>
    </>
  );
}

The extended beta phase of Vue’s ecosystem has led to a sense of uncertainty and hesitation among developers. It’s a stark reminder that a strong community and a stable ecosystem are just as important as the framework’s features and capabilities.

The Emergence of Alternatives: Svelte, SolidJS and More

Emerging frameworks like Svelte and SolidJS are gaining traction. They offer simplicity, performance, and a fresh take on reactivity that many developers find appealing. These alternatives are worth considering as they continue to grow and mature. For example, Svelte’s approach to reactivity is much simpler and more intuitive, making it a viable alternative for those frustrated with Vue’s reactivity system.

// Svelte reactivity example
let count = 0;
$: doubled = count * 2;
count += 1; // doubled is now 2

SolidJS, on the other hand, offers a fine-grained reactivity system similar to Svelte, but with a more React-like component model. Here’s a simple example of a reactive statement in SolidJS:

// SolidJS reactivity example
import { createSignal } from 'solid-js';

const [count, setCount] = createSignal(0);
const doubled = () => count() * 2;
setCount(count() + 1); // doubled() is now 2

Conclusion: Vue’s Position in the Modern JavaScript Landscape

Vue, while a powerful tool, is facing significant competition and challenges. Its reactivity system, despite its strengths, presents certain quirks when integrated with TypeScript. The ecosystem, though evolving, still lacks the stability of the well-established React community. Emerging frameworks like Svelte and SolidJS are providing compelling alternatives, making Vue’s position in the JavaScript landscape less certain than before.

Given the current landscape, would I choose Vue for a new project? Probably not. If I were seeking a better developer experience, I would lean towards Svelte or SolidJS. For a large-scale application, React, with its robust ecosystem, would be my choice. This doesn’t mean Vue is obsolete. It’s a tool with its unique strengths and use cases. The key is to understand when and where to use it. As it stands, Vue might be more suited for a smaller, more specific set of use cases than before.