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

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
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! 🚀👩‍💻👨‍💻

[kooyaw]

I appreciate your efforts in creating these videos. Incredibly helpful

[SilenceKillsDesign]

Your videos are so good, Behon. Thank you for taking the time to create these.

[imadouzoun]

Thank you so much! Keep going with these tutorials bro. So helpful!

[angelhdzdev]

This video was packed!
But I would have used Quasar UI. Nice touch using faker. I always forget the HMR for pinia stores. Keep bringing more Nuxt 3 fire content! 🔥 💚🎉👏

[SyedHaroon]

such a rich content... thanks for your effort.

[OgeeDeveloper]

Great video. I't would be great for you to do a video on how others can set up the dev environment for Vue and Nuxt development. our environment looks really productive.

[pierremfoundou]

thank you for the video, can i use a real rest api instead fakerjs and manage auth like you've done in this video ?

[adamjacob]

Amazing video thank you!

Is it possible to get a list of your VSCode add-ons for your nuxt3 environment?!

... Not sure if that's something that is easy to share, but I am very envious of some of the things I am seeing in this video that certainly do not happen in my enviroment <3

[pirzhkDevTV]

Hey. When I use login, state not update before i reload the page. Bu when I logout all good. Can you help me? And sorry for my English😢

[mahdimolaei]

Nice. Could you share your Nuxt and Vue profile for VSCode?

[janhuybrecht]

Hi, How can we run this with UNOCSS instead of Tailwind.

[isiahjones_]

I see that the session is saved inside a cookie inside the browser via encryption. When you call the fetch() it makes an api call and returns the information in plain text on the bowser. Is this a good or bad thing?

[forktrader]

for loop really on protected route? are you that amateur coder?

[forktrader]

nearly useless. no database or baas in the tutorial. purely faker data and basic auth function and not actual private route, just v-if of the html within index.vue