Vue 2 to Svelte
Vue 2 to Svelte

Migrating from Vue 2 to Svelte: A Comprehensive Analysis


After relying on Vue 2 as our front-end framework for nearly two years, the announcement of discontinuation in support led us to explore alternative frameworks. The choice boiled down to Vue 3 or Svelte, with our primary goals being to enhance developer experience, specifically focusing on type checking, performance, and build times. React was not considered due to the steep learning curve and lack of out-of-the-box solutions, unlike Vue and Svelte. Both Vue and Svelte share the concept of single-file components, incorporating logic (JavaScript), structure (HTML), and style (CSS) in a unified file. This article delves into our decision-making process and the subsequent migration to Svelte.

1. Svelte Versus Vue 3

1.1 Retention Ratio

In our evaluation, Svelte demonstrated a higher retention ratio than Vue 3, based on data from the State of JS survey over the past five years. Svelte secured the 2nd position, indicating a greater willingness among developers to use it again, whereas Vue 3 occupied the 4th position.

1.2 Typing

Svelte outshone Vue 3 in terms of typing. It offered a superior typing experience with easier component design processes and built-in typed events, contributing to a more user-friendly development environment.

1.3 Restricted Global Access

Svelte’s ability to import enums from other files and use them in templates sets it apart from Vue 3, providing a more flexible and convenient development approach.

2. Escape Benchmark about Frontend Stack

2.1 Syntax

The Svelte syntax was deemed more elegant and user-friendly compared to Vue. A side-by-side comparison of code blocks illustrated the concise and clear syntax of Svelte, showcasing its simplicity and readability.

2.2 No Extra HTML Div

Svelte allows direct HTML writing without the need for extra div elements in the template, promoting a cleaner and more straightforward structure. Additionally, Svelte automatically scopes styles, enhancing maintainability and avoiding CSS side effects.

2.3 Computed Properties

In Svelte, the update of data does not require computed properties, providing a more straightforward coding experience. The focus remains on writing arrow functions, simplifying the code structure.

2.4 Simpler to Add Pure JS Plugins

The integration of pure JavaScript plugins, demonstrated through a syntax highlighting example with Svelte and Prism.js, showcased the simplicity and flexibility of adding external functionalities.

2.5 Compiling Code Without Virtual DOM

The reduction in layers between the browser and the app in Svelte results in optimized and faster task completion compared to Vue, which relies on a virtual DOM.

2.6 Automatic Updates

Svelte’s use of declared variables enables automatic updates, eliminating the need to wait for changes to be reflected in the virtual structure and providing a superior user experience.

3. Svelte’s Cons

While Svelte presented compelling advantages, it is essential to acknowledge its cons, including a relatively small community, given its emergence in 2019. However, the community and support may grow over time as developers recognize its merits.

4. Migration Process

4.1 Timing

The migration from Vue to Svelte was initiated in August during a period of lower app usage, ensuring minimal disruption.

4.2 Duration

The migration spanned two weeks, with two front-end developers working full-time for two weeks, accompanied by another developer working full-time for one week, involving a total of three developers.

4.3 Workflow

The migration process involved using the Notion tool to assign tickets to developers, creating new components in Storybook, and distributing pages among developers for rewriting in Svelte.

4.4 Risk Factors

As a startup with a manageable number of files, the migration process was expedited. However, the decision to migrate to SvelteKit during its active development phase posed challenges, necessitating significant adjustments a month after the transition. The SvelteKit team provided a command and detailed migration guide, facilitating adaptation to the new update.

5. Files & Components Organization

SvelteKit’s “folder-based routing” brought organizational benefits, allowing the splitting of pages into sub-pages and facilitating the reuse of standard variable names. Layouts integrated into associated routes enhanced organizational clarity within the project tree.

6. Gains from Migrating to Svelte

In addition to the benefits highlighted earlier, the migration to Svelte yielded several key advantages:

6.1 Increased and Smoother Performance

Compiled Svelte applications demonstrated lightweight characteristics, resulting in faster loading speeds compared to frameworks with embedded runtimes.

6.2 Better Developer Experience

SvelteKit’s utilization of the Vite bundler, a new generation JavaScript build tool, contributed to an enhanced developer experience, leveraging the latest JavaScript technologies.

6.3 Faster Code Execution

The absence of a virtual DOM in Svelte eliminated a layer, accelerating code execution and contributing to faster page changes.

6.4 Up and Running Server-side Rendering (SSR)

SvelteKit’s SSR capability ensured efficient platform operation even for users with limited internet connectivity or disabled JavaScript, allowing the loading of webpages with maintained interactivity.

6.5 Concise and Easy-to-understand Code

Svelte’s compilation of logic, structure, and style into a single .svelte file facilitated the creation of readable, maintainable, and component-oriented code.

6.6 Fixed Type Checking

The migration to Svelte resolved initial type checking issues, eliminating recurrent notifications and Sentry errors, thereby enhancing code stability.


In conclusion, the migration from Vue 2 to Svelte proved to be a strategic decision, driven by the advantages Svelte offered in terms of syntax, typing, and overall development experience. Despite the challenges associated with migrating to an actively developed framework, the benefits of improved performance, better developer experience, and concise code outweighed the initial hurdles. As SvelteKit stabilizes and gains community support, it stands as a robust choice for front-end development.

The Good and The Bad of Xamarin Mobile Development
Post On November 29, 2023 | By Anna James

The Good and The Bad of Xamarin Mobile Development

In the realm of iOS and Android app development, the usual suspects are Objective-C, Swift, and Java. However, there’s a contender that often flies under the radar—Xamarin. This article dives deep into the world of Xamarin, conducting a thorough review and comparing it to both native and cross-platform mobile development solutions available in the market.Read more

Everything that is Wrong with Xamarin
Post On November 29, 2023 | By Anna James

Everything that is Wrong with Xamarin

In the ever-evolving landscape of mobile app development, developers are constantly seeking efficient tools that streamline their workflow. Xamarin, however, has emerged as a controversial choice for many developers. Having worked with Xamarin for the past seven months, I’ve encountered numerous challenges and pitfalls that make it less than ideal for modern app development. TL;DR:Read more

Is Java Dead
Post On November 28, 2023 | By Paul Johnson

Is Java Dead? Java Jobs in 2023

The Ever-Present Java: Navigating Its Landscape in 2023 Introduction Java, a stalwart in the programming world, has not only weathered the storm of technological evolution but continues to thrive as one of the most widely used languages globally. As we approach 2023, it’s imperative to delve into the current state of Java, analyzing its positionRead more

Brands we WORK with

2013 - 2023 Foreignerds Inc. All Rights Reserved