Svelte 5 vs Vue 3 - Component Party

Reactivity

Declare state

Svelte 5

<script>
  let name = $state("John");
</script>

<h1>Hello {name}</h1>

Vue 3

<script setup>
import { ref } from "vue";
const name = ref("John");
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Update state

Svelte 5

<script>
  let name = $state("John");
  name = "Jane";
</script>

<h1>Hello {name}</h1>

Vue 3

<script setup>
import { ref } from "vue";
const name = ref("John");
name.value = "Jane";
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Computed state

Svelte 5

<script>
  let count = $state(10);
  const doubleCount = $derived(count * 2);
</script>

<div>{doubleCount}</div>

Vue 3

<script setup>
import { ref, computed } from "vue";
const count = ref(10);
const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <div>{{ doubleCount }}</div>
</template>

Templating

Minimal template

Svelte 5

<h1>Hello world</h1>

Vue 3

<template>
  <h1>Hello world</h1>
</template>

Styling

Svelte 5

<h1 class="title">I am red</h1>
<button style="font-size: 10rem;">I am a button</button>

<style>
  .title {
    color: red;
  }
</style>

Vue 3

<template>
  <h1 class="title">I am red</h1>
  <button style="font-size: 10rem">I am a button</button>
</template>

<style scoped>
.title {
  color: red;
}
</style>

Loop

Svelte 5

<script>
  const colors = ["red", "green", "blue"];
</script>

<ul>
  {#each colors as color (color)}
    <li>{color}</li>
  {/each}
</ul>

Vue 3

<script setup>
const colors = ["red", "green", "blue"];
</script>

<template>
  <ul>
    <li v-for="color in colors" :key="color">
      {{ color }}
    </li>
  </ul>
</template>

Event click

Svelte 5

<script>
  let count = $state(0);

  function incrementCount() {
    count++;
  }
</script>

<p>Counter: {count}</p>
<button onclick={incrementCount}>+1</button>

Vue 3

<script setup>
import { ref } from "vue";
const count = ref(0);

function incrementCount() {
  count.value++;
}
</script>

<template>
  <p>Counter: {{ count }}</p>
  <button @click="incrementCount">+1</button>
</template>

Dom ref

Svelte 5

<script>
  let inputElement;

  $effect(() => {
    inputElement.focus();
  });
</script>

<input bind:this={inputElement} />

Vue 3

<script setup>
import { useTemplateRef, onMounted } from "vue";

const inputElement = useTemplateRef("inputElement");

onMounted(() => {
  inputElement.value.focus();
});
</script>

<template>
  <input ref="inputElement" />
</template>

Conditional

Svelte 5

<script>
  const TRAFFIC_LIGHTS = ["red", "orange", "green"];
  let lightIndex = $state(0);

  const light = $derived(TRAFFIC_LIGHTS[lightIndex]);

  function nextLight() {
    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
  }
</script>

<button onclick={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
  You must
  {#if light === "red"}
    <span>STOP</span>
  {:else if light === "orange"}
    <span>SLOW DOWN</span>
  {:else if light === "green"}
    <span>GO</span>
  {/if}
</p>

Vue 3

<script setup>
import { ref, computed } from "vue";
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
const lightIndex = ref(0);

const light = computed(() => TRAFFIC_LIGHTS[lightIndex.value]);

function nextLight() {
  lightIndex.value = (lightIndex.value + 1) % TRAFFIC_LIGHTS.length;
}
</script>

<template>
  <button @click="nextLight">Next light</button>
  <p>Light is: {{ light }}</p>
  <p>
    You must
    <span v-if="light === 'red'">STOP</span>
    <span v-else-if="light === 'orange'">SLOW DOWN</span>
    <span v-else-if="light === 'green'">GO</span>
  </p>
</template>

Lifecycle

On mount

Svelte 5

<script>
  let pageTitle = $state("");
  $effect(() => {
    pageTitle = document.title;
  });
</script>

<p>Page title: {pageTitle}</p>

Vue 3

<script setup>
import { ref, onMounted } from "vue";
const pageTitle = ref("");
onMounted(() => {
  pageTitle.value = document.title;
});
</script>

<template>
  <p>Page title: {{ pageTitle }}</p>
</template>

On unmount

Svelte 5

<script>
  let time = $state(new Date().toLocaleTimeString());

  $effect(() => {
    const timer = setInterval(() => {
      time = new Date().toLocaleTimeString();
    }, 1000);

    return () => clearInterval(timer);
  });
</script>

<p>Current time: {time}</p>

Vue 3

<script setup>
import { ref, onUnmounted } from "vue";

const time = ref(new Date().toLocaleTimeString());

const timer = setInterval(() => {
  time.value = new Date().toLocaleTimeString();
}, 1000);

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <p>Current time: {{ time }}</p>
</template>

Component composition

Props

Svelte 5

<script>
  import UserProfile from "./UserProfile.svelte";
</script>

<UserProfile
  name="John"
  age={20}
  favouriteColors={["green", "blue", "red"]}
  isAvailable
/>

Vue 3

<script setup>
import UserProfile from "./UserProfile.vue";
</script>

<template>
  <UserProfile
    name="John"
    :age="20"
    :favourite-colors="['green', 'blue', 'red']"
    is-available
  />
</template>

Emit to parent

Svelte 5

<script>
  import AnswerButton from "./AnswerButton.svelte";

  let isHappy = $state(true);

  function onAnswerNo() {
    isHappy = false;
  }

  function onAnswerYes() {
    isHappy = true;
  }
</script>

<p>Are you happy?</p>
<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
<p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p>

Vue 3

<script setup>
import { ref } from "vue";
import AnswerButton from "./AnswerButton.vue";

let isHappy = ref(true);

function onAnswerNo() {
  isHappy.value = false;
}

function onAnswerYes() {
  isHappy.value = true;
}
</script>

<template>
  <p>Are you happy?</p>
  <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
  <p style="font-size: 50px">
    {{ isHappy ? "😀" : "😥" }}
  </p>
</template>

Slot

Svelte 5

<script>
  import FunnyButton from "./FunnyButton.svelte";
</script>

<FunnyButton>Click me!</FunnyButton>

Vue 3

<script setup>
import FunnyButton from "./FunnyButton.vue";
</script>

<template>
  <FunnyButton> Click me! </FunnyButton>
</template>

Slot fallback

Svelte 5

<script>
  import FunnyButton from "./FunnyButton.svelte";
</script>

<FunnyButton />
<FunnyButton>I got content!</FunnyButton>

Vue 3

<script setup>
import FunnyButton from "./FunnyButton.vue";
</script>

<template>
  <FunnyButton />
  <FunnyButton> I got content! </FunnyButton>
</template>

Context

Svelte 5

<script>
  import { setContext } from "svelte";
  import UserProfile from "./UserProfile.svelte";
  import createUserState from "./createUserState.svelte.js";

  const user = createUserState({
    id: 1,
    username: "unicorn42",
    email: "[email protected]",
  });

  setContext("user", user);
</script>

<h1>Welcome back, {user.username}</h1>
<UserProfile />

Vue 3

<script setup>
import { ref, provide } from "vue";
import UserProfile from "./UserProfile.vue";

const user = ref({
  id: 1,
  username: "unicorn42",
  email: "[email protected]",
});

function updateUsername(username) {
  user.value.username = username;
}

provide("user", { user, updateUsername });
</script>

<template>
  <h1>Welcome back, {{ user.username }}</h1>
  <UserProfile />
</template>

Form input

Input text

Svelte 5

<script>
  let text = $state("Hello World");
</script>

<p>{text}</p>
<input bind:value={text} />

Vue 3

<script setup>
import { ref } from "vue";
const text = ref("Hello World");
</script>

<template>
  <p>{{ text }}</p>
  <input v-model="text" />
</template>

Checkbox

Svelte 5

<script>
  let isAvailable = $state(false);
</script>

<input id="is-available" type="checkbox" bind:checked={isAvailable} />
<label for="is-available">Is available</label>

Vue 3

<script setup>
import { ref } from "vue";

const isAvailable = ref(true);
</script>

<template>
  <input id="is-available" v-model="isAvailable" type="checkbox" />
  <label for="is-available">Is available</label>
</template>

Radio

Svelte 5

<script>
  let picked = $state("red");
</script>

<div>Picked: {picked}</div>

<input id="blue-pill" bind:group={picked} type="radio" value="blue" />
<label for="blue-pill">Blue pill</label>

<input id="red-pill" bind:group={picked} type="radio" value="red" />
<label for="red-pill">Red pill</label>

Vue 3

<script setup>
import { ref } from "vue";

const picked = ref("red");
</script>

<template>
  <div>Picked: {{ picked }}</div>

  <input id="blue-pill" v-model="picked" type="radio" value="blue" />
  <label for="blue-pill">Blue pill</label>

  <input id="red-pill" v-model="picked" type="radio" value="red" />
  <label for="red-pill">Red pill</label>
</template>

Select

Svelte 5

<script>
  let selectedColorId = $state(2);

  const colors = [
    { id: 1, text: "red" },
    { id: 2, text: "blue" },
    { id: 3, text: "green" },
    { id: 4, text: "gray", isDisabled: true },
  ];
</script>

<select bind:value={selectedColorId}>
  {#each colors as color}
    <option value={color.id} disabled={color.isDisabled}>
      {color.text}
    </option>
  {/each}
</select>

Vue 3

<script setup>
import { ref } from "vue";

const selectedColorId = ref(2);

const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];
</script>

<template>
  <select v-model="selectedColorId">
    <option
      v-for="color in colors"
      :key="color.id"
      :value="color.id"
      :disabled="color.isDisabled"
    >
      {{ color.text }}
    </option>
  </select>
</template>

Webapp features

Render app

Svelte 5

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./app.js"></script>
  </body>
</html>

Vue 3

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

Fetch data

Svelte 5

<script>
  import useFetchUsers from "./useFetchUsers.svelte.js";

  const response = useFetchUsers();
</script>

{#if response.isLoading}
  <p>Fetching users...</p>
{:else if response.error}
  <p>An error occurred while fetching users</p>
{:else if response.users}
  <ul>
    {#each response.users as user}
      <li>
        <img src={user.picture.thumbnail} alt="user" />
        <p>
          {user.name.first}
          {user.name.last}
        </p>
      </li>
    {/each}
  </ul>
{/if}

Vue 3

<script setup>
import useFetchUsers from "./useFetchUsers";

const { isLoading, error, data: users } = useFetchUsers();
</script>

<template>
  <p v-if="isLoading">Fetching users...</p>
  <p v-else-if="error">An error ocurred while fetching users</p>
  <ul v-else-if="users">
    <li v-for="user in users" :key="user.login.uuid">
      <img :src="user.picture.thumbnail" alt="user" />
      <p>
        {{ user.name.first }}
        {{ user.name.last }}
      </p>
    </li>
  </ul>
</template>

Reactivity #

Declare state #

Svelte 5

Vue 3

Update state #

Svelte 5

Vue 3

Computed state #

Svelte 5

Vue 3

Templating #

Minimal template #

Svelte 5

Vue 3

Styling #

Svelte 5

Vue 3

Loop #

Svelte 5

Vue 3

Event click #

Svelte 5

Vue 3

Dom ref #

Svelte 5

Vue 3

Conditional #

Svelte 5

Vue 3

Lifecycle #

On mount #

Svelte 5

Vue 3

On unmount #

Svelte 5

Vue 3

Component composition #

Props #

Svelte 5

Vue 3

Emit to parent #

Svelte 5

Vue 3

Slot #

Svelte 5

Vue 3

Slot fallback #

Svelte 5

Vue 3

Context #

Svelte 5

Vue 3

Form input #

Input text #

Svelte 5

Vue 3

Checkbox #

Svelte 5

Vue 3

Radio #

Svelte 5

Vue 3

Select #

Svelte 5

Vue 3

Webapp features #

Render app #

Svelte 5

Vue 3

Fetch data #

Svelte 5

Vue 3

Reactivity

Declare state

Update state

Computed state

Templating

Minimal template

Styling

Loop

Event click

Dom ref

Conditional

Lifecycle

On mount

On unmount

Component composition

Props

Emit to parent

Slot

Slot fallback

Context

Form input

Input text

Checkbox

Radio

Select

Webapp features

Render app

Fetch data