Why You Should Learn Server Middleware with Nuxt.js! A step-by-step tutorial!
HTML-код
- Опубликовано: 5 окт 2024
- 🚨 IMPORTANT:
Cllick here For the Best Nuxt Course Ever : bit.ly/2LalQka
Nuxt.js help you do server-side rendering, but what is the difference between asyncData, Middleware and serverMiddleware! Let's take a look in this Vue.js and Nuxt.js tutorial!
Great course to pick up Vue! bit.ly/2CTvsvx
___
LEARNING TO CODE? CHECK OUT THESE COURSES! (SOME ARE AFFILIATE)
THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
THE ADVANCED WEB DEVELOPER BOOTCAMP - bit.ly/2h53MYg
THE ULTIMATE VUE JS 2 COURSE - bit.ly/2CTvsvx
ANGULAR 4 - bit.ly/2AG0IdP
CHECK OUT THIS COURSE - Angular 5 - The Complete Guide - bit.ly/2sCMxWm
CHECK OUT MY AMAZON STORE - www.amazon.com...
REACT FOR BEGINNERS - bit.ly/2BctxOE
ES6 - bit.ly/2iF4YT3
LEARN NODE - bit.ly/2jKLYpE
___
JOIN MY FACEBOOK GROUP AND START LEARNING CODE - / 190277791450732
___
GET THE FIRST CHAPTER OF MY NEW BOOK Vue.js in Action! SIGN UP HERE! - bit.ly/2GWWuEw
GET MY LAST BOOK EMBER.JS COOKBOOK! - goo.gl/LEIdSc
GET MY NEW BOOK VUE.JS IN ACTION - goo.gl/qohSPs
___
Links
nuxt.js.org
___
MY WEBSITE - www.programwith...
MY TWITTER - / erikch
MY FACEBOOK - / programwitherik
🚨 IMPORTANT:
Cllick here For the Best Nuxt Course Ever : bit.ly/2LalQka
so when process.server option doesn't work? as you said it doesn't work always?
if I want to get data from serverMiddleware without Express, I need to combine it with middleware ? I tried to get data in ma vue page from the code running on server side (serverMiddleware) and I have problem to do that. Very little about that in docs. Do you have good example how to do it? not using express? I just need it to very simple request / small app
Thanks! Im learning nuxtjs but wanted to enjoy the freedom of "normal" express server stuff so I can easily implement redis cache etc. for my api endpoints. This helped me a lot
This is the video that I was exactly looking for. Thanks Erik
now i finally understood this, im scratching my head like a days, thank you Erik
Nice Tutorial. Thanks! But may you answer me one question. What´s this window you´re using for observing server activity?
Love you man! You made so many vids with answers to so many questions I have! :D
Thanks a lot Erik for these pointers on the differences between Nuxt Middleware, Nuxt built-in Node server, and an actual separate Node/Express server... I had asked you for that in the context of your on-going Nuxt course, and I hope you are going to expand on these points with more in depth examples in the course! I am usually working with a Node server on the backend (full Stack JavaScript), but the possibility to create a small Node/Express server inside the Nuxt App is a great solution, that I will try to implement in my on-going Nuxt project...
That's on my list, to talk about in the course! Thanks for the suggestion on this :)
Thank you Erik
I get a better understanding about Nuxt Js feature
Thank you very much. I was really need to understand this. Awesome
Glad it was helpful!
This was very helpful. I don't know why the Nuxt docs are so parse on this feature.
Thx for this tutorial Erik ! As soon u will make a course about Nuxt on Udemy i will buy it !!!
Awesome, I also have my course Create Awesome Vue.js apps with Nuxt.js!
Erik, you may want mention that if you use the generate target in the package.json, that none of this works at all. So if you are building an app that sits on just a normal web server, you get none of these nice goodies.
I know it may be obvious, but to anyone starting out and playing with deployment, they may have troubles with why things aren't working as expected.
Yes! good point!
@@ProgramWithErik would there be a solution in this case? I guess if on netlify could use Functions...
I build a symfony api for each project to decouple the front and back completely.
Yeah, I think that's a good idea. You can run a node server inside Nuxt, but you can certainly extract that out for the API
No point to use Express with Nuxt which is already SSR. How to get data from serverMiddleware without Express?
Hello. Thanks a lot for your video. At 14:40 you talk about protecting API keys. Could you please elaborate on this?
You could use something like dotenv library so they get imported that way.
you're really awesome description thank you for understand middleware section in nuxt
You are welcome!
How do you use Koa as the server middleware instead of Express? How can we pass on the server session to Nuxt?
I've never used Koa, I'll look into this.
this video was super helpful.
Thank you for the video. That is a very helpful one.
It's all cool and such but it would really be more helpful if you could provide some practical examples out of it. By now all of that information can be retrieved from Nuxt docs. Setting Express based Nuxt app can be created during regular project init process so there's no reason to build it from scratch in serverMiddleware
If I call /api from nuxt app (I want to use it as backend /api should response with jsons) I got infinite recursive nuxtServerInit method calls
Nice tutorial, this tutorial helps me. Thank You💖
You are welcome!
Hello, thank u very much for the video! I am wondering will the custom express API shown here work for static generated site using nuxt generate?
Why did you use process.server when you have context.isServer ?
Thank you! 🚀
I guess this serverMiddleware could be useful to create the Stripe Session token for Stripe Checkout or Stripe Customer Portal. Anybody had the chance to try that?
is there anyway to access nuxt context from servermiddleware?
Thank u for this awesome video
You are welcome!
Will you also be writing Nuxt.js in action? We loved ur Vuejs in action book.
How do i get IP adress from client side when user submit form ? already google but found information doesn't clear for me
Liked the video. I ran it in dev mode and work, but when I do a nuxt generate and then deploy to firebase, it does not work. I set up a simple hello response. When I do a npm run dev I can browse to the api/hello, but when I deploy to firebase, with nuxt generate it does not work. Please can you do a follow up video or show how that will be deployed and work in production
You'd want nuxt build and deploy it to a server or deploy to firebase hosting, still using nuxt build, combined with cloud function. To summarize, you don't want to deploy as static, you need a server.
Thanks Erik!
in vuetur extension in vs code, if you type scaffold, then template, script and style tags are generated automatically
Good tip! I was using a few generators, and I have vetur installed, I should use it.
@@ProgramWithErik I forgot to say, but your video was awesome. I just forgot to mention that was replaced by which does the same thing
Is it works on a static hostings? Dynamic routes for example. Without generating index.html for each route
If you use Nuxt with static pages, and you have a dynamic route you have to generate those routes inside the nuxt config file. The generate command will NOT work.
nice tutorial, thanks
I have a few questions and wanted to see if you can clear them up for me (related to what Rob W. said several months ago):
1. does this not work if the Nuxt project runs on an integrated Express server during dev mode? I kept running into problems trying out the serverMiddleware portion of this tutorial on an existing project, and finally got it to work with a plain Nuxt app
2. the existing project mentioned is a static website that is currently 'generated' and hosted on Netlify. After reading Rob W's comments, does it mean if I wanted to implement sending an email at form submit with serverMiddleware, I need to move the website to a hosting service like Heroku and 'build' the project to host it with server-side functions?
finally the I got it working for the first point
still hope you can take a moment and confirm about the 2nd point, thanks
Wait, if you write auth logic in serverMiddleware, will the code be viewable in the browser?
No. It's not available in the browser. If you run Nuxt in development mode, they will show console statements from the server though
Nice tutorial
When is use case that we need server middleware?
Very, very basic situations. Maybe some basic calls to a lambda...
@@ProgramWithErik what is lambda in this context?
Hello! Can I make request from component.vue (client side) on "localhost:3000/api" (server side) and save response data in the store? How do it? Thank
yeah, just use the @nuxt/axios module for make a reques to the api server side and process the response.
Wow. This is amazing
Thanks!
ok nuxt is dope
how to call multiple api in middlewear and access from store ?? It would be so greatful if you could make video for it??
I have not looked at that, but that's a good idea.
ayyyyyeee.
Vue now has more stars than React does on Github - twitter.com/dan_abramov/status/1007439168400654336/photo/1 .....I've been saying this for 6 months ... Vue is going to blow react out of the water in terms of popularity if they keep developing it the way it has been over the last year. React is a pain in the ass to use and it's really not worth the effort for what you get at the end of it.
Yes, very exciting!