Svelte vs Vue

[karchung0930]

Personally I prefer Svelte in term of syntax. For example:

• I don't need to add .value to access the reactivie value inside the script tag.
• I don't need to wrap HTML inside a template tag
• I don't need to write the scoped keyword for style tag
• Simpler and uniform way of defining props ( if you check out the doc for defining props in Vue then you will know what I means )
• Computed value can be as simple as $derived() instead of computed(() => )
• I don't need to maunally import some of the most use function such as $state

But there are also pros of Vue I think is better:

• The markup is simpler

<!-- Vue -->
<h1 v-if="awesome">Vue is awesome!</h1>

<!-- Svelte -->
{#if awesome}
    <h1>Svelte is awesome!</h1>
{/if}

And also:

<!-- Vue -->
<button@click="console.log('clicked')">click me</button>

<!-- Svelte -->
<button onclick={() => console.log('clicked')}>click me</button>

• Debug is easier since if anything goes wrong at runtime, the frontend will show me warning with beautiful and useful information. For Svelte, it's just blank screen. Often I have to open the console and most of the time I have to guess what's goes wrong since the information isn't really useful.

The above is my experience of development. For performance, I prefer Svelte too.
But one more thing, Often developers of Vue will use Nuxt too. Where I find the auto import really saves me ton of times!

For my past companies, I have recommend them to use Svelte because its performance is great and save time during development.
But they always said Svelte is still not mature and not seeing big company using it and thus not confident.

My question is, to be honest. Sometimes I also struglling choosing between Svelte and Vue when starting a new project.
Could you provide a solid comparison between Svelte and Vue, along with the reasons behind their differences, to help me and other developers who are struggling to choose between them?

Many thanks!

[david-plugge]

I will never understand why any programmer who should be familiar with

if (condition) {
  ....
} else {
  ....
}

would prefer v-if over the svelte syntax. It is way more readable and you don't need a wrapping element if you want to render multiple elements conditionally.

[karchung0930]

Because it looks cleaner just like JavaScript developers prefer one line arrow function instead of multiline function.
Also most of the time we don't need to wrap element together to use v-if because HTML is actually "nested". We don't need to make conditions again on each of the li tag:

<ul v-if="condition">
    <li></li>
    <li></li>
    <li></li>
</ul>

If you mean to have different elements together for the same condition:

<template v-if="condition">
    <div></div>
    <p></p>
</template>

The template is a invisible wrapper and will not be rendered.
The second is actually more or less the same to me between Svelte and Vue since I need to write an additional "wrapper". But Vue is just more flexible in term of condition rendering because we can still choose the cleaner syntax v-if if it's for one single element.

And people are avoiding mutiline because if the context is "deep", the indentation just looks messy.

[brunnerh]

If it is just one (short) element you can also put it on one line in Svelte.

- <h1 v-if="awesome">Vue is awesome!</h1>
+ {#if awesome}<h1>Svelte is awesome!</h1>{/if}

Though I don't think there is much value in doing so.

[karchung0930]

@brunnerh Hahah, that's cool. But what I mean by 'cleaner' in this case not only because it's one line, but also less characters.

[david-plugge]

While that may be the case, i like to be able to just move some lines without changing any actual logic. Having them seperated makes it more obvious what ist going on. But in the end its personal preference and the syntax most likely wont change in either language anyway. Its always good to try new ways of doing things and im glad svelte did it in the way it is now. I might be wrong but i think angular has the svelte like If syntax aswell? Or maybe it was only a proposal

[brunnerh]

i think angular has the svelte like If syntax aswell?

It's very close to JS, but also block-based.

@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

I really like Svelte's approach since it is close to HTML, so it fits in with the other element tags.

[kevin82222]

And also:

<!-- Vue -->
<button@click="console.log('clicked')">click me</button>

<!-- Svelte -->
<button onclick={() => console.log('clicked')}>click me</button>

In my opinion, Svelte (and React) use event handling in a way that better reflects how things work in practice—by requiring you to pass a function. Vue's inline approach can give the false impression that something is written incorrectly, and it may confuse beginners about what exactly should be provided as the event handler.