Last week, I shared my plan to develop a new micro SaaS. I built an MVP using a SaaS boilerplate and quickly realized I need my own SaaS starter kit! That's what I'm working on now — a kit to help me (and potentially others) quickly spin up new SaaS projects. Once it's ready, I'm planning to offer it for sale too. Stay tuned!
👉🏻 This post explore the challenges of icon rendering, the evolution of icon solutions, and how Nuxt Icon combines the best aspects of these methods to offer a seamless experience for developers.
👉🏻 This DejaVue episode covers the Nuxt Security Module.
👉🏻 They also discuss how to avoid common security mistakes as a Vue developer and how to protect your applications from vulnerabilities, and which are the most common ones.
👉🏻 A simple Nuxt module that works on the edge to easily validate incoming webhooks from different services.
💡 Nuxt Tip: When to Use useState
Nuxt provides the useStateuseState composable, which creates a reactive and SSR-friendly shared state. It's an SSR-friendly alternative to the refref function from Vue 3.
You might be confused when to use useStateuseState or refref in your Nuxt app. Let me try to answer this question.
Problem with ref using SSR
Let's take a look at a simple example where we use the refref function to create a shared state in a Nuxt app:
The problem with this code is that the refref function is not SSR-friendly. The code inside the script setup block will be executed on the server and the client. This means that the createRandomStringcreateRandomString function will be executed twice, and we will get different random strings on the server and the client. As a result, we see a flickering effect when the page is loaded, and we get hydration mismatch warnings in the console.
Try it yourself in the following StackBlitz project. Open it in a new tab and check the console for hydration mismatch warnings. If you reload the page, you will see that the random strings are different on the server and the client. First you see the server-rendered random strings and then the client-rendered random strings after the page is hydrated:
The useStateuseState composable from Nuxt solves exactly that problem. It creates a reactive and SSR-friendly shared state. The state is shared between the server and the client, and the useState composable ensures that the state is only created once.
Let's take a look at the same example using the useStateuseState composable:
Try it yourself in the following StackBlitz project, and you will see that the random strings are the same on the server and the client. There are no hydration mismatch warnings in the console:
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Tuesday, August 20, 2024 My linkblog, which posts to the Links tab on Scripting News, as well as Bluesky , Mastodon and RSS , now also posts to Twitter and Threads . # Today would have been my mother's 92nd birthday. She died in 2018, and I still haven't, deep inside, fully gotten the message that she's gone. Probably the most significant person in my life. I find most of my adult relationships can be traced back to my relationship with her. # Ignore the NY Times # When President Biden took the stage last night at the DNC, I had a moment of buyer's remorse. He looked so good in his black suit, and the pictures of the new candidates, and their spouses, looked comical in comparison to the president who was about to speak. # Why did Walz have a permanent frown on his face. I find his presence next to Harris is almost always awkward. He's taller, and moves a lot. I noticed this with Sanders when he was debating Clinton in 2016. Sh...
Sunday, August 25, 2024 The problem with the state-by-state abortion laws that Trump says he favors: 1. The women in states that ban abortion who will die as a result of the bans, and many more who will be severely injured, and all will have their freedoms severely restricted. 2. He's lying. When Congress passes a national abortion ban he'll sign it and boast about it, of course . # If you're interested in languages and compiler compilers and how to bootstrap a scripting environment, then you'll enjoy the progress I've made in the project to get UserTalk running in today's environments. I welcome comments from experienced or curious language devs. # Walt Mossberg : "Journalists have one core job: to tell the truth, especially when it's clear. The staff of the NY Times has done it in the past, even at great risk. Why don't they do it now?" # My response : "We have no visibility into the inner workings of the NYT. We...
评论
发表评论