Transitioning from Vue to Svelte?

I've tried React and didn't like it. Too complicated. I had to work with Angular: hated it. Vue is currently my favorite font-end framework, and I especially like Nuxt. But sometimes I get annoyed with Vue or Nuxt plumbing, and this whole Vuex store story is cumbersome. Also, constant Nuxt rebuilds are a pain. Tried Vue3 but Nuxt does not seem to be up to it, and it's still another migration step, with all its changes and pitfalls to understand and get used to.

So why not try Svelte? It doesn't look so user friendly, and I need some kind of Nuxt framework equivalent. Then comes SvelteKit. Ok, once installed, it is surely not as cute as a freshly launched Nuxt site, but I will still give it a chance.

Svelte has been around for a few years new, and according to this Stack Overflow survey, it is quite loved:

This article will be my notepad on my Svelte transition. I'll put links and stuff I need to remember, and will, in the end, tell you if I quit Vue for Svelte, or if I just go back to what is currently my favorite front-end framework.

Links

1. SvelteKit: is to Svelte what Next is to React or Nuxt is to Vue.
2. SvelteKit routing: a must read.
3. Adding Tailwind to SvelteKit - 5 minutes for a Svelte beginner. Works great.
4. Very simple modal component - Svelte.dev: I had to surround all the window.foo() calls with if (typeof window !== 'undefined') {} or I would get window not defined errors. Most probably due to server side rendering.
5. Write less code - Rich Harris : This guy is just so damn right! I just wish he would have written that article on StoryPress.info so that I could have given him a big 💎!

Good tutorials

1. A beginner's guide to SvelteKit - SitePoint
2. Getting started with SvelteKit: 10 Tips - RodneyLab
3. Working with Svelte stores - MDN
4. The Unwritten Svelte Stores Guide - DevTo

What I like with Svelte

1. Clean documentation
2. Routing is very well designed
3. Quasi instant page updates upon modifications (thanks to Vite). Vite was the reason I tried once to migrate to Nuxt3, but I had to retreat after spending too much time on some odd quirks. This only feature makes development process so much funnier.
4. Allow for types via JSDoc type annotations (I'm not a TypeScript guy, but I like intellisense suggestions)
5. bye bye Axios (that you find so often in Vue/Nuxt projects, tutorials, examples ...), SvelteKit uses native Fetch API instead
6. bye bye <Nuxt-Link>, use standard <a> links instead (comes with pre-fetching upon hovering)

Libs and ressources

Some interesting or useful libs:

1. svelte-keydown: so your whole application can listen to keystrokes
2. svelte-toast: simple, elegant, flexible toast for Svelte

Comparing Svelte to other libraries

1. Svelte versus React: which framework to learn in 2023? - DevTo

Tips and tricks with Svelte

Passing parameters to functions in on:click

When you want to bind a function to an event like on:click, you usually do:

<div on:click={add}>click me</div>

This will call the add() function each time you click on the div element.

Now what if you want to pass one or more arguments to add()? Simple:

<div on:click={() => add(5)}>click me to add 5</div>

It took me some time to figure this out.