@@jeffrey_codes Is there a way in nuxt to load a component based on viewport/media query/device? More specifically, I'd like to present a full page background video and only load a specific video for that viewport. Like srcset for images, I guess. I'd like to have a separate vertical mobile video, and a separate video for desktop. Can this be done? Just wondering this would totally solve my issue with having to crop a single larger video file when presenting it on mobile. If it does work, would it apply to most component based media queries? I.e. serve appropriate component and any content inside will load automatically, such as images, video, etc. Not sure how to articulate this, there's probably a conventional name or description for what I'm trying to accomplish. Cheers
Great video man! Thank you. The problem you stated at 36:15 about shifting in x axis is because in index page the content is larger than screen height so the browser adds a scrollbar, but in videos page, it does not happens. And as you mentioned it is easily fixable with css. Thank you for the great content. ❤️❤️
LOL. At first I was like, I can listen to this at 1.25 speed, later around 15" I put it back to 1.0 speed, then at around 25" I was thinking I need to go 0.75 speed because I am just not getting this routing part. I am brand new to VueJS and didn't know about this Nuxt thing, and now it is blowing my mind! :-)
Hey man, you literally put more than 20$ worth of long, dreaful and boring tutorials on Udemy in these series. Really appreciate it! You're a good tutor.
The slight x-axis shift at 36:06 is only happening because on one page there's a side scrollbar, and on the other page there isn't. So it's just the width of the viewport changing on each page, that's all. No CSS issue 👍
Great content and i followed well but at 28:55 im stuck at the nuxtlink. When i bind the page id to the nuxtlink, browser return title is undefine.. Sad..
awesome course! would be better if you could have the ruby API live so would be accessible for us to test. one more section on how to configure server for nuxt and in overall how to deploy it also could be useful.. tnx
when try to do context.$axios.get('localhost:3000/api/videos') i don't get any videos object. I am 404 error. how to do that. hope you understand. Thanks
Hi, thanks for this video! Just a question, there's no seed data in the sqlite db, right? The seeds.rb file on the backend project is empty, and I can't pull any videos at 43:20 mark
There's no seed data, although that would be a good idea. For now, here's some json files with the data: github.com/jeffreybiles/vue-screencasts/tree/de7edac1fe2b072421555b7d02bc3ec8fad7e3f8/src/mirage
i dont understand, do you still need a backend for nuxt js ? or its like a all in one application? right now im using laravel and vue js for my application. if i use nuxt js i dont need laravel for now? Thanks
For hosting the Vue app itself, Nuxt takes care of that. You can also have Nuxt host your API using express or other node-compatible frameworks... but if you're already using Laravel, then you probably won't want to rewrite all that API code. In that case, just host your Nuxt app and your Laravel app separately. (I know we already talked on FB messenger, I'm just making the answer public)
Here is a backend using Laravel, just incase some are having problem with the RoR. The Laravel is not as complete as the RoR backend, but I will slowly work on this as I progress to the course and needed more functionality. So far, the video list(index) and video show is working. Got a limited number of Course and Videos entry on the seeder. github.com/atparinas/vue-screencast-api
Nice tutorial Can you please explain. How to divide nuxt app into modules. Example:- I have 1. Admin 2. Normal User and 3. Employe I want to load each of the modules only when the related user logged in. That means, If admin logins. Only admin components should load. Waiting for your reply. By the way, Your tutorial was nice.
Glad you liked the tutorial. Nuxt does this automatically based on route/page. If you don't use admin components in your other pages, they won't load with your other pages.
The point you're making about the difference between vuex and just using the built in asyncData is a bit misleading. Doing it the way you did, there is no benefit of using vuex since you're treating the data still as component level data. The big benefit of a global state only makes sence if you take out your data requests from individual components. There you only want to use data from and trigger actions on the store. Imagine for example an app where you not only have one or two components accessing the same data. You don't want to copy paste the axios.get over multiple components in the same or similar manner. From the component you only call an action 'fetchVideos' with whatever parameters needed and then call mutations from within those actions. Actions are reusable and an extra benefit is that you api calls are all in your store modules, so you don't have to go hunting for them if your backend API changes. On a side note: Have a look at graphql and the apollo client. If you have control over your backend API that is something that could makes things even easier. Although i just started trying it...
Wooow man, just, Wooow, when everything starts to fit into its place around 30min of video, really exciting!!
Лучшее, что я видел на данный момент по nuxt. Оставляю сообщение на русском для нашего русскоговорящего "собрата". :) Спасибо!
У нашего собрата, к сожалению, большие проблемы с английским, поэтому почти все смотрят Лаврика и Дударя
That is a great video, certainly the best nuxt js introduction video on youtube. Thank you.
Thanks so much!
@@jeffrey_codes Is there a way in nuxt to load a component based on viewport/media query/device?
More specifically, I'd like to present a full page background video and only load a specific video for that viewport. Like srcset for images, I guess. I'd like to have a separate vertical mobile video, and a separate video for desktop.
Can this be done? Just wondering this would totally solve my issue with having to crop a single larger video file when presenting it on mobile.
If it does work, would it apply to most component based media queries? I.e. serve appropriate component and any content inside will load automatically, such as images, video, etc.
Not sure how to articulate this, there's probably a conventional name or description for what I'm trying to accomplish.
Cheers
This was EXACTLY what I needed. Informative and succinct. Thank you for taking the time to do this.
That's fantastic to hear! Glad to help, and thank you for the comment :)
this 22:19 is what I looking for, thanks for making the video!
Awesome!! you have given a very good calrification of every ponts... thatnks a lot!!
Great video man! Thank you.
The problem you stated at 36:15 about shifting in x axis is because in index page the content is larger than screen height so the browser adds a scrollbar, but in videos page, it does not happens. And as you mentioned it is easily fixable with css.
Thank you for the great content. ❤️❤️
Bro, you're amazing, you have the most compleate resouce about Vue I had found yet!!!
Great video.
On of the best and more compact video about Nuxt.
LOL. At first I was like, I can listen to this at 1.25 speed, later around 15" I put it back to 1.0 speed, then at around 25" I was thinking I need to go 0.75 speed because I am just not getting this routing part. I am brand new to VueJS and didn't know about this Nuxt thing, and now it is blowing my mind! :-)
Hey man, you literally put more than 20$ worth of long, dreaful and boring tutorials on Udemy in these series.
Really appreciate it! You're a good tutor.
Thanks!
how we run ruby server i cant run it please say i need hint
The slight x-axis shift at 36:06 is only happening because on one page there's a side scrollbar, and on the other page there isn't. So it's just the width of the viewport changing on each page, that's all. No CSS issue 👍
How do I accomplish nested routes with Nuxt 3? I've read the docs but can't get it workign
Great content and i followed well but at 28:55 im stuck at the nuxtlink. When i bind the page id to the nuxtlink, browser return title is undefine.. Sad..
This is really awesome, thanks a lot for sharing bro! Keep it up! ❤️
You deserve more subscribers.
Thanks. The links in the description are handy. Great you will continue with Nuxt videos.
This video is so clearly explained.thanks buddy
Great work. Thank you for taking the time to do this. For me that's all I was looking for.
Are there any publicly accessible API's we can use for getting data? That would make it a lot easier to follow along.
Good idea. In new tutorials I'll try to minimize the other apps you need set up in order to follow along.
Thanks. It saved me a lot of time.
WOW! Explained very nicely!
Great video man thank you .
Awesome introduction, I really loved it!! Thank you.
This is brilliant content. Thank You.
Awesome content. You deserve much more subscribers.
awesome course! would be better if you could have the ruby API live so would be accessible for us to test. one more section on how to configure server for nuxt and in overall how to deploy it also could be useful.. tnx
when try to do context.$axios.get('localhost:3000/api/videos') i don't get any videos object. I am 404 error. how to do that. hope you understand. Thanks
Thats because he already have an api in his machine only. So you're not getting that data
Do you have a server providing the videos you use @45:22 ? When I use axios to hit the /api/videos endpoint I get a 404.
i create nuxt with npm. but my project doesn;t have folder layouts. please help
Really great video. Thanks a lot!
what is the difference between fetching data from the server in the asyncData() method and created() hook?
More videos please :) With MongoDB and NUxtjs
Definitely more NuxtJS
How polite you are amazing 👏
Amazing content. Good job, man.
Thanks!
Great work man. I will also be starting a series on Vue soon ! Commendable, keep hustling :)
Hi, thanks for this video! Just a question, there's no seed data in the sqlite db, right? The seeds.rb file on the backend project is empty, and I can't pull any videos at 43:20 mark
There's no seed data, although that would be a good idea.
For now, here's some json files with the data: github.com/jeffreybiles/vue-screencasts/tree/de7edac1fe2b072421555b7d02bc3ec8fad7e3f8/src/mirage
how can i add this to the server. tq
Great video as always!
I learned from this video and now I can fetch data but having one problem. How do I set 404 error page if api url fallback to 404 page .
How can i download and use your ruby BackEnd , i never touch ruby before so xD
The code is available on GitHub: github.com/jeffreybiles/vue-screencasts-server/tree/47c546286742b42419d628264723eb006372329b
I'm in the same boat, never used Rails before. I got it at least running, but looks like we'll need to install Postgres as well?
Best Tutorial. Thanks so much/1
Great job ! So informative !
Informative
Thanks so much for this.... 10X like
thanks for this video
how to install webserver you are using on windows?
You're the best!!!
Great!
is it only me, there was no videos after connect to the server. like in 45.30
Freaki'n awesome man! \m/
i dont understand, do you still need a backend for nuxt js ? or its like a all in one application?
right now im using laravel and vue js for my application. if i use nuxt js i dont need laravel for now? Thanks
For hosting the Vue app itself, Nuxt takes care of that. You can also have Nuxt host your API using express or other node-compatible frameworks... but if you're already using Laravel, then you probably won't want to rewrite all that API code. In that case, just host your Nuxt app and your Laravel app separately.
(I know we already talked on FB messenger, I'm just making the answer public)
Thank you for this!!!
You're welcome! Glad you like it.
The router file is in the .nuxt folder.
Thank you~
very good . ❤👍💖
Hi question, is that a vscode plugin? when you create folder videos/1? thanks!
You just right click and select New File, then type in the path. It creates the nested path, no plugins required.
@@jeffrey_codes thanks will try that.
Here is a backend using Laravel, just incase some are having problem with the RoR. The Laravel is not as complete as the RoR backend, but I will slowly work on this as I progress to the course and needed more functionality. So far, the video list(index) and video show is working. Got a limited number of Course and Videos entry on the seeder.
github.com/atparinas/vue-screencast-api
thankyou sir for the laravel
Nice tutorial
Can you please explain. How to divide nuxt app into modules.
Example:-
I have 1. Admin 2. Normal User and 3. Employe
I want to load each of the modules only when the related user logged in.
That means, If admin logins. Only admin components should load.
Waiting for your reply.
By the way, Your tutorial was nice.
Glad you liked the tutorial.
Nuxt does this automatically based on route/page. If you don't use admin components in your other pages, they won't load with your other pages.
@@jeffrey_codes thank you
I will work on your comment
Nice joob.
Thanks!
frustrated because of the server side :( , but thanks anyway :)
great video i enjoyed watching it. but u complicate easy things a bit
The point you're making about the difference between vuex and just using the built in asyncData is a bit misleading. Doing it the way you did, there is no benefit of using vuex since you're treating the data still as component level data. The big benefit of a global state only makes sence if you take out your data requests from individual components. There you only want to use data from and trigger actions on the store.
Imagine for example an app where you not only have one or two components accessing the same data. You don't want to copy paste the axios.get over multiple components in the same or similar manner. From the component you only call an action 'fetchVideos' with whatever parameters needed and then call mutations from within those actions.
Actions are reusable and an extra benefit is that you api calls are all in your store modules, so you don't have to go hunting for them if your backend API changes.
On a side note: Have a look at graphql and the apollo client. If you have control over your backend API that is something that could makes things even easier. Although i just started trying it...
Check out the next video in the series, where we talk about this exact issue in depth.
you speak too slow, I even speed up the playback by 50%, and it's still slow