watch(), navigateTo(), and shared/ directory | Full-Stack Web Dev #12 скачать в хорошем качестве

watch(), navigateTo(), and shared/ directory | Full-Stack Web Dev #12

This is Episode #12 of my Nuxt Full-Stack Web Development series. In this video, we’ll clean up our project structure, introduce shared TypeScript types for our frontend and backend, and learn how to use the watch() function for reactive updates. We’ll also look at programmatic navigation using navigateTo() in Nuxt to move between pages dynamically. What’s covered in this video: – Organizing shared types between server and client – Using watch() to react to changes in data – Navigating between routes with navigateTo() – General project housekeeping and cleanup By the end, you’ll have a cleaner, more maintainable project and a better grasp of reactivity and navigation in Nuxt, along with a better user experience for your login page. Subscribe to follow along with the rest of the series as we continue to refine and expand our full-stack Nuxt application! 00:00 – Intro & quick update (been playing Battlefield) 00:25 – Checking the current site and login issue 01:00 – Explaining the refresh problem after login 01:40 – Cleaning up Navbar code and removing bad casting 02:10 – Creating a shared/types folder for reusable interfaces 02:50 – Defining the JWTUserInfo type and explaining shared imports 03:30 – Restarting Nuxt for new folders and auto-import behavior 04:00 – Refactoring verifyToken logic to use the shared type 04:40 – Cleaning up code nesting and simplifying login logic 05:20 – Redirecting users after login using navigateTo() 05:50 – Setting up a refresh key with useState() 06:30 – Using watch() to automatically refresh Navbar authentication 07:10 – Testing the login, auto-refresh, and redirect flow 07:45 – Recap: shared types, navigateTo, watch(), and cleanup