Hello, great tutorial!, Want to ask some question When i try to log the res it does nothing nothing get logged then how to handle the status code?(i.e: 200/OK, 400/BadRequest and so on using $fetch) because i have different result so i could pass any generic type in my $fetch. Thanks!
This was tricky for me when I started using the $fetch composable. Luckily, the docs for it can be found here: github.com/unjs/ofetch. To handle errors, you can do await $fetch("/url").catch((err) => err.data); To ignore the error, you can do await $fetch("/url", { ignoreResponseError: true });
@@breezycodes thanks, I've got it installed but I'm unable to see these options when I right click. I'll do some snooping around, hopefully I get it fixed.
You are welcome. I see this nuxt module called pinia-plugin-persistedstate that should be able to do what you are looking for. Here is the link to the docs for it: prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt-3.html
YW. I was a C# dev a few years ago lol. Honestly, Vuetify 3 and Nuxt are in a shakey place right now. A good module was developed by a random dev in the community and I am exploring it right now. I will be making a video on it soon
@guillermomazzari8320 yes. The problem that you ate going to face with Tailwind is that you will be creating components from scratch over and over again. To combat this, I would recommend creating a starter kit with your own reusable components.
sorry, on your auth plugin, u made a check to fetch the user info whenever the app reloads. On my end, I made an express api that returns a http only cookie to the browser once login is successfuly. How do I pass the http only cookie to the express api to fetch my user? I want to do a similar thing where it fetches the user info whenever the app reloads but I need the http only cookie to be passed. I tried it on my end and it looks like on the server side, the http only cookie is not available
Hey there. You are correct, the http cookie will not be passed on the server by default. This can be fixed. You need to pass the cookies on the server side by using the "useRequestHeaders()" composable to get the cookie on the server and send it in the the express server. Visit here: nuxt.com/docs/api/composables/use-request-headers to see how it works. All you have to do is get the headers from the client like so: // get the cookie only from the headers const headers = useRequestHeaders(['cookie']) And then send the request with the credentials property set to "include" along with the headers. Let me know if this works
I also did it in this repo here: github.com/BayBreezy/nuxt-3-auth-payloadcms/blob/main/client/composables/payload.ts#L99 I explained it somewhere in this video: ua-cam.com/video/HTU5d4sJdwI/v-deo.html&ab_channel=BehonBaker
@@breezycodesthank you, its working. I also noticed that if you put await $fetch() into a function, lets say const getPosts = async() => await $fetch() and call getPosts, the script is only run on the client side, not the server.
Well, you do not need to define your store in the plugins folder. You can create it anywhere and use it withing your app. You can even ditch Pinia and use Nuxt's composables to achieve the same thing
I need lots of nuxt3 tutorials like this ...
The way you broke it down from start to finish is awesome, well done 👍🏾
You are brilliant - so many useful tips and tricks as well as the tutorial! Subscribed and Liked!
Big love, man. Thanks for walking through it step by step, and awesome wallpaper 💪
Thanks for the well explained video. Helped a lot. Please make more. Thanks.
thanks a lot for your contribution to frontend devs likes me!!!
Amazing video, The way you explain and the tools that you used make the learning a great experience
Great video! i'm having troubles setting up the auth middleware. it doesn't seem to work for me. i can still access routes when not logged in.
nicely done 👏, thanks for the tutorial
No problem 👍
Amazing content. Appreciated 👍🏻. I was looking for this.
Please, make a video telling us what extensions you're using ! Thank you for the content! That is amazing!!
I will be sure to go over the extension at the start of the next video :)
Hello, great tutorial!, Want to ask some question
When i try to log the res it does nothing nothing get logged then how to handle the status code?(i.e: 200/OK, 400/BadRequest and so on using $fetch) because i have different result so i could pass any generic type in my $fetch. Thanks!
This was tricky for me when I started using the $fetch composable. Luckily, the docs for it can be found here: github.com/unjs/ofetch. To handle errors, you can do
await $fetch("/url").catch((err) => err.data);
To ignore the error, you can do
await $fetch("/url", { ignoreResponseError: true });
Very great job guy, thank you so much.........
Hell, great video. Please which plugin did you use 07:58 minute to create the nuxt project directories. thank you
The extension is called Nuxtr 😊
@@breezycodes thanks, I've got it installed but I'm unable to see these options when I right click. I'll do some snooping around, hopefully I get it fixed.
Useful and well explained
Can you please mention what VS code extension you are using to create this Nuxt app? Thanks
I think I did.. it's the Nuxtr extension. Here I'd a link to it marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode
Great and modern tutorial🎉
Thank you for this. How can i get data persistently so that i can keep the data even after refresh.
You are welcome. I see this nuxt module called pinia-plugin-persistedstate that should be able to do what you are looking for. Here is the link to the docs for it: prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt-3.html
Incredible
Thank you very much for sharing, I am a C# developer and I love Vue, I want to move to Nuxt3, would you happen to have a full course using vuetify3?
YW. I was a C# dev a few years ago lol. Honestly, Vuetify 3 and Nuxt are in a shakey place right now. A good module was developed by a random dev in the community and I am exploring it right now. I will be making a video on it soon
@@breezycodes Oh, ok, so you would recommend using tailwind instead, at least meanwhile?
@guillermomazzari8320 yes. The problem that you ate going to face with Tailwind is that you will be creating components from scratch over and over again. To combat this, I would recommend creating a starter kit with your own reusable components.
@@breezycodes I understand, I am used to using tailwind, no problem there, thanks for answering!
sorry, on your auth plugin, u made a check to fetch the user info whenever the app reloads. On my end, I made an express api that returns a http only cookie to the browser once login is successfuly. How do I pass the http only cookie to the express api to fetch my user? I want to do a similar thing where it fetches the user info whenever the app reloads but I need the http only cookie to be passed. I tried it on my end and it looks like on the server side, the http only cookie is not available
Hey there. You are correct, the http cookie will not be passed on the server by default. This can be fixed. You need to pass the cookies on the server side by using the "useRequestHeaders()" composable to get the cookie on the server and send it in the the express server. Visit here: nuxt.com/docs/api/composables/use-request-headers to see how it works.
All you have to do is get the headers from the client like so:
// get the cookie only from the headers
const headers = useRequestHeaders(['cookie'])
And then send the request with the credentials property set to "include" along with the headers.
Let me know if this works
I also did it in this repo here: github.com/BayBreezy/nuxt-3-auth-payloadcms/blob/main/client/composables/payload.ts#L99
I explained it somewhere in this video: ua-cam.com/video/HTU5d4sJdwI/v-deo.html&ab_channel=BehonBaker
@@breezycodesthank you, its working. I also noticed that if you put await $fetch() into a function, lets say
const getPosts = async() => await $fetch()
and call getPosts, the script is only run on the client side, not the server.
thanks you man!
Is there a way to make a video teaching how to install StoryBook in Nuxt 3?
did someone know how to get loading while fetching the data?
how to do this for so many users, which data to get where to get the datas
Very good
how can i get the Vue tab in the inspector?
Great 💯💯💯
For some reason my logout function doesn't set the cookie for the token to undefined. Have the same code as you, any ideas?
I will check with the updated nuxt version & let you know in a few
@@breezycodes ok thanks! appreciate the response. i'm a fellow Caribbean coder btw. Bahamas here :)
Hey any idea? Not sure if anyone else has had this problem. Going to try and use the package directly from vueuse to see if that works
@@thecaribcoder Can you try passing null or undefined to the setUser & setToken functions to see if that will make a difference?
@@breezycodes Made no difference unfortunately, weird! Still trying to figure this out just working around it at the moment
Hello friend, you need to update this video, a lot of configurations are no longer valid.
Repo? Thanks
sorry you said what this nuxt extaintion name is ?
Hello.. Nuxtr is the name
Quasar UI is still best for vue/nuxt ❤
Why do we really need to define our store in plugins? What is plugin anyway
Well, you do not need to define your store in the plugins folder. You can create it anywhere and use it withing your app. You can even ditch Pinia and use Nuxt's composables to achieve the same thing
@@breezycodes but it throws an error when I didnt declare my store inside plugins. I'm so lost 😁
@kresnaagisna3995 that's odd. Can you create a minimum reproduction on stackblitz for me? That way we can look at it together
is there a github repo for this?
Umm.. Sadly I deleted the code because it wasn't a full project.. my bad
wow, thanks sir
👍
😎