Build an Animated Responsive Sidebar Menu with Vue JS, Vue Router, SCSS and Vite in 2022

Подписаться 57 тыс.

Просмотров 104 тыс.

50% 1

Learn how to build an animated responsive side navigation bar with a menu using Vue JS, Vue Router and SCSS as our CSS pre-processor. We also use VITE for our Vue development engine!
Source Code: github.com/TylerPottsDev/yt-v...
Resources
vitejs.dev/guide/
fonts.google.com/icons
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
ru-vid.comjoin
// MY GEAR FOR CODING AND RU-vid
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

Хобби

Опубликовано:

21 фев 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@TylerPotts 2 года назад

Did YOU enjoy this video? 🤔 Also, I think I was pronouncing Vite wrong... 😅

@SimonDepelchin 2 года назад

Yep, try `veet` :)

@TylerPotts 2 года назад

That's the one! 😅

@KeesdeHaan 2 года назад

Sure!

@KeesdeHaan 2 года назад

@@SimonDepelchin Yep, nice suggestion :-)

@thapagonmeekaew7240 Год назад

Thank you very much

@KeesdeHaan 2 года назад

This was a very nice job Tyler. I forked it and am busy with it. Congrats!

@zariachenshui7386 Год назад

Learned a lot from this tutorial. For me, the transition wasn't smooth when shrinking the sidebar, because the text would go onto two lines while the transition was taking place, and increased the space between each menu button once it shrunk. I remedied this by setting a height value for the menu buttons of 3rem (2rem of material-icon height plus 2 x 0.5rem padding). Thank you for this video and your commentary! :)

@gokhanekc 8 месяцев назад

This might be the world's best video on creating sidebars with Vue. Thx :)

@orion6831 Год назад

Thank you for everything! Your videos have really helped me out and I appreciate all the hard work you put into creating and sharing them. Your content is always informative, entertaining, and enjoyable. Thank you for being an amazing creator and for being a positive influence in the RU-vid community. Keep up the great work!

@TylerPotts Год назад

Thank you! This really boosts my motivation! I'm happy I've managed to help!

@MaxAdams00 Год назад

Thank you so much! This might just be the first tutorial I've done that hasn't had any unsolvable problems! Cheers on this one.

@TylerPotts Год назад

Glad it helped!

@ginocote 8 месяцев назад

Perfect, Vue + beautiful sidebar + vite + router. Exactly what i was looking for.

@manprinsen8150 6 месяцев назад

Best web dev tutorial ever!! Hands down!!!

@rodrigopina8924 Год назад

using it for a few years and now I want to upgrade and I'm happy I did that.

@MedicomTips Год назад

Exactly what i was looking for! Thanks for the informative video

@TylerPotts Год назад

Glad it was helpful!

@paws7983 2 года назад

Thank you so much for this great video! 👏It really helps a lot! Love your works! Looking forward to the video talkig about route!! 😍

@TylerPotts 2 года назад

Awesome! Thank you!

@alorpothe2.0 Год назад

Finnally now this channel is actually gonna be consistent

@MazaBoYBesT 2 года назад

Good Resources for people like me who are in learning process.

@abdellatif.laghjaj Год назад

Thanks mate, it was a nice oportunity to practice vue :)

@TylerPotts Год назад

Awesome! :D

@guestofallah7661 2 года назад

Noice !! This is the exact same thing I was looking for Thank u so much !

@TylerPotts 2 года назад

Glad I could help!

@iulianursu8996 2 года назад

This was great! Thanks a lot for sharing it whit us!

@TylerPotts 2 года назад

Glad you enjoyed it!

@andisukarya Год назад

Great video, the program works great

@EdsonAristiguieta-xb8xg 26 дней назад

Amazing mate, you have a new suscribe. Thanks a lot!

@TylerPotts 14 дней назад

Awesome, thank you!

@universecode1101 2 года назад

Great tutorial 🔥

@TylerPotts 2 года назад

Thank you!

@stark469 5 месяцев назад

Easy explained very good tutorial.

@yanka1482 Год назад

Thank you, it means a lot bro:)

@bastiancontreraswasilkowsk6485 Месяц назад

Really nice video, I truly mean it, amazing!

@TylerPotts Месяц назад

Thank you very much!

@dailymeow3283 2 года назад

Cool, like the one in google cloud console

@arbdevforesttrouble758 Год назад

Thank you, that was exactly what I was looking for. Besides the video was a bit of an entertaining comedy show

@TylerPotts Год назад

That's me! Comedian! Actor! Absolute failure! I'm happy I could help 🤣

@renatomarcondes2293 29 дней назад

Amigo, nem sei como agradecer pelo seu conteúdo!! Muito obrigado, que você seja prospero em todas as coisas, um abraço.

@ojanmaingame 9 месяцев назад

Learned a lot from this video, good job, mate! I have a question to ask, when I scroll-down the page the sidebar's not following the scroll and stays in the upper page, can I fix it so when I scroll-down the sidebar will stays the same? Thank you!

@Jorgeee Год назад

Hey Tyler, what extension is that where you can see some greyed out code snippets when you type? For example at 15:43 theres that greyed out div snipper when you start typing in the template. Thanks!

@TylerPotts Год назад

Co-Pilot!

@danielwatson6529 Год назад

Would love a next 3 version with slots

@wouilson6473 6 месяцев назад

Thanks a lot !

@AmeerHamza-fu3rz Год назад

Great Video!. learned a lot. But now I am trying to add a nav bar in the content section and it is showing full height of sidebar. can you please guide.

@spmedia00 Год назад

now i am in a good mood

@andriansugiantoputra8269 7 месяцев назад

may i ask which part of the code that make the content go right when u open the sidebar? mine doesnt work so i wanted to know which part

@MTFights Год назад

awesome video

@olagunjuselim3078 Год назад

Great video

@sebastianklocke9780 Месяц назад

Great Video! Thank you. Some Feedback: 1) Add timestamps to the video 2) "Vite" is pronounced like "weed" and not like "wide" 3) A better way for dynamic classes would be :class="{'is-exanded': isExpanded}"

@dennisfransen8538 2 года назад

What's up Taylor! Great video as allways. In vue you don't have to use an ternary operator to have the class toggled 'is-expanded'. You can actually just pass an object to the class attribute like this. :class="{'is-expanded' : is_expanded}" Or even better. You could have the css class name and the boolean named the same. So it would look something like this. :class={ís_expanded}" const is_expanded = ref(false) .is_expanded {...} And if you had multiple booleans with multiple classes. You can pass an array of objects to the :class attribute Since im all about examples... :class="[{is_expanded}, {is_as_fancy_as_taylor}]"

@TylerPotts 2 года назад

Amazing! Thank you for that insight!

@dennisfransen8538 2 года назад

@@TylerPotts Glad you like it! Maybe you could do a short video about it. Because i see people missing out on this little trick and it's alot cleaner than ternary operators ✌️🧹

@TylerPotts 2 года назад

I might do a "how to style your vue projects the right way" video but I'll need to do a lot more research to make sure I can give all the tips! :D

@dennisfransen8538 2 года назад

@@TylerPotts Sounds awesome! 😎

@captainalpha4853 Год назад

Thank you!

@folkcoreano Год назад

MUITO OBRIGADO VOCÊ É GENIAL DEMAIS

10 месяцев назад

thank you ❤❤❤

@jajoa4064 Год назад

cool tutorial thanks. But : 1. you use camel case in javascript, isExpanded 2. also no pascal case in function but still camel case toggleMenu. pascal case is for classes 3. to add dynamic classes you do :class="{expanded: isExpanded}"

@anapaulaalthoff6764 Год назад

Hi! Which type of extensions do you use?

@sucunha8645 Год назад

I have a question on soft soft v20. I have it installed and have played around with it a little. However, I have a very specific goal. I am

@user-kl8gi1pp7f 11 месяцев назад

Hello! Please tell me, how you got the automatically code import (css) ?

@nilopaim1925 3 месяца назад

Great video! Can you make the same video but updated to Nuxt 3?

@waseyhasankhan8167 2 года назад

Keep inspiring

@gaanagamfoods4623 Год назад

Bro, thx!

@romanmalkin01 Год назад

thank you

@sb970213fly 5 месяцев назад

한국인이 보기에도 어려움이 없는 아주 좋은 강의

@sajithprasantha3559 Год назад

Thank you so much! Can we add a sub menu?

@user-mu2zj7ds4n 11 месяцев назад

It was a very good educational video. But based on that, I asked you to put it in a navbar above

@indianchirio7737 Год назад

Thank you so much this helped a lot!!!! You saved my life

@FactAndMan Год назад

Whenever i use the GMS and put it in the soft, it holds out the note forever! please help, i am very confused

@dhhananjayyy 2 года назад

very great

@TylerPotts 2 года назад

Thank you!

@dhhananjayyy 2 года назад

@@TylerPotts make a vue portfolio tutorial

@thelorefnatic1783 Год назад

how can i switch the icons you are using?

@charlesthomas8611 2 месяца назад

This is so good,, how about generate admin template?

@Jaquintana19 Год назад

My sidebar is in the middle of the screen. Does anyone know how to fix?

@toniclementegarcia6656 Год назад

does it work with composition api ?

@chuongdang7516 Год назад

thank you bro thank you

@TylerPotts Год назад

You're welcome!

@m62149 Год назад

how to make menu link sidebar from table database in vue js?

@KanalThor Год назад

I could not find the GitHub repository for your sidebar. Could you please share the link?

@KanalThor Год назад

Sorry, my mistake - found it! By the way great video!

@TylerPotts Год назад

Happy you found it! Thank you!

@titiksasanti2205 Год назад

ur a fcking legend dude honestly

@fuckoff4705 Год назад

at 18:39 your SASS doesnt work for me, i cant declare the main inside the .app{} it just tells me that 'a colon was expected' is this deprecated or?

@fuckoff4705 Год назад

for anyone wondering, i wrote the style identifier as Lang="scss: instead of lang="scss"

@iamfkhn 6 месяцев назад

Which theme is that?

@bumaye8174 3 месяца назад

how do i run this from another system if already pushed to githhub

@codedjango 2 года назад

Awesome...although the github link for the source code is not working...please fix...thanks a lot

@TylerPotts 2 года назад

Try now! I accidentally had it as private! Thanks! :D

@codedjango 2 года назад

Thank you so much.....

@premodsuraweera Год назад

scss is not installed, why?

@ginocote 8 месяцев назад

How to add submenu?

@abhinavchandran3798 Год назад

For once, the software is actually really useful

@TylerPotts Год назад

That's great to hear! Thank you.

@premodsuraweera Год назад

great video, thank you.. can i have contact with you?

@agentsmith2189 2 года назад

with react :)

@ragulr1566 2 года назад

Your VSCode theme plz?

@TylerPotts 2 года назад

SynthWave84

@ragulr1566 2 года назад

@@TylerPotts thanks for your immediate reply

@HabiburRahman-dh7oy Год назад

Fallen Sun yeah! e too

@St0rMsk 7 месяцев назад

Great video👍 however... It is NOT white, it is weet 😀 my ear were hurting so much 🤣

@Meinungsmacher Год назад

you don't want google fonts in europe :D gdpr will hunt you in your dreams :D

@pakistantareekeinsaaf9825 Год назад

program.

@dfsgjlgsdklgjnmsidrg 2 года назад

why dont you use webstorm

@TylerPotts 2 года назад

Why would I pay for webstorm when I have vs code? Don't get me wrong I know webstorm can't be beaten on intellisense but I just prefer VS Code.

@dfsgjlgsdklgjnmsidrg 2 года назад

@@TylerPotts get it free lul

@dfsgjlgsdklgjnmsidrg 2 года назад

@@TylerPotts i use it free

@staskozak8118 Год назад

Smooth without content. But add some images and div`s and width changing animation tear your eyes apart...

@SERGex8 Год назад

Module not found: Error: Can't resolve './src/main.js эта ошибка не дает мне прогресса

@dailymeow3283 2 года назад

I learnt .router-link-exact-active thanks🍦🍦

@TylerPotts Год назад

You're welcome!