Hello I purchased this course on Udemy and watched almost all videos....very good content I request you to make a course on some other real-life full stack projects using Nuxt only with mongoose and mongodb database with crud operations....no other 3rd party dependencies like supabase or anything ...and also teach how to self host and deploy that application on a private vps server instead of netlify or such things....that will be very helpful... thank you
Great video. Thank you for this. I've just started learning Nuxt. But I have another tip regarding applying the right round corner to the left and right option button in the project 1. You could write two CSS rules: .option:first-child {...} and .option:last-child {...}. At least in your way people get to learn how to use the index in a "v-for".
42:20 You can use css there instead of directly setting classes. This approach is going to be more universal if you gonna wanna set more options in future. .option-buttons .option:nth-child(1) { border-radius: 1rem 0 0 1rem; } .option-buttons .option:nth-last-child(1) { border-radius: 0 1rem 1rem 0; }
1:53:50 your don't need JS for that...! Know your CSS and use either .option:first-child { border-end-start-radius: 2rem; // border-bottom-left-radius: 2rem; border-start-start-radius: 2rem; // border-top-left-radius: 2rem; } .option:last-child { border-end-end-radius: 2rem; // border-bottom-right-radius: 2rem;
border-start-end-radius: 2rem; // border-top-right-radius: 2rem; } or .option:first-of-type { border-end-start-radius: 2rem; // border-bottom-left-radius: 2rem; border-start-start-radius: 2rem; // border-top-left-radius: 2rem; } .option:last-of-type { border-end-end-radius: 2rem; // border-bottom-right-radius: 2rem; border-start-end-radius: 2rem; // border-top-right-radius: 2rem; } Hope this helps. PS: Check out my version of the first project here: stackblitz.com/edit/nuxt-starter-p1phed?file=README.md I added a bit more semantic html and streamlined some of the JS.
2:48:00 In Row.vue, if an error message shows "Type '{ background: string; } | null' is not assignable to type 'StyleValue | undefined'" from , by replacing null with null as any. The above error message can be removed.
2:48:42 forget the wacky JS stuff to get the odd and even styling and just use plain old C.S.S. please! .row:nth-child(even) { background-color: lightgrey; } and the job is done! pls don't teach some hacky JS depending on an array index, when css can get the styling with 3 lines of CSS. don't get me wrong, i got a necessary introduction to the Nuxt magic, but if i see you coding for 5 minutes in js to achieve some styling that a pretty basic css selector can achieve in 10 seconds i get some small doubts about your skills. also other listeners of your courses might think that you use this stuff to stretch the length of your videos in general, so that they seem to have a lot more content as they really do... ah and btw the 'row' class gets some unwanted styling from bootstrap so that there is an ugly overhang left of the black underline of 'THE 50: THE RANKING'. thats only one of the reasons i avoid css frameworks, because your always have to fight against them at some point. with all that been said still a nice intro to some of the most relevant Nuxt concepts! thanks!
Excellent content, however, I can't figure out why extra classes and computed values instead good old fashion CSS pseudo-selector "::first-of-type" and "::last-of-type" to cover option buttons roundness?
At 2:47:07 you are probably better of using plain css, just paste: .table-col > :nth-child(odd) { background-color: rgba(44, 44, 44, 0.1); } inside of the Table.vue style section at the bottom
Wow, bro. My dream came true. Fantastic bro. I just bought the paid version in Udemy. I do all my courses in Udemy, the best platform for learning. Please keep it updated.
2:18:36 in configuring nuxt.config.ts. I have two error messages. The first error is 'Cannot find module 'nuxt3' or its corresponding type declarations.ts(2307)' from import { defineNuxtConfig } from "nuxt3"; So , you can replace the above code with import { defineNuxtConfig } from 'nuxt/config'; The second error is 'Argument of type '{ meta: { link: { rel: string; href: string; }[]; }; }' is not assignable to parameter of type 'NuxtConfig'. Object literal may only specify known properties, and 'meta' does not exist in type 'NuxtConfig'.ts(2345)' from meta: { link: [ { rel: "stylesheet", href: "cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css", }, ], }, Here, you can replace them with app: { head: { link: [{ rel: 'stylesheet', href: 'cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' }], script: [{ src: 'cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js' }] } } Good luck!!!!!!!!
These instructions saves me!!! But I still want to know what cause these consequence? Is the Nuxt frame version or something else? I installed Nuxt ^3.11.2(latest version currently,which found in package.json created by npm command) and Bootstrap v5.1(used cdn link,just followed the step from video)
i have an error Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ gender: Gender; popularity: Popularity; length: Length; }'. No index signature with a parameter of type 'string' was found on type '{ gender: Gender; popularity: Popularity; length: Length; }'.ts(7053)
Same here.I came across this Typescript Error when the lecturer walk through the computeButtonClasses part at 1:46:30 and 1:52:17 . I still cant figure out how to fix it.
Thanks a lot for the great tutorial. Pushed me finally to move ahead from the old Universal Vue which has no support for Vue3 and is no longer maintained
Mate, this is awesome! So keen to learn Nuxt 3 with the latest tech and make it full stack. Bought the course immediately - thanks for the generous discount too!
Great video, thanks man. Could someone please explain 'options[option.category]' from project 1 _ 1:46:30? I'm having a hard time wrapping my head around it as it seems like we're using a category name (object property?) as an index for the options array. What am I missing? Thanks in advance.
option.category is the type of the current button and options[option.category] is the value of the current button. options is passed from the parent component, and when the child component clicks it, options[option.category] = value; because it is an object, it can modify the parent component's value
Awesome guide, I'm having an issue with ts requiring me to manually import though, is this a nuxt setting or something I can change in tsconfig? EDIT: Specifically reactive() and ref(). EDIT2: I had some weird include statement in tsconfig, remmoved it and things are working idk :D
Hi, I am new to Nuxt 3 and I can't seem to get the active link class to work one a parent when I navigate to a child page. any ideas where I have gone wrong.
So far it looks great! I'll watch the rest of this and if I like it I'll get the udemy course. I'm really impressed with Nuxt. I looked at Vue before but it didn't click with me (I usually use React), Nuxt seems amazing though. I hope the actual course has proper audio and doesn't do this switching thing, but it's not a dealbreaker, I have a mono output device fortunately. But even if I don't buy it, still pretty nice work on the first 30 minutes of this video!
@@yassineabdelouafi Funny you should say that, I'm in the middle of moving one of my projects to next with trpc. Next is a bit clunky but i decided to move when they released RFC for layouts, that's what I was missing in it before. Sure it's not out yet but I can live without it for a few months while learning the rest.
I have a [HTTP/1.1 500 Vite Error] My node version 18.12.1 At the same time i have a error on the screen ; No response returned from render handler: /__nuxt_error?url=/&statusCode=500&statusMessage=Vite+Error&message=[vite-node]+ERR_INVALID_URL_SCHEME]+/node_modules/ufo/dist/index.mjs&stack=%3Cpre%3E%3Cspan+class=%22stack+internal%22%3Eat+/node_modules/ufo/dist/index.mjs%3C/span%3E%3C/pre%3E&data What can i do for that? I didn't find any answer
I bought the course and it is nice. However, I would like to see the communication between the H3 and MongoDB, PostgreSQL or MariaDB used on a local server. (not the full serviced cloud) - please add this to the course
@@softblood1941 I really dont like the material design language they are following, but i want to take benefit from quasar's one code all platform feature. Is there something that we can use quasar's backbone with unocss or something?
Hey Laith your udemy course is free for download on some websites, honestly I was gonna download it cause I cant afford it and I really need it for a job opportunity but I felt guilty and I didn't want to waste your efforts and I just wanted to let you know that it's being pirated. I know some websites that stole your course, reply to this comment and I'll dm you as I don't want to make them more public.
Im getting typescript errors in Options.vue. I went and downloaded your code and overwrote mine, and there were 4 errors. computeClassButton "parameter 'value' implicitly has an 'any' type. Same issue with: If (props.options[props.option.category] Element implicitly has an 'any' type because expression of type string can't be used to index type
laith, nuxt3 seems cool. got ur udemy course BUT ur video screen res is so absurdly low we can only see 18 lines of code AND ur github does not match SO its an awful mess going back n forth thru ur videos to see n piece together the lines of code btwn app n data files to what would work. losing hair. please update github. thx.
The else is not needed since if statement have return statement. It should have only be like const filterNames = names.filter((name)=> name.gender === options.gender) .filter((name)=> name.popularity === options.popularity) .filter((name)=> { if (options.length === Length.ALL) { return true; } return name.length === options.length }).map(name => name.name);
In Option.vue, I have an issue from @click="options[option.category] = value". The error message is Type 'import("e:/nodejs/Nuxtcontent/01-Baby-Name-Generator/data").Gender | import("e:/nodejs/Nuxtcontent/01-Baby-Name-Generator/data").Popularity | import("e:/nodejs/Nuxtcontent/01-Baby-Name-Generator/data").Length' is not assignable to type 'never'. --------------------------------------------------------------------------------------------------------------------------------------------------------------------- Does anyone know how to fix this issue?
Udemy Promo
www.udemy.com/course/the-nuxt-3-bootcamp-the-complete-developer-guide/?couponCode=224DE9A0D99C10AD4845
199 $ or euro or what ? cause here in egypt it shows 199E
Hello
I purchased this course on Udemy and watched almost all videos....very good content
I request you to make a course on some other real-life full stack projects using Nuxt only with mongoose and mongodb database with crud operations....no other 3rd party dependencies like supabase or anything ...and also teach how to self host and deploy that application on a private vps server instead of netlify or such things....that will be very helpful... thank you
Bro the audio switching between going in both ears to just one is giving me whiplash 😵
me too, it's annoying.
Thanks for this comment. I was listening to this with just my right headphone and thought there were just blocks of no audio for some reason 😂
Great video. Thank you for this. I've just started learning Nuxt. But I have another tip regarding applying the right round corner to the left and right option button in the project 1. You could write two CSS rules: .option:first-child {...} and .option:last-child {...}. At least in your way people get to learn how to use the index in a "v-for".
This is awesome man. I learned Nuxt 2 for a frontend job, but seems like a good time to get deep into this update. I will buy your Udemy course soon.
42:20 You can use css there instead of directly setting classes. This approach is going to be more universal if you gonna wanna set more options in future.
.option-buttons .option:nth-child(1) {
border-radius: 1rem 0 0 1rem;
}
.option-buttons .option:nth-last-child(1) {
border-radius: 0 1rem 1rem 0;
}
1:53:50 your don't need JS for that...! Know your CSS and use either
.option:first-child {
border-end-start-radius: 2rem; // border-bottom-left-radius: 2rem;
border-start-start-radius: 2rem; // border-top-left-radius: 2rem;
}
.option:last-child {
border-end-end-radius: 2rem; // border-bottom-right-radius: 2rem;
border-start-end-radius: 2rem; // border-top-right-radius: 2rem;
}
or
.option:first-of-type {
border-end-start-radius: 2rem; // border-bottom-left-radius: 2rem;
border-start-start-radius: 2rem; // border-top-left-radius: 2rem;
}
.option:last-of-type {
border-end-end-radius: 2rem; // border-bottom-right-radius: 2rem;
border-start-end-radius: 2rem; // border-top-right-radius: 2rem;
}
Hope this helps.
PS:
Check out my version of the first project here:
stackblitz.com/edit/nuxt-starter-p1phed?file=README.md
I added a bit more semantic html and streamlined some of the JS.
2:48:00 In Row.vue, if an error message shows "Type '{ background: string; } | null' is not assignable to type 'StyleValue | undefined'" from
,
by replacing null with null as any. The above error message can be removed.
you should focus on nuxtjs insted of styling and navbar and boutstrap
2:48:42 forget the wacky JS stuff to get the odd and even styling and just use plain old C.S.S. please!
.row:nth-child(even) {
background-color: lightgrey;
}
and the job is done!
pls don't teach some hacky JS depending on an array index, when css can get the styling with 3 lines of CSS.
don't get me wrong, i got a necessary introduction to the Nuxt magic, but if i see you coding for 5 minutes in js to achieve some styling that a pretty basic css selector can achieve in 10 seconds i get some small doubts about your skills. also other listeners of your courses might think that you use this stuff to stretch the length of your videos in general, so that they seem to have a lot more content as they really do...
ah and btw the 'row' class gets some unwanted styling from bootstrap so that there is an ugly overhang left of the black underline of 'THE 50: THE RANKING'. thats only one of the reasons i avoid css frameworks, because your always have to fight against them at some point.
with all that been said still a nice intro to some of the most relevant Nuxt concepts! thanks!
Presentation 11/10, Coding 10/10, Explanation 10/10, marvelous video! Learned a ton from you, thanks Laith!
Hey Laith! Brilliant tutorial. For the bootstrap class, instead of `ml-auto` it is actually `ms-auto`. Margin-start=auto.
Keep up the work, I love it!
Bruh, I was just starting to learn about 3.
Thanks so much!
Just purchased from looking at how you break down the course - will begin shortly. Much appreciated brother
Excellent content, however, I can't figure out why extra classes and computed values instead good old fashion CSS pseudo-selector "::first-of-type" and "::last-of-type" to cover option buttons roundness?
At 2:47:07 you are probably better of using plain css, just paste:
.table-col > :nth-child(odd) {
background-color: rgba(44, 44, 44, 0.1);
}
inside of the Table.vue style section at the bottom
Wow, bro. My dream came true. Fantastic bro. I just bought the paid version in Udemy. I do all my courses in Udemy, the best platform for learning. Please keep it updated.
Just bought your couse in Udemy. Great explanations.
2:18:36 in configuring nuxt.config.ts. I have two error messages. The first error is 'Cannot find module 'nuxt3' or its corresponding type declarations.ts(2307)' from
import { defineNuxtConfig } from "nuxt3";
So , you can replace the above code with import { defineNuxtConfig } from 'nuxt/config';
The second error is 'Argument of type '{ meta: { link: { rel: string; href: string; }[]; }; }' is not assignable to parameter of type 'NuxtConfig'.
Object literal may only specify known properties, and 'meta' does not exist in type 'NuxtConfig'.ts(2345)'
from
meta: {
link: [
{
rel: "stylesheet",
href: "cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
},
],
},
Here, you can replace them with
app: {
head: {
link: [{
rel: 'stylesheet',
href: 'cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'
}],
script: [{
src: 'cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'
}]
}
}
Good luck!!!!!!!!
Thanks!
These instructions saves me!!!
But I still want to know what cause these consequence?
Is the Nuxt frame version or something else?
I installed Nuxt ^3.11.2(latest version currently,which found in package.json created by npm command) and Bootstrap v5.1(used cdn link,just followed the step from video)
you got a new subscriber dude. i really appreciate your effort. keep the good work!
Man woww, reallly loving this tutorial, you re brilliant
Pretty Nice job done! Very clear explanation of this Amazing JavaScript Framework. You got 10/10!
wow! finally i got what is nuxt, thanks a lot and continiue
Please teacher I really want to learn nginx. I'm not so good at english but all of your course is amazing
Thank for course. How to create newly app with javascript?
Thanks man! Purchased already!
in 01:49:10 , why didnt you just do :
.option:first-child{
border-radius: 1rem 0 0 1rem;
}
.option:last-child{
border-radius: 0 1rem 1rem 0;
}
??
17:59-19:26
headphones user cannot hear you voice from right side
Thanks a lot for the great tutorial. plz how i can import bootstrap library js like Toast, carrousel, ...ect to my project nuxt3
i have an error
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ gender: Gender; popularity: Popularity; length: Length; }'.
No index signature with a parameter of type 'string' was found on type '{ gender: Gender; popularity: Popularity; length: Length; }'.ts(7053)
Same here.I came across this Typescript Error when the lecturer walk through the computeButtonClasses part at 1:46:30 and 1:52:17 . I still cant figure out how to fix it.
Hey Laith instead of useMeta should be using useHead composable. useMeta has been deprecated. Good Video
Thanks a lot for the great tutorial. Pushed me finally to move ahead from the old Universal Vue which has no support for Vue3 and is no longer maintained
where can we find the link of the git repositories related to this video?
Mate, this is awesome! So keen to learn Nuxt 3 with the latest tech and make it full stack. Bought the course immediately - thanks for the generous discount too!
guys can anyone do a benchmark or performance test b/w nuxt and sveltekit?
Great video, thanks man. Could someone please explain 'options[option.category]' from project 1 _ 1:46:30? I'm having a hard time wrapping my head around it as it seems like we're using a category name (object property?) as an index for the options array. What am I missing? Thanks in advance.
option.category is the type of the current button and options[option.category] is the value of the current button.
options is passed from the parent component, and when the child component clicks it, options[option.category] = value; because it is an object, it can modify the parent component's value
Awesome guide, I'm having an issue with ts requiring me to manually import though, is this a nuxt setting or something I can change in tsconfig?
EDIT: Specifically reactive() and ref().
EDIT2: I had some weird include statement in tsconfig, remmoved it and things are working idk :D
hey looks great. Sometimes i get the sound only to my left ear
on windows 10 in the settings you can turn on mono audio
Awesome content. Is there any chance your course or future videos will include nuxt vitest pinia with vite?
Make some MEVN course :)
Payment on Udemy does not work for me. Is there another way to buy a course? I really want to go through it.
Very Good tutorial @lalith can you make a detailed video on how to migrate projects from nuxt2 to nuxt3? It would be great if you make one
Can you create a small tutorial on using Nuxt 3 and AOS?
thank you, i'm certainly going to purchase your course
This is insanely good. Thanks man
عظمة على عظمة على عظمة
Hi,
I am new to Nuxt 3 and I can't seem to get the active link class to work one a parent when I navigate to a child page. any ideas where I have gone wrong.
Incredible once again! I just bought the course on Udemy can't wait to start it. Negative point, why is it limited to 720p on udemy?
Just what I needed, also with supabase 👌thanks alot for this.
So far it looks great! I'll watch the rest of this and if I like it I'll get the udemy course. I'm really impressed with Nuxt. I looked at Vue before but it didn't click with me (I usually use React), Nuxt seems amazing though.
I hope the actual course has proper audio and doesn't do this switching thing, but it's not a dealbreaker, I have a mono output device fortunately.
But even if I don't buy it, still pretty nice work on the first 30 minutes of this video!
if you use react you must learn about nextjs
@@yassineabdelouafi Funny you should say that, I'm in the middle of moving one of my projects to next with trpc. Next is a bit clunky but i decided to move when they released RFC for layouts, that's what I was missing in it before. Sure it's not out yet but I can live without it for a few months while learning the rest.
I have a [HTTP/1.1 500 Vite Error] My node version 18.12.1
At the same time i have a error on the screen ;
No response returned from render handler: /__nuxt_error?url=/&statusCode=500&statusMessage=Vite+Error&message=[vite-node]+ERR_INVALID_URL_SCHEME]+/node_modules/ufo/dist/index.mjs&stack=%3Cpre%3E%3Cspan+class=%22stack+internal%22%3Eat+/node_modules/ufo/dist/index.mjs%3C/span%3E%3C/pre%3E&data
What can i do for that? I didn't find any answer
plz make video about auth in nuxt 3
I bought the course and it is nice. However, I would like to see the communication between the H3 and MongoDB, PostgreSQL or MariaDB used on a local server. (not the full serviced cloud) - please add this to the course
I will
Hi did you also do the freelance
Found this video yesterday and bought the course. Will the course have updates?
Thanks for this, Ill surely buy the complete course, just wanna ask, what is your opinion regarding nuxt+pinia+axios+quasar?
Why did you import the name data? I thought with nuxt3 you don't have to import anything anymore?
Awesome stuff man!
Valeu!
Is the promo code still working? It does redirect me to the normal page of the course without any discount on
I purchased the course today. Please add firebase integration and utilising firebase effectively via vue 3 n Next 3. Thanks in advance.
Awesome guide!!!
Thank you very much that is very helpful. Ich bin hier von Deutschland 🇩🇪
Laith, Thank you so much!
can you please please please do a video on hasura. if its in your scope of knowledge
I did one already
@@laithacademy i can't find it can u pu the link here.
@@laithacademy ohh i got it thankyou very much
I think it could be more usefull to integrate tailwind, or at least scss, instead of plain css
Agree 100%
Super amazing!!
Hello FYI the coupon you provided doesnt apply the discount, its an affiliate link but without discount :)
youre great man add github data link here which you used in this project
Wow, just wow content. TY.
Hahahah I was literally waiting for this.
hey buddy do you have a coupon of discount for your nestjs course?
www.udemy.com/course/the-nest-js-bootcamp-complete-developer-guide/?couponCode=79B2277FA8E3B65E84CC
@@laithacademy Payment on Udemy does not work for me. Is there another way to buy a course? I really want to go through it.
how to add third party scripts in nuxt 3
i like it, thx for this tutorial
Bro you should add nuxt link
What do you prefer React or Vue? Next or Nuxt?
go for Vue with Quasar Framework or React with Next with tailwind
@@softblood1941 I really dont like the material design language they are following, but i want to take benefit from quasar's one code all platform feature. Is there something that we can use quasar's backbone with unocss or something?
where's the github page?
Is the course available on Udemy business?
I’d love it to be but that is up to Udemy
Hey Laith your udemy course is free for download on some websites, honestly I was gonna download it cause I cant afford it and I really need it for a job opportunity but I felt guilty and I didn't want to waste your efforts and I just wanted to let you know that it's being pirated. I know some websites that stole your course, reply to this comment and I'll dm you as I don't want to make them more public.
But is Nuxt 3 production ready
not yet, still has Release Candidate Status. It should reach v3.0.0 in summer according to the roadmap.
Your content is awesome! By the way, what is your setup on VS code? Any suggestion for the auto formatting?
Don't get sound from right headset! Video sound broken!
Im getting typescript errors in Options.vue. I went and downloaded your code and overwrote mine, and there were 4 errors.
computeClassButton "parameter 'value' implicitly has an 'any' type.
Same issue with:
If (props.options[props.option.category]
Element implicitly has an 'any' type because expression of type string can't be used to index type
coupon expired
laith, nuxt3 seems cool. got ur udemy course BUT ur video screen res is so absurdly low we can only see 18 lines of code AND ur github does not match SO its an awful mess going back n forth thru ur videos to see n piece together the lines of code btwn app n data files to what would work. losing hair. please update github. thx.
Amazing tutorial. Instaint subscribe :-)
incredibly cool
Awesome!
3:12:22
Why did you choose Bootstrap over Tailwind?
The else is not needed since if statement have return statement. It should have only be like
const filterNames = names.filter((name)=> name.gender === options.gender)
.filter((name)=> name.popularity === options.popularity)
.filter((name)=> {
if (options.length === Length.ALL) {
return true;
}
return name.length === options.length
}).map(name => name.name);
Playback speed: 1.75x. You're welcome.
Bartholomew is a name from the Bible
this tutorial is totally mess. made a simple app much more complex
Это не курс по NUXT, это грёбаный курс по вёрстке!
If anyone is looking for the the github url with the names:
github.com/harblaith7/Nuxt3-Course-Udemy/blob/main/01-Baby-Name-Generator/data.ts
thank you
In Option.vue, I have an issue from @click="options[option.category] = value". The error message is
Type 'import("e:/nodejs/Nuxtcontent/01-Baby-Name-Generator/data").Gender | import("e:/nodejs/Nuxtcontent/01-Baby-Name-Generator/data").Popularity | import("e:/nodejs/Nuxtcontent/01-Baby-Name-Generator/data").Length' is not assignable to type 'never'.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
Does anyone know how to fix this issue?