Don't miss the next edition. Subscribe to the newsletter.
Published at Dec 16, 2024, 3:00 PMWhen to Use useState in Nuxt Ready for your weekly Vue & Nuxt dose? Weekly Vue News #176 When to Use useState in Nuxt View online Hi 👋 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! Enjoy this issue and have a lovely week ☀️ Vue 📕 Composable Design Patterns in Vue 👉🏻 In this article, Michael Thiessen covers seven different patterns on writing better composables in Vue. 📕 10 Tips to Write Cleaner Vue.js Code 👉🏻 In this article, Jakub lists his best practices to write cleaner code in your Vue projects. 📕 How to Set Up a Vue 3 Frontend, Node.js API, and a High-Performance WebSocket Server in Docker 👉🏻 This article explains how to put together a powerful, containerized development environment for a Vue app. Nuxt 📕 Introducing Nuxt Icon v1 👉🏻 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. 📕 Complete Guide: How to Upgrade to Nuxt 4* 👉🏻 Learn how to upgrade from Nuxt 3 to Nuxt 4 with this step-by-step guide. 👉🏻 Explore new features, data fetching changes, and migration tips for a smooth transition. 📕 Understand Nuxt Hydration by Building useState From Scratch* 👉🏻 Learn how useState works in Nuxt by building your own version from scratch. 👉🏻 This article explores state management and hydration in Nuxt, helping you understand the inner workings of this essential composable. 📕 Database Seeds with the Nuxt Task Runner* 👉🏻 In this article, you'll learn how to set up Drizzle ORM in Nuxt, enabling seamless database migrations and seeding with Faker.js in no time. 📹 Secure your Vue and Nuxt Applications 👉🏻 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. 🛠️ Nuxt Webhook Validators 👉🏻 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 useState useState composable, which creates a reactive and SSR-friendly shared state. It's an SSR-friendly alternative to the ref ref function from Vue 3. You might be confused when to use useState useState or ref ref 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 ref ref function to create a shared state in a Nuxt app: 1 script setup lang = " ts " > 2 const createRandomString = () => { 3 return ` random- ${ Math . random () }` ; 4 }; 5 6 const randomStrings = ref Array string >>([ 7 createRandomString (), 8 createRandomString (), 9 createRandomString (), 10 ]); 11 script > 12 13 template > 14 div > 15 ul > 16 li v-for= " randomString of randomStrings " > 17 li > 18 ul > 19 div > 20 template > The problem with this code is that the ref ref 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 createRandomString createRandomString 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: ✨ Open Demo How useState solves the problem The useState useState 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 useState useState composable: 1 script setup lang = " ts " > 2 const createRandomString = () => { 3 return ` random- ${ Math . random () }` ; 4 }; 5 6 const randomStrings = useState Array string >>( ' randomStrings ' , () => [ 7 createRandomString (), 8 createRandomString (), 9 createRandomString (), 10 ]); 11 script > 12 13 template > 14 div > 15 ul > 16 li v-for= " randomString of randomStrings " > 17 li > 18 ul > 19 div > 20 template > 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: ✨ Open Demo 📅 Events Vue.js Nation Conference (29 - 30 January 2025, free online conference) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) Vueconf.US (13 - 15 May 2025, Tampa, Florida) 💬 Quote of the week 🧑🏻💻 In Other News 📕 A Framework for Evaluating Browser Support 👉🏻 This blog post presents a framework for deciding whether to use new CSS features based on browser support. 📕 Next-level frosted glass with backdrop-filter 👉🏻 In this post, you'll learn how to make the slickest frosted glass ever. 👉🏻 You'll also learn quite a bit about CSS filters along the way. 👀 Stunning CSS & JS Animations 👉🏻 Examples of stunning CSS3 and Javascript animation examples. 👉🏻 Featuring UI elements, scroll triggered animations, SVG and much more. 🛠️ es-toolkit 👉🏻 A high-performance, small-bundle-size JavaScript utility library that offers various functions with improved performance and TypeScript support. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips : Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos : You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast : A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community . Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🦋 Repost the latest BlueSky post 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany {{ TrackView }}