How Svelte 5 Made Me Understand Nuxt

How Svelte 5 Made Me Understand Nuxt

James 'Dante' Midzi's photo
James 'Dante' Midzi
·

4 min read

Table of contents

I have gone on a journey. A long winding journey. A journey I could not have foreseen. As it would have it; I am back, once again, announcing my change in methodologies and workflows.

A lot has happened in the world of development and tech; from React and Next.js, to Lucia, to Laravel, to Astro. So much to talk about...

One of those 'changes' has made go back to the drawing board yet again. Something I did not think I would have had to to do for about 3 to 5 years. Yet, here we are; me eating my words. Rather than having to answer question later down the line, I figured it would be simpler for me to talk about and explain my decisions.

The Changes

It all boils down to one thing really. One thing that has been made core and I cannot get with it.

Runes - My Friction Point

I have read through the documentation, I watched the release videos. I have explored the new way. After all that, I will never accept the runes syntax. My brain will not find synergy.

This - whatever this way is - is in opposition of all the reasons I gravitated towards Svelte and Sveltekit.

<script> 
let count = $state(0);
let double = $derived(count * 2)

$effect(() => {
    setInterval(() => {
        elapsed += 1;
    }, interval);
});
</script>

I understand all of it, I get what they were trying to accomplish. I just don't like it. It is too indicative of React; and I left React ages ago.

I left the useState and useEffect of React because they wound up complicating what should have been simple. The runes syntax of Svelte feels a little to similar to React and I have no intention of writing that kind of code again. Regardless of how 'better' it may be.

For me there was something elegant about Svelte's $: syntax. It was simple, straightforward and easy enough to understand. It wasn't perfect, but it worked.

Then Snippets...

To be able to have and reuse chunks of code. Sounds cool on paper, but looking at the code and the implementation, it feels too much like a React way of doing things. There are waaaaay to many symbols for my liking. This is horrible to look at:

<script>
    let { message = `it's great to see you!` } = $props();
</script>

{#snippet hello(name)}
    <p>hello {name}! {message}!</p>
{/snippet}

{@render hello('alice')}
{@render hello('bob')}

Nuxt

In an article, where I sang the praises of SvelteKit, I said that I didn't like Nuxt and how it did templating.

With the looming arrival of Svelte 5, I revisited decisions I had made earlier. I realised that a lot of what I was complaining about had to do with my misunderstanding. I got over those misconceptions and learnt, built and migrated some projects.

A few things that finally won me over were:

  • File-Based Routing: Nuxt implements file based routing, not directory based - I have an article on this. I have always been partial to file-based routing. I only tolerated SvelteKit's directory approach because everything else is simple.

  • Auto Imports: In most frameworks if you wish to import something into a file, you usually have an import statement at the top. This is not the case with Nuxt

  • Separation of Concerns: I mentioned this in that same article; how I was not a fan of Next.js placing everything in a single directory. Nuxt doesn't have that problem - everything has its specified place

    • Pages

    • Layouts

    • Middleware

    • Server

  • Modules: So the Nuxt people have modules, modules upon modules to things you may want to add to your project; icons, SEO, sitemaps, fonts. Nuxt probably has a module for that. Reminds me of Astro integrations - I love those.

I was wrong about Nuxt, I admit that.

Wrapping Up

I guess that's the beauty of being a developer and an adult; the ability to choose what I use and what I don't. If I am not happy in what I am doing and what I am doing it with, I will rarely ever invest that much commitment into it - this is where I have arrived with Svelte - I am not happy, I feel I am moving backwards.

I am saddened to be leaving Svelte, but for my own peace of mind and sanity I must.

All in all, what drives me is simplicity and removal of complexity from the things I do. In that endeavour, if there is too much friction, I am just not going to with that pathway.

Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. Let's connect on Twitter, Discord and LinkedIn

Vue.jsNuxt.jsSvelteSveltekit