A simple comparison of Svelte and Vue

Since its introduction in 2019, Svelte has quickly become one of the most loved JavaScript framework overtaking Vue.js in the State of JS ranking 2021 survey. This article presents a simple comparison of Vue.js and Svelte as an attempt to explain why.

Vue.js

The comparison starts with the Vue.js implementation of a simple counter button. As of version 3 of Vue.js, components can be written in either the Options API of Composition API fashion so both are shown hereunder.

Options API

Here the counter button, written in Vue.js version 3 using the options API:

<template>
  <button @click="increment()">{{ count }}</button>
</template>

<script>
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment(){
      this.count ++
    }
  }
}
</script>

The <script> section of the component involves a fair amount of boilerplate code which can throw some beginners off.

Composition API

Vue.js version 3 introduces the composition API as well as the setup clause of the script tag which allows components to be written in a more concise way:

<template>
  <button @click="increment()">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
  count.value ++
}
</script>

Although slightly more straightforward, the Composition API involves the use of ref() (or reactive()) for reactivity, which diverges from conventional JavaScript syntax.

Svelte

Here is the same counter button implemented in Svelte:

<button on:click={increment}>{count}</button>

<script>
let count = 0

const increment = () => {
    count ++
}
</script>

Clearly, this implementation is far more concise than its Vue.js equivalent as the <template> tag and usage of ref() are no longer needed.

This straightforward syntax is most likely one of the many reasons why Svelte became so popular and makes Svelte an ideal framework for beginners to learn.