Menu
Hacker Room
Informasi
Lifestyle
WebDev
vue

Convert Svelte to Vue

Introduction/Basics

Svelte

<h1>Hello world!</h1>

Vue

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

Introduction/Adding Data

Svelte

<script>
	let name = 'world';
</script>

<h1>Hello {name.toUpperCase()}!</h1>

Vue

<script setup>
	import {ref} from 'vue'
	const name = ref('world')
</script>

<template>
	<h1>Hello {{name.toUpperCase()}}!</h1>
</template>

Introduction/Dynamic Attributes

Svelte

<script>
	let src = 'https://svelte.dev/tutorial/image.gif';
	let name = 'Rick Astley';
</script>

<img {src} alt="{name} dances.">

Vue

<script setup>
	import {ref} from 'vue'

	const src = ref('https://svelte.dev/tutorial/image.gif')
	const name = ref('Rick Astley')
</script>

<template>
	<img :src="src" :alt="name + ' dances'">
</template>

Introduction/Styling

Svelte

<p>This is a paragraph.</p>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

Vue

<template>
	<p>This is a paragraph.</p>
</template>

<style scoped>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

Introduction/Nested Component

Svelte

App.svelte

<script>
	import Nested from './Nested.svelte';
</script>

<p>This is a paragraph.</p>
<Nested/>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

Nested.svelte

<p>This is another paragraph.</p>

Vue

App.vue

<script setup>
	import Nested from './Nested.vue';
</script>

<template>
	<p>This is a paragraph.</p>
	<Nested/>
</template>

<style scoped>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

Nested.vue

<template>
	<p>This is another paragraph.</p>
</template>

Introduction/HTML Tag

Svelte

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

Vue

<script setup>
	import {ref} from 'vue'

	const string = ref(`this string contains some <strong>HTML!!!</strong>`);
</script>

<template>
	<p v-html='string'></p>
</template>

Reactivity/Assignments

Svelte

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Vue

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

	function handleClick() {
		count.value += 1;
	}
</script>

<template>
	<button @click='handleClick'>
		Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
	</button>
</template>

Reactivity/Declarations

Svelte

<script>
	let count = 0;
	$: doubled = count * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

Vue

<script setup>
	import {computed, ref} from 'vue'
	const count = ref(0);
	const doubled = computed(() => count.value * 2)

	function handleClick() {
		count.value += 1;
	}
</script>

<template>
	<button @click='handleClick'>
		Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
	</button>

	<p>{{count}} doubled is {{doubled}}</p>
</template>

Reactivity/Statements

Svelte

<script>
	let count = 0;

	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Vue

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

	const cek = () => {
		if (count.value >= 10) {
			alert(`count is dangerously high!`);
			count.value = 9;
		}
	}
	watch(count, cek)

	function handleClick() {
		count.value += 1;
	}
</script>

<template>
	<button @click='handleClick'>
		Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
	</button>
</template>

Reactivity/Updating Arrays and Objects

Svelte

<script>
	let numbers = [1, 2, 3, 4];

	function addNumber() {
		numbers = [...numbers, numbers.length + 1];
	}

	$: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
	Add a number
</button>

Vue

<script setup>
	import {ref, computed} from 'vue'
	const numbers = ref([1, 2, 3, 4]);

	function addNumber() {
		numbers.value = [...numbers.value, numbers.value.length + 1];
	}

	const sum = computed(() => numbers.value.reduce((t, n) => t + n, 0))
</script>

<template>
	<p>{{numbers.join(' + ')}} = {{sum}}</p>

	<button @click='addNumber'>
		Add a number
	</button>
</template>

Props/Declaring Props

Svelte

App.svelte

<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

Nested.svelte

<script>
	export let answer;
</script>

<p>The answer is {answer}</p>

Vue

App.vue

<script setup>
	import Nested from './Nested.vue';
</script>

<template>
	<Nested answer='42'/>
</template>

Nested.vue

<script setup>
	import {defineProps} from 'vue'
	defineProps(['answer'])
</script>

<template>
	<p>The answer is {{answer}}</p>
</template>

Props/Default Props

Svelte

App.svelte

<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>
<Nested/>

Nested.svelte

<script>
	export let answer = 'a mystery';
</script>

<p>The answer is {answer}</p>

Vue

App.vue

<script setup>
	import Nested from './Nested.vue';
</script>

<template>
	<Nested answer='42'/>
	<Nested/>
</template>

Nested.vue

<script setup>
	import {defineProps} from 'vue'
	defineProps({
		answer: {
			default: 'a mistery'
		}
	})
</script>

<template>
	<p>The answer is {{answer}}</p>
</template>

Special Elements/

Svelte

<svelte:head>
	<link rel="stylesheet" href="https://svelte.dev/tutorial/dark-theme.css">
</svelte:head>

<h1>Hello world!</h1>

Vue

<template>
	<teleport to='head'>
		<link rel="stylesheet" href="https://svelte.dev/tutorial/dark-theme.css">
	</teleport>

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

Random Articles

Latihan SCSS dengan SvelteKit

Untuk Apa Kita Bekerja?

Yuk Membuat Aplikasi

Portofolio

Global Store di Vue 3

Cari