Securing Nuxt 3 API Endpoints with Pinia, UI Thing, Nuxt Auth Utils & TailwindCSS | Full Tutorial 🔒

Source code: https://github.com/BayBreezy/protect-...

Deployed to Netlify: https://protect-server-api-nuxt3.netl...

In this comprehensive coding tutorial, dive into the world of Nuxt 3 as we walk through the process of creating a new project and configuring it from scratch. Learn how to implement Pinia for efficient state management and handle API function calls seamlessly. Discover the power of toggling between light and dark mode and explore a custom UI library crafted with Radix-vue and TailwindCSS - UI Thing(https://ui-thing.behonbaker.com/getti...)

Throughout the tutorial, we focus on a crucial aspect—protecting specific endpoints within the server folder of a Nuxt 3 application. Uncover the ins and outs of middleware implementation for enhanced security. Whether you're a seasoned developer or just starting with Nuxt, this tutorial provides valuable insights into building a robust and secure Nuxt 3 application. Don't miss out on the tips and tricks shared along the way to elevate your coding skills. Watch now and level up your Nuxt game!

#Nuxt3 #Pinia #Authentication #CodingTutorial #WebDevelopment #UIThing

🔗 Timestamps:
00:00 - Introduction
03:28 - Initialize our Nuxt app
04:02 - Update gitignore file
04:51 - Add UI Thing to our Nuxt 3 app
06:50 - Add components that we will need
07:56 - Configure `nuxt.config.ts` file
12:24 - Add faker-js to our app
13:40 - Add users api endpoint
20:52 - Display data on page
23:50 - Add Pinia to the mix
25:12 - Create our first pinia store
28:53 - Use pinia state and functions inside components/pages
31:05 - Display data in UI
40:30 - Add auth to our app with Nuxt Auth Utils
43:38 - Add login endpoint
48:40 - Add navbar
55:20 - Add middleware guard to server folder
01:04:40 - Prepare for push to Github
01:07:00 - Deploy to Netlify
01:09:55 - Add light dark mode toggle button

🚨 Stay tuned for more exciting tutorials and coding adventures! Happy coding! 🚀👩‍💻👨‍💻