Vue JS 3 Tutorial for Beginners #8 - The Vue Router

[@kierrboy8613]

CSS style 35:43 job css .job h2 { background: #f4f4f4; padding: 20px; border-radius: 10px; margin: 10px auto; max-width: 600px; cursor: pointer; color: #444; } .job h2:hover { background: #ddd; } .job a { text-decoration: none; } 44:11 button css button { margin: 0 10px; padding: 10px; border: none; border-radius: 4px; }

[@mohamedalqady7427]

if there is alot of people like you the world will be better

[@bobooffice7718]

thank you 🤗

[@BarbaraBezd]

why I noticed that only after a lesson🥲

[@medui]

MVP

[@elliotanimations1067]

I can't express how much you've helped me with your videos. I never understood the Vue environment or how anything links together, and using the CLI always brought back errors. But from the start up until now (haven't got any further just yet!) it's been a total breeze. Thank you so much

[@NetNinja]

That's awesome to hear Elliot :) thanks for the kind words and stick with it!

[@deshantdevkota2563]

same here haha, thanks from my side too

[@yasharsoleimani27]

I've been searching the Internet for hours to find a video or sth to teach me vue-router simple and fast and you did it the best way. Thanks, man!

[@AlejandroJesúsMarceloChinchay]

I'm not an english native speaker but I found this series of videos and I understood everything. These tutorials are just perfect. Thank you!

[@NetNinja]

Great to hear! :) thank you for watching

[@sureshramanan6053]

the music that plays when projects get created is hilariously merry and nostalgic!

[@sureshramanan6053]

wanted to say thanks for this very helpful vue tutorial playlist! I am learning vue for the first time and I am feeling great with the exercises!!!

[@unfroz3n118]

I’ve seen studies on this where people mention background music while waiting for a task to be completed, it’s a human subconscious thing I think.

[@danishiqbal2047]

Seriously, been trying for two days to find a truly beginner tutorial. All those videos claiming to be beginner friendly have a curse of knowledge where they don't even know what its like to be a beginner. What you did starting this video and upto 2:30 is empathy. Thank you.

[@NetNinja]

Glad it was helpful Danish :) thanks for watching!

[@nageshnagansur7904]

God Level Simplicity with explanation .

[@hosseinjavan137]

there is no doubt about you being an awesome teacher. But I just realized part of why I like your tutorials is because of your damn beautiful voice. Wish you the best :)

[@AccessCode101]

It's worth to mention, Shaun, that if we installed vue-router manually and not using the Vue CLI, we need to add vue-router@next, because the createWebHistory was not part of earlier version installments in vue-router before 3.0.

[@Jel.Awesh.M]

For me, it seems to not work for any version before vue-router 4.0

[@oldclient]

It's just a very good explanation of the Vue CLI routing architecture without any fluff words. Not a complex, nor a simple context. Keep do this.

[@ladywebber1726]

my favorite online tutor EVER, many blessings

[@nitinkaushik5144]

Thank you Shaun for making awesome tutorials. You have made web so much easy and fun. It seems like Mario and Luigi are part of my life now :D

[@LilStrangeSquirrel]

English isn't my native language but everything sounds so much clear when you explain it. Thank you so much

[@Roccsguy]

Wow! Thanks for this amazing tutorial. I never watch any tutorial more than 5 minutes but your's was definitely worth it. I've been trying to understand how Vue router works in comparison to react router, and this video made it clear to me that Vue is definitely going to be my next best framework. Thanks again 👋

[@NetNinja]

You're very welcome! Thanks for your support Riches :)

[@jetzemeilink]

Thanks Shaun for bringing us this quality content and your ability to break things down and explain them clearly. I bought your vue 3 course and it was one of the best courses I've taken so far. You're an incredible help as I'm trying to land my first dev job in Holland.

[@NetNinja]

Thanks so much :) good luck with job hunting, I hope you do really well!

[@jetzemeilink]

@@NetNinja Thanks Shaun. Just got my first job as a junior dev and it was partly due to my Vue knowledge!

[@antoniofuller2331]

"partly" lol

[@learnsimple4592]

Thanks, love your tutorials Shaun. When will you updating the ninja sass course. I have been trying to learn sass ever since I learnt html, css and modern js from you. A update to the sass course will be very much appreciated.

[@suman-majhi]

one interesting fact.... this video is able to satisfy all viewer .... this video has 0 dislike

[@lucien5112]

oof yall jinxed it

[@kristofferjohansson3768]

@@lucien5112 yeah, that one must be a competitor.

[@omarmomen2098]

u are amazing sir, i never find some one who can explain like u do, thank u ❤💕

[@guna23785]

He is a Ninja ! Very good way of teaching

[@neeqquu]

this is the best vue tutorial ever! please never delete this :)

[@AlinaKay47]

Many thanks for such a great and easy to follow video!

[@mehlulinokwara3841]

Thanks buddy. I'd recommend every newbie and advanced student of vue and laravel to your great content. Was displeased when I couldn't get you on Java ha ha ha. Consider that sometime.

[@arifdevcoding]

why did i buy Hitesh Choudury's course, this free video is way better than that. you are great bro! Subscribed!

[@ya_volk9059]

You are such a brilliant teacher

[@sarahdulat3613]

Nooo you stopped right at the moment I needed! How can I pass more than just the id through the router link? How would the job details get displayed?

[@cedrickcampoto2670]

I would like to thank you, because you are very clear in teaching this topic. I mean very.

[@aarondv]

this is the best content about vue.js.. thanks

[@jaxparrow1794]

4 months later and 0 dislikes. Thanks man!

[@arunshetty6413]

Simple and the Best explanation 🎉

[@ramil8029]

These tutorials are so good! Thank you so much @TheNetNinja!

[@NetNinja]

You're very welcome Ramil, thanks for your support!

[@shubhang2877]

Shaun: *exists* Me: Happiness Noises

[@ІлляПіранья]

GUUUUUUUUUUUUUUUU

[@speckyferns6780]

The free tutorials are so good, I'm just going to buy a couple courses from you Net Ninja off Udemy. Thanks so much! Also, love the background music while projects are being created by @vue/cli :)

[@push2me936]

Thank you a lot! And again let's give that a wow! Best regards from here!

[@saidaouyous861]

Best course ever about vue router 👏

[@NetNinja]

Thanks! :)

[@nematjonabdulloev3568]

descriptive and easy to follow. Great job 👍👌.

[@NetNinja]

Glad you liked it!

[@devserendipity3063]

Dude!! Thank you! I will recomend your tutorials to everyone

[@shore2351]

explained very clearly, thanks a lot

[@NetNinja]

Glad it was helpful! :)

[@EduardKaresli]

Gold, as always. Thanks a lot!

[@REZAsys2]

Your tutorials are perfect but make me sleepy xd idk why!

[@rahulkatre17]

I got a 3.8 lpa just because you thanks man🔥

[@patrikmihalovic5796]

Great stuff man!

[@JohnDoeX1966]

Amazing tutorial. Thank you!

[@ahamster3000]

from Morocco , thank you

[@NetNinja]

Thanks Zakaria :) big love to Morocco!

[@LinuxForLife]

Clear and efficient. Thanks. Vuex is on your roadmap?

[@arturgorbunov3792]

For them who creates project straightforward, not like The Net Ninja => vue create ['name'] => (then) npm install vue-router@4 || (or) npm install vue-router@next => (then) just create all needed folders and files, which you see in the video, by your self. Yes, sometimes you have to do something by your own, create, refactor and so on. Ofc, if someone here is just because Front-End hobby, then we are sorry for these issues.

[@gustavofrez6185]

CSS : .job h2 { background: #f4f4f4; padding: 20px; border-radius: 10px; margin: 10px auto; max-width: 600px; cursor: pointer; color: #444; } .job h2:hover { background: #ddd; } .job a { text-decoration: none; }

[@franklintorres3717]

It's a perfect tutorial. I love it very much, but why you didn't include the children tree?

[@jayce1098]

Thanks Ninja , this a pretty good tutorial series

[@safiakhan5239]

Thank you very much for sharing such a techy topic in so beautiful comprehensive way. I wish my words can express my gratitude towards you. One request please could you please share the code you did in this tutorial please please. Thanks again

[@disneywali8943]

enjoyed your videos, you done great work, Thanks mate

[@tr5946]

I like this. I like this very much. You are a good teacher.

[@NetNinja]

Thank you! 😃

[@stefanventer575]

Thank you very much. This is exactly what I wanted to know.

[@balajisri5091]

Thanks a lot man. Great Work.

[@NetNinja]

Thanks Balaji :)

[@gmd2171]

Thank you for your time sir.

[@NetNinja]

You're very welcome Ghulam!

[@mehdimortaz351]

Wonderful. I appreciate for ur useful tutorial.

[@AcidRainbowSkies]

really easy to follow and super clear, thank you! this is super helpful!

[@mohammedyusuf3888]

Can you make a video on quasar framework ? Ssr and build something like a ecommerce site. Not a useless app like weather app... not an entire project but landing login and user homepage or registration

[@viquiboirasanmarti89]

Thank you very much for the tutorial, it has helped me a lot for my website. But I have a question, how do I update the content of the Job component with a watch, inside the component itself? For example, if a Job had Related Job that can be queried?

[@comtarthur]

i love all your videos they helped me so much but please how do you use vue create without typing npx before ?

[@dimitrioschamarousios1131]

The best part is the loading music (4:18)

[@gamercat4878]

For details Page only way to pass full data is vuex, you forgot to mention

[@euniceoqui]

You're amazing 😭😭😭

[@edgardevelops]

07:07 process.env.BASE_URL does not work anymore. use import.meta.env.BASE_URL

[@clemences2318]

What is the number of this lesson in the gitlab ? Thanks for the video

[@cardobent5722]

thanks for this video learned allot from here

[@martinfinch5011]

Question for the community. I'm building a static vuejs site that will have a lot of articles. At the moment all articles are just static with their images. I'm guessing I'll need to eventually have all the articles pulled from a database?

[@gokusaiyan1128]

how do you send job object to jobdetails page ? for e.g. job has 3 jobs listing , I click on job 2 , how can I pas job2 object to job2 details page. ?

[@abeprangishvili]

you are the best !!!!!!

[@ايمانعبدالقادر-ص9خ]

thank you for sharing you knowledge

[@PunxTV123]

what is linter formatter why you uncheck it always?

[@RobertWildling]

Thank you for that nice series! - What I always wonder is how do you write links inside a text editor of a cms, when routes are "ruling" the navigation? Simply wrapping an a-tag around a word does not work, and standard text editors like ckeditor do not have a router implementation. Any ideas?

[@raquels6354]

How can I add different text and images for each Job Detail? I am confused about that.

[@rahim3070]

How do I load different HTML template in router view ? I mean, client side and admin side.

[@liliabekuzinaensosense8987]

You are just the best! So talanted!

[@AmerAmer-lt2gz]

how to show 2 properties of object in JobDetails component? (not only *id* , also *details* property)

[@ndyaarthurmartha8748]

doesnt work same here. Even copied the code from the repository

[@window.location]

Are you going to make tutorial on next.js ??

[@user-misite]

your video is good, your folder theme also good, could you tell me its names. Think you.

[@bililancun8867]

Name of the VSCode icons theme?

[@tudelcadoret8585]

Thanks for the video ! Just a question, how delete the vertical line on the right of "Home" ? I searched but I did not find anything

[@DeLvoy1988]

it's added in CSS

[@birarr]

On mine project, it was right after the Home router-link.

[@MichaelButlerC]

Really great stuff. I'm having a problem with my unique case: I am hosting my Vue app on a sub path on my server: /dashboard. But when I use Vue Router and navigate around the links, it becomes /dashboard/dashboard/home, /dashboard/dashboard/settings and so on. I want it to treat /dashboard as the base and only add on top of it if it needs to.

[@MichaelButlerC]

I figured it out: I used `createWebHistory('/dashboard/')` and then my routes set as `/` and `/settings`, and the router-links also set to `/` and `/settings`. This ended up in the browser as /dashboard/ and /dashboard/settings properly.

[@ma.carizzapanopio5864]

Did you add an .htaccess for this? if so, can you please share?

[@manumaestri]

Why you don't use Setup() if you are in vue 3?

[@kirillbaryba746]

Thanks! Awesome

6:48 Where is the file .env ?

[@pagevpetty]

after I open the 'JobDetails' page and then try to go to another page in menu it just puts the new page after jobs so I get '...jobs/new-page' instead of '.../new-page'. Any solutions?

[@ndyaarthurmartha8748]

Same here. It doesnt work. I've even cut and pasted every line of his code, so it can;t be a typo

[@jeronimoalderete]

f*cking awesome shaun

[@majdibrahem1399]

thanks

[@NetNinja]

You're welcome!

[@TheLuksas]

Hello, when I add {{ job.title }} my list job.title disappears, index.js router looks: { path: '/jobs/:id', name:' JobDetails', component: JobDetails, props: true } I can't figure out why... maybe someone have same problem? Thanks

[@TheLuksas]

name:' JobDetails', before JobDetails is space...

[@noushedakib1658]

awesome

[@sameerchoubey9724]

npm run serve? How it starts so quickly in the video? Mine takes at least 2 minutes. This is a pain with VueJS. What can I do to improve it?

[@mduvens]

Buy a better PC ...?

[@mduvens]

Takes 3 minutes on my Raspberry PI and 5 seconds on my Lenovo..

[@sameerchoubey9724]

@@mduvens I was using Ubuntu on Windows 10 [WSL - 2] Switched to ubuntu and now it takes a couple seconds.

[@mduvens]

@@sameerchoubey9724 Little tip: Use Virtual Machine instead of WSL if your computer supports it :)

[@azizrakhim5647]

my router-view is underlined red. I dunno why? Why is that?

[@MrWizardd79]

U opened wrong directory, after creating of the project do cd yourproject and it will be ok

[@vampirejs758]

Hey , can you please make a tutorial on Vue Native , thanks :)

[@SpscMedia]

He has already search in playlists

[@souphianezahiri6693]

anyone was geting this error : "[Vue warn]: Property "jobs" was accessed during render but is not defined on instance. " elements inside jobs array was not displayed in the browser. thanks.

[@giwangdwikintan3503]

having the same problem, have you resolved ?

[@souphianezahiri6693]

@@giwangdwikintan3503 i just restarted a new project again, didnt get the error this time, one thing is that i renamed a vue component during the project, maby this somehow caused this error.

[@00el04]

@@giwangdwikintan3503 make sure the component is not in ' '

[@sarthakarora4944]

syper video

[@dasuneranda]

wow!

[@MapleLeafYT]

Done

[@danieladekoya1224]

Net ninja can you do a quick graphql apollo and vue 3 tutorial after this vue 3 series, would be appreciated

[@NetNinja]

I will be doing an updated graphql series soon, maybe with Vue 3, but I do have another couple of playlists I need to upload first :)

[@danieladekoya1224]

@@NetNinja Awesome !, your vue 3 playlist has helped a lot too, Thanks Shaun ! .

[@abeprangishvili]

pelase react js with multilanguage project

[@adrienvauthier2951]

hello thanks for your work i would prefer when you were doing a short video, 10 or 15 mins

[@antoniofuller2331]

Hmmm

[@AndyWalker-o1x]

Looks good, but can't stand how you say ROWT, using the annoyinh americanism instead of Route (root).

[@wickedtorpedo75]

what about "about os" :)

[@wickedtorpedo75]

17:05