ref() vs useState() in Nuxt | Full-Stack Web Dev #6
2This is Episode #6 of my Nuxt Full-Stack Web Development series.
In this video, I’ll explain the differences between ref() and useState() in Nuxt, when to use each one, and how they behave in your project. These two features are important for handling reactivity and state management, but they serve slightly different purposes. By the end, you’ll know which to use depending on your situation.
What’s covered in this video:
What ref() does in Nuxt
What useState() does in Nuxt
Key differences between ref() and useState()
When to use each one in your project
Subscribe to follow along with the rest of the series as we continue building this project step by step.
00:00 Intro & Topic Overview
00:07 What Are References (ref)?
00:16 Creating a Counter with ref()
00:30 Accessing ref Values in Script vs Template
00:56 Adding a Button Click Event
01:14 Demo: Updating State with ref()
01:35 Introducing useState() in Nuxt
01:42 Typing and Naming a State with useState()
01:59 Demo: Counter with useState()
02:03 Key Difference – State Persistence
02:12 Testing Navigation with useState vs ref
02:33 Sharing State Across Pages with useState
02:58 Demo: Using the Same State on About Page
03:19 Comparing Behavior Between ref and useState
03:36 When to Use ref vs useState (Best Practices)
03:43 Wrap-Up & Closing