The Nuxt 3 Crash Course 

Udemy Promo www.udemy.com/course/the-nuxt-3-bootcamp-the-complete-developer-guide/?couponCode=224DE9A0D99C10AD4845

Bro the audio switching between going in both ears to just one is giving me whiplash 😵

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".

Just purchased from looking at how you break down the course - will begin shortly. Much appreciated brother

you got a new subscriber dude. i really appreciate your effort. keep the good work!

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!

Thanks man! Purchased already!

Bruh, I was just starting to learn about 3. Thanks so much!

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!

This is insanely good. Thanks man

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.

thank you, i'm certainly going to purchase your course

wow! finally i got what is nuxt, thanks a lot and continiue

Just bought your couse in Udemy. Great explanations.

Presentation 11/10, Coding 10/10, Explanation 10/10, marvelous video! Learned a ton from you, thanks Laith!

Awesome stuff man!

Awesome content. Is there any chance your course or future videos will include nuxt vitest pinia with vite?

Awesome guide!!!

Laith, Thank you so much!

Just what I needed, also with supabase 👌thanks alot for this.

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.

you should focus on nuxtjs insted of styling and navbar and boutstrap

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?

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

Wow, just wow content. TY.

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

Super amazing!!

i like it, thx for this tutorial

Thanks for this, Ill surely buy the complete course, just wanna ask, what is your opinion regarding nuxt+pinia+axios+quasar?

Thanks a lot for the great tutorial. plz how i can import bootstrap library js like Toast, carrousel, ...ect to my project nuxt3

Hahahah I was literally waiting for this.

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

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?

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!

Please teacher I really want to learn nginx. I'm not so good at english but all of your course is amazing

Awesome!

Thank for course. How to create newly app with javascript?

Your content is awesome! By the way, what is your setup on VS code? Any suggestion for the auto formatting?

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

عظمة على عظمة على عظمة

incredibly cool

Hey Laith instead of useMeta should be using useHead composable. useMeta has been deprecated. Good Video

Found this video yesterday and bought the course. Will the course have updates?

where can we find the link of the git repositories related to this video?

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!

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.

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.

Can you create a small tutorial on using Nuxt 3 and AOS?

Thank you very much that is very helpful. Ich bin hier von Deutschland 🇩🇪

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; }

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

Payment on Udemy does not work for me. Is there another way to buy a course? I really want to go through it.

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!

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.

Amazing tutorial. Instaint subscribe :-)

like before watching is a must😄

Make some MEVN course :)

Hi did you also do the freelance

17:59-19:26 headphones user cannot hear you voice from right side

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; } ??

hey looks great. Sometimes i get the sound only to my left ear

Why did you import the name data? I thought with nuxt3 you don't have to import anything anymore?

plz make video about auth in nuxt 3

Hello FYI the coupon you provided doesnt apply the discount, its an affiliate link but without discount :)

Is the promo code still working? It does redirect me to the normal page of the course without any discount on

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)

youre great man add github data link here which you used in this project

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.

Valeu!

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 purchased the course today. Please add firebase integration and utilising firebase effectively via vue 3 n Next 3. Thanks in advance.

can you please please please do a video on hasura. if its in your scope of knowledge

how to add third party scripts in nuxt 3

hey buddy do you have a coupon of discount for your nestjs course?

Is the course available on Udemy business?

I think it could be more usefull to integrate tailwind, or at least scss, instead of plain css

Bro you should add nuxt link

where's the github page?

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.

Don't get sound from right headset! Video sound broken!

What do you prefer React or Vue? Next or Nuxt?

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.

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);

But is Nuxt 3 production ready

3:12:22

Why did you choose Bootstrap over Tailwind?

Bartholomew is a name from the Bible

Playback speed: 1.75x. You're welcome.

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

this tutorial is totally mess. made a simple app much more complex

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!!!!!!!!

Это не курс по 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

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?