This article is based on Vue 3 and Svelte 5.
Vue and Svelte took a long road of developing and becoming the state they are. Their API has changed, approaches and recommendations evolved. However, initially both frameworks took inspiration from the common predecessor – Ractive.js.
Internally, they work a little differently. While Vue.js tries to leverage reactivity in runtime, adding more fine grained control to the user, Svelte tries to put the vast majority of work to the compilation step, leaving a smaller blueprint in resulting code. Svelte is renowned for having better performance than other frameworks thanks to this approach.
Today I want to focus more on API and developing flow and show how Svelte excels Vue in some engineering scenarios. My idea is that svelte has a better API than Vue and allows you to write better quality code.
Advantage 1: Single method for state management.
Vue 3 has 2 functions for managing component state – ref and reactive. Both of these have many shared use cases though Vue docs suggest to rely on ref as a primary API for declaring state. This usually leads to confusion because both functions do very similar jobs. Moreover, mutation of ref objects usually requires accessing internal value property which adds boilerplate in accessing your actual data.
<script setup>
import { ref, reactive } from ‘vue’;
// Both approaches work. Which one should I choose…?
const refData = ref({ count: 3});
const reactiveData = reactive({ count: 3});
const onClick = () => {
// To update value you need to access value prop.
refData.value.count += 1;
};
</script>
<template>
<div>{{refData.count}}</div>
<div>{{reactiveData.count}}</div>
</template>
Svelte, on the contrary, has a single method for managing state. This approach helps alleviate all of the mentioned above confusion.
<script>
// Single approach for defining data
let refData = $state({count: 3});
const onClick = () => {
// Intuitive update
refData.count += 1;
};
</script>
<div>{refData.count}</div>
Advantage 2: Template syntax
While Vue uses an API similar to DOM attributes, Svelte uses special template syntax for conditional and loop rendering. This us how conditions looks in Vue:
<script setup>
import { ref } from ‘vue’;
const data = ref({ count: 3});
</script>
<template>
<div v-if=”data.count > 10″>Count is more than 10</div>
<div v-else-if=”data.count > 5″>Count is more than 5</div>
<div v-else>Count is less than or equal to 10</div>
</template>
And Svelte:
<script>
const data = $state({count: 3});
</script>
{#if data.count > 10}
<div>Count is more than 10</div>
{:else if data.count > 5}
<div>Count is more than 5</div>
{:else}
<div>Count is less than or equal to 5</div>
{/if}
As you can see, Svelte syntax feels more verbose and rather less convenient. With the learning of a new framework it is needed to also learn templating syntax of this framework. However this template syntax allows to do more complicated and interesting things in code, for example let’s consider listening for API response:
<script>
const promise = fetch(‘https://httpbin.org/get’).then(res => res.json());
</script>
{#await promise}
<p>…Pending</p>
{:then result}
<p style=”color: green”>{JSON.stringify(result)}</p>
{:catch error}
<p style=”color: red”>{error.message}</p>
{/await}
This is a special await template tag that handles typical web apps use cases – send API to backend and process response, displaying errors if any.
In Vue it would require writing error handling logic by hand and then rendering of the response in 2 places instead of 1. Of course wrapper could be created with similar behavior, but that wrapper would be likely surprising for other developers.
Another interesting template tag is snippet, which you can check in the docs and effectively provides convenient replacement of Vue slots.
Advantage 3: Integration with js libraries
The thing which is really magnificent in Svelte is the actions. They allow to easily integrate many js native libraries in the framework ecosystem and provide a simple and documented way to do that. Let’s start with the example:
<script>
// External js library
import tippy from ‘tippy.js’;
// Reusable action. Action receives actual DOM element as first param.
function tooltip(node, fn) {
$effect(() => {
const tooltip = tippy(node, fn());
return tooltip.destroy;
});
}
// … Your code start here
let content = $state(‘Tooltip text’);
</script>
<input bind:value={content} />
<!– This is how actions is applied –>
<button use:tooltip={() => ({ content })}>
Hover me
</button>
As you can see, this action is simple to write and the framework supports applying action with use:action instruction. While Vue allows writing similar code for integration with external libraries, there is no standardized way of applying these wrapper – would it be a Higher-order component, wrapper or reusable function?
Additional smaller niceties
– Debugging. Vue debugging usually requires installing additional instruments like Vue devtools to properly see component state in the console. Because Vue component state consists of proxy objects or wrappers, it requires some type conversion before printing in the console. While Svelte also has a component state wrapped in proxies , there are tools which allow convenient debugging. Let’s see how it works in Svelte
<script>
let numbers = $state([1, 2, 3, 4]);
let total = $derived(numbers.reduce((t, n) => t + n, 0));
function addNumber() {
numbers.push(numbers.length + 1);
// This will print a Proxy object. Not so useful.
console.log(numbers);
// This will print the origin object under Proxy.
console.log($state.snapshot(numbers));
}
// This will start tracking any changes and printing them to the console.
$inspect(numbers);
// Also prints stacktrace of this instruction
$inspect(numbers).with(console.trace);
</script>
<p>{numbers.join(‘ + ‘)} = {total}</p>
<button onclick={addNumber}>
Add a number
</button>
And the coolest part is that all $inspect calls are stripped in production code. $inspect and $state.snapshot shipped out of the box and don’t require any configuration.
– Props passing. Svelte handles component props more conveniently. Here is an example how Vue implement props passing:
<script setup>
import { ref } from ‘vue’;
const buttonName = ref(“Form button”);
const buttonClass = ref(“”)
const otherProps = ref({
onclick: () => console.log(‘button sent’),
disabled: false
});
</script>
<template>
<button
type=”submit”
:class=”buttonClass”
v-bind=”otherProps”
>Hit {{buttonName}}</button>
</template>
Vue has static props and dynamic props, which use different declarations(type, :class) and interpret their content in different ways. Also there is a custom directive v-bind for passing objects of props to a component.Additionally, Vue uses double curly braces for string interpolation. All of these subtleties are harder to memorize for newcomers On the contrary, svelte prefers more JSX like syntax for handling props:
<script>
const buttonName = $state(“Form button”);
const buttonClass = $state(“form-button”);
const otherProps = $state({
onclick: () => console.log(‘button sent’),
disabled: false
});
</script>
<button
type=”submit”
class=”{buttonClass}”
{…otherProps}
>Hit {buttonName}</button>
Svelte interprets the content of props in the same way whether a prop is static or dynamic. Also passing objects as props feels like JS code. String interpolation is also more consistent in props and between HTML tags – single curly braces in both places. There are less syntax variation thus making this approach easier to memorize.
Disadvantages
– Svelte provides less functionality in general. For example Svelte doesn’t have the Teleport component like in Vue. Some similar functionality like v-once, v-memo, v-cloak aren’t implemented in Svelte out of the box. Another example is that Map in Svelte is not reactive by default contrary to Vue and require installation of additional dependency – svelte/reactivity.
– At the time of this article (Nov, 2024), Svelte docs don’t talk much about internals. Also there is little info regarding code performance optimization. On the contrary, Vue has great articles(1, 2) explaining implementation details. This creates an illusion of simplicity and doesn’t explain how to resolve performance issues in the future.
Conclusion
In conclusion, main Svelte has the advantage that in many scenarios it provides a good and only method of getting the job done while Vue offers more alternatives and adds cognitive load when developers need to decide how to implement a feature. Also Svelte documentation is clear and simple with many examples and demos.
The drawback of Svelte is custom template language which seems a bit off from regular javascript thus making it harder to memorize and use.
Providing less alternative ways for doing a task make Svelte more predictable, easier to use and integrate.
About the Author
Akim Mamedov is the CTO at Bonanza Kreep. With a deep background in front-end frameworks, system design, and developer experience, Akim actively explores the evolution of modern JavaScript tooling. His work bridges hands-on engineering insights with strategic decision-making in tech ecosystems.