The Nuxt 3 Crash Course

This is 3 hours of a 9-hour course hosted on Udemy. You will learn everything you need to become a Nuxt 3 expert.
Second Channel:
/ @laiture123
Udemy Course (with discount)
www.udemy.com/course/the-nuxt...
Timeline:
0:00 - What is Nuxt
5:48 - Universal vs Server-Side vs Client-Side Rendering
19:31 - Project #1: Vue Refresher and Nuxt 3 Intro - Feel Free to Skip
2:08:43 - Project #2: Nuxt Basics - Pages, Layouts, & Meta

[@laithacademy]

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

[@mo-cj1zp]

199 $ or euro or what ? cause here in egypt it shows 199E

[@nirajparmar1772]

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

[@slicktak]

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

[@gmd9767]

me too, it's annoying.

[@joshclyde1524]

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 😂

[@arthurbrant]

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

[@raaghavmaharaj7638]

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

[@setiawansetya9776]

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

[@nishantaanjaneyjalan8583]

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!

[@alejandro.rodarte]

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.

[@akam9919]

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

[@AntoniKiddcodePutra]

Thanks man! Purchased already!

[@faissalelosman5081]

Man woww, reallly loving this tutorial, you re brilliant

[@the_beckers_food]

Pretty Nice job done! Very clear explanation of this Amazing JavaScript Framework. You got 10/10!

[@willvincentparrone3339]

This is insanely good. Thanks man

[@karroteu5000]

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

[@naeemadam3877]

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

[@truthteachers]

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.

[@codestuff3685]

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

[@ioannis2000]

Just bought your couse in Udemy. Great explanations.

[@mumk]

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

[@theretroman3862]

Awesome stuff man!

[@user-rq3mr5ld4e]

Awesome guide!!!

[@QtheCoder]

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

[@Mutlaq777]

Laith, Thank you so much!

[@Anghor]

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?

[@MrSociety404]

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?

[@ostapoff]

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

[@guillermomazzari4983]

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

[@anbuselvanrocky]

Wow, just wow content. TY.

[@hugo-abdou]

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

[@historyAR]

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

[@pugbread2873]

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

[@dev_jeongdaeri]

Super amazing!!

[@pepsipepsi8575]

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

[@jerry9548]

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

[@TruthinessDefender]

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!

[@thothtrismegistus929]

guys can anyone do a benchmark or performance test b/w nuxt and sveltekit?

[@adnannawab266]

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

[@jaymartinez311]

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

[@cannon8668]

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

[@Watson2Chanell]

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

[@elteyabhassan4030]

i like it, thx for this tutorial

[@mohamadcheaib]

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

[@greendsnow]

Hahahah I was literally waiting for this.

[@rachidmrad5344]

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.

[@user-rq3mr5ld4e]

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

[@chatgpt-phantom]

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

[@helleye311]

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]

if you use react you must learn about nextjs

[@helleye311]

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

[@salinderru]

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

[@victorbayas6296]

Awesome!

[@wadethomas5984]

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.

[@eli007s]

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

[@user-eq5rm5nh4h]

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

[@xxxxxx-pb3oj]

Make some MEVN course :)

[@ndrey5966]

incredibly cool

[@God4Short]

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)

[@AdamChou-mu3ow]

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.

[@marketdoc.2087]

Hi did you also do the freelance

[@ivantarnyagin9731]

Amazing tutorial. Instaint subscribe :-)

[@Kimo007]

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

[@henryhsu9517]

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.

[@MrTruancyAble]

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

[@lucadifazio2735]

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

[@mohammad-aminebanaei886]

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

[@roronoa_d_law1075]

on windows 10 in the settings you can turn on mono audio

[@dickson710]

like before watching is a must😄

[@lmaoboxuser]

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

[@doremicocoparis9410]

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

[@glennmathewgarma8565]

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

[@zainalabedinalshokrie9342]

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

[@mustafasargol5224]

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

[@janhuybrecht9181]

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

[@laithacademy]

I will

[@jorgemorales5188]

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

[@laithacademy]

www.udemy.com/course/the-nest-js-bootcamp-complete-developer-guide/?couponCode=79B2277FA8E3B65E84CC

[@user-eq5rm5nh4h]

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

[@hayatsingh2471]

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

[@cadmanedwards3730]

plz make video about auth in nuxt 3

[@altayezekariyas9243]

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

[@laithacademy]

I did one already

[@altayezekariyas9243]

@@laithacademy i can't find it can u pu the link here.

[@altayezekariyas9243]

@@laithacademy ohh i got it thankyou very much

[@marc536]

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!

[@jakubschulz4353]

Is the course available on Udemy business?

[@laithacademy]

I’d love it to be but that is up to Udemy

Valeu!

[@realtebo]

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

[@MrTruancyAble]

Agree 100%

[@raynersavioprazeres4414]

how to add third party scripts in nuxt 3

[@youssefabdulaziz2133]

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.

[@painbox3774]

Bro you should add nuxt link

[@joelmnisi4649]

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

[@ivantarnyagin9731]

where's the github page?

[@brancode404]

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

[@softblood1941]

go for Vue with Quasar Framework or React with Next with tailwind

[@lynx1850]

@@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?

[@emmanuelgodswill9169]

But is Nuxt 3 production ready

[@jerry9548]

not yet, still has Release Candidate Status. It should reach v3.0.0 in summer according to the roadmap.

[@marc536]

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.

[@AhmedAli-jx9ie]

coupon expired

[@burakcankurtarr2751]

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

[@cryptolicious3738]

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.

[@SusanthCom]

I purchased the course today. Please add firebase integration and utilising firebase effectively via vue 3 n Next 3. Thanks in advance.

[@henryhsu9517]

3:12:22

[@MrTruancyAble]

Why did you choose Bootstrap over Tailwind?

[@KylePeront]

Bartholomew is a name from the Bible

[@marlinmixon3004]

Playback speed: 1.75x. You're welcome.

[@mdmunnaahmed7402]

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

[@mahtoosacks]

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

[@henryhsu9517]

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

[@lukashatle2699]

Thanks!

[@AdamChou-mu3ow]

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)

[@dushny_ded]

Это не курс по NUXT, это грёбаный курс по вёрстке!

[@fansyveny]

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

[@Rajkumar_Murugean]

thank you

[@henryhsu9517]

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?