Tap to unmute

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

  Рет қаралды 121,364

Tyler Potts

Tyler Potts

Күн бұрын

Пікірлер: 123
@TylerPotts
@TylerPotts 2 жыл бұрын
Did YOU enjoy this video? 🤔 Also, I think I was pronouncing Vite wrong... 😅
@SimonDepelchin
@SimonDepelchin 2 жыл бұрын
Yep, try `veet` :)
@TylerPotts
@TylerPotts 2 жыл бұрын
That's the one! 😅
@KeesdeHaan
@KeesdeHaan 2 жыл бұрын
Sure!
@KeesdeHaan
@KeesdeHaan 2 жыл бұрын
@@SimonDepelchin Yep, nice suggestion :-)
@thapagonmeekaew7240
@thapagonmeekaew7240 2 жыл бұрын
Thank you very much
@Sprunk0
@Sprunk0 2 жыл бұрын
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
@TylerPotts 2 жыл бұрын
Glad it helped!
@manprinsen8150
@manprinsen8150 Жыл бұрын
Best web dev tutorial ever!! Hands down!!!
@orion6831
@orion6831 2 жыл бұрын
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 KZbin community. Keep up the great work!
@TylerPotts
@TylerPotts 2 жыл бұрын
Thank you! This really boosts my motivation! I'm happy I've managed to help!
@zariachenshui7386
@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
@gokhanekc Жыл бұрын
This might be the world's best video on creating sidebars with Vue. Thx :)
@Jorgeee
@Jorgeee 2 жыл бұрын
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
@TylerPotts 2 жыл бұрын
Co-Pilot!
@dennisfransen8538
@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
@TylerPotts 2 жыл бұрын
Amazing! Thank you for that insight!
@dennisfransen8538
@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
@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
@dennisfransen8538 2 жыл бұрын
@@TylerPotts Sounds awesome! 😎
@captainalpha4853
@captainalpha4853 2 жыл бұрын
Thank you!
@MazaBoYBesT
@MazaBoYBesT 2 жыл бұрын
Good Resources for people like me who are in learning process.
@alorpothe2.0
@alorpothe2.0 2 жыл бұрын
Finnally now this channel is actually gonna be consistent
@abdellatif.x8127
@abdellatif.x8127 2 жыл бұрын
Thanks mate, it was a nice oportunity to practice vue :)
@TylerPotts
@TylerPotts 2 жыл бұрын
Awesome! :D
@guestofallah7661
@guestofallah7661 2 жыл бұрын
Noice !! This is the exact same thing I was looking for Thank u so much !
@TylerPotts
@TylerPotts 2 жыл бұрын
Glad I could help!
@arbdevforesttrouble758
@arbdevforesttrouble758 2 жыл бұрын
Thank you, that was exactly what I was looking for. Besides the video was a bit of an entertaining comedy show
@TylerPotts
@TylerPotts 2 жыл бұрын
That's me! Comedian! Actor! Absolute failure! I'm happy I could help 🤣
@EdsonAristiguieta-xb8xg
@EdsonAristiguieta-xb8xg 8 ай бұрын
Amazing mate, you have a new suscribe. Thanks a lot!
@TylerPotts
@TylerPotts 7 ай бұрын
Awesome, thank you!
@KeesdeHaan
@KeesdeHaan 2 жыл бұрын
This was a very nice job Tyler. I forked it and am busy with it. Congrats!
@ginocote
@ginocote Жыл бұрын
Perfect, Vue + beautiful sidebar + vite + router. Exactly what i was looking for.
@andriansugiantoputra8269
@andriansugiantoputra8269 Жыл бұрын
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
@MedicomTips
@MedicomTips 2 жыл бұрын
Exactly what i was looking for! Thanks for the informative video
@TylerPotts
@TylerPotts 2 жыл бұрын
Glad it was helpful!
@rodrigopina8924
@rodrigopina8924 2 жыл бұрын
using it for a few years and now I want to upgrade and I'm happy I did that.
@fukuta1074
@fukuta1074 Сағат бұрын
I from Brazil, thank you friend !
@bastiancontreraswasilkowsk6485
@bastiancontreraswasilkowsk6485 8 ай бұрын
Really nice video, I truly mean it, amazing!
@TylerPotts
@TylerPotts 8 ай бұрын
Thank you very much!
@danielwatson6529
@danielwatson6529 2 жыл бұрын
Would love a next 3 version with slots
@satyampatil458
@satyampatil458 25 күн бұрын
Thanks, Mate!
@TylerPotts
@TylerPotts 13 күн бұрын
You're welcome!
@sebastianklocke9780
@sebastianklocke9780 8 ай бұрын
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}"
@iulianursu8996
@iulianursu8996 2 жыл бұрын
This was great! Thanks a lot for sharing it whit us!
@TylerPotts
@TylerPotts 2 жыл бұрын
Glad you enjoyed it!
@universecode1101
@universecode1101 2 жыл бұрын
Great tutorial 🔥
@TylerPotts
@TylerPotts 2 жыл бұрын
Thank you!
@paws7983
@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
@TylerPotts 2 жыл бұрын
Awesome! Thank you!
@dailymeow3283
@dailymeow3283 2 жыл бұрын
Cool, like the one in google cloud console
@renatomarcondes2293
@renatomarcondes2293 8 ай бұрын
Amigo, nem sei como agradecer pelo seu conteúdo!! Muito obrigado, que você seja prospero em todas as coisas, um abraço.
@stark469
@stark469 Жыл бұрын
Easy explained very good tutorial.
@sb970213fly
@sb970213fly Жыл бұрын
한국인이 보기에도 어려움이 없는 아주 좋은 강의
@spmedia00
@spmedia00 2 жыл бұрын
now i am in a good mood
@charlesthomas8611
@charlesthomas8611 9 ай бұрын
This is so good,, how about generate admin template?
@nilopaim1925
@nilopaim1925 10 ай бұрын
Great video! Can you make the same video but updated to Nuxt 3?
@jajoa4064
@jajoa4064 2 жыл бұрын
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}"
@andisukarya
@andisukarya 2 жыл бұрын
Great video, the program works great
@Jaquintana19
@Jaquintana19 2 жыл бұрын
My sidebar is in the middle of the screen. Does anyone know how to fix?
@ojanmaingame
@ojanmaingame Жыл бұрын
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!
@FurkanŞen-f6h
@FurkanŞen-f6h Жыл бұрын
It was a very good educational video. But based on that, I asked you to put it in a navbar above
@abgehn7869
@abgehn7869 6 ай бұрын
Awesome tutorial! Thank you :) I ran into a strage problem and wanted to share the fix: Vite didn't know the tag. That was fixed by usin 'npm create vue@latest'. Thas needs a bit more cleanup of the project but after that the tag worked.
@m62149
@m62149 Жыл бұрын
how to make menu link sidebar from table database in vue js?
@sajithprasantha3559
@sajithprasantha3559 2 жыл бұрын
Thank you so much! Can we add a sub menu?
@sucunha8645
@sucunha8645 2 жыл бұрын
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
@СергейБоровской-о7о
@СергейБоровской-о7о Жыл бұрын
Hello! Please tell me, how you got the automatically code import (css) ?
@AmeerHamza-fu3rz
@AmeerHamza-fu3rz 2 жыл бұрын
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.
@yanka1482
@yanka1482 2 жыл бұрын
Thank you, it means a lot bro:)
Жыл бұрын
thank you ❤❤❤
@anapaulaalthoff6764
@anapaulaalthoff6764 2 жыл бұрын
Hi! Which type of extensions do you use?
@FactAndMan
@FactAndMan 2 жыл бұрын
Whenever i use the GMS and put it in the soft, it holds out the note forever! please help, i am very confused
@iamfkhn
@iamfkhn Жыл бұрын
Which theme is that?
@bumaye8174
@bumaye8174 11 ай бұрын
how do i run this from another system if already pushed to githhub
@learningtocode0
@learningtocode0 3 ай бұрын
this is awesome
@KanalThor
@KanalThor 2 жыл бұрын
I could not find the GitHub repository for your sidebar. Could you please share the link?
@KanalThor
@KanalThor 2 жыл бұрын
Sorry, my mistake - found it! By the way great video!
@TylerPotts
@TylerPotts 2 жыл бұрын
Happy you found it! Thank you!
@thelorefnatic1783
@thelorefnatic1783 Жыл бұрын
how can i switch the icons you are using?
@wouilson6473
@wouilson6473 Жыл бұрын
Thanks a lot !
@ginocote
@ginocote Жыл бұрын
How to add submenu?
@toniclementegarcia6656
@toniclementegarcia6656 2 жыл бұрын
does it work with composition api ?
@olagunjuselim3078
@olagunjuselim3078 2 жыл бұрын
Great video
@codedjango
@codedjango 2 жыл бұрын
Awesome...although the github link for the source code is not working...please fix...thanks a lot
@TylerPotts
@TylerPotts 2 жыл бұрын
Try now! I accidentally had it as private! Thanks! :D
@codedjango
@codedjango 2 жыл бұрын
Thank you so much.....
@indianchirio7737
@indianchirio7737 2 жыл бұрын
Thank you so much this helped a lot!!!! You saved my life
@abhinavchandran3798
@abhinavchandran3798 2 жыл бұрын
For once, the software is actually really useful
@TylerPotts
@TylerPotts 2 жыл бұрын
That's great to hear! Thank you.
@folkcoreano
@folkcoreano 2 жыл бұрын
MUITO OBRIGADO VOCÊ É GENIAL DEMAIS
@premodsuraweera
@premodsuraweera 2 жыл бұрын
scss is not installed, why?
@St0rMsk
@St0rMsk Жыл бұрын
Great video👍 however... It is NOT white, it is weet 😀 my ear were hurting so much 🤣
@chuongdang7516
@chuongdang7516 2 жыл бұрын
thank you bro thank you
@TylerPotts
@TylerPotts 2 жыл бұрын
You're welcome!
@titiksasanti2205
@titiksasanti2205 2 жыл бұрын
ur a fcking legend dude honestly
@rv-ragul
@rv-ragul 2 жыл бұрын
Your VSCode theme plz?
@TylerPotts
@TylerPotts 2 жыл бұрын
SynthWave84
@rv-ragul
@rv-ragul 2 жыл бұрын
@@TylerPotts thanks for your immediate reply
@dhhananjayyy
@dhhananjayyy 2 жыл бұрын
very great
@TylerPotts
@TylerPotts 2 жыл бұрын
Thank you!
@dhhananjayyy
@dhhananjayyy 2 жыл бұрын
@@TylerPotts make a vue portfolio tutorial
@umaroov_o
@umaroov_o Жыл бұрын
thank you
@premodsuraweera
@premodsuraweera 2 жыл бұрын
great video, thank you.. can i have contact with you?
@gaanagamfoods4623
@gaanagamfoods4623 2 жыл бұрын
Bro, thx!
@waseyhasankhan8167
@waseyhasankhan8167 2 жыл бұрын
Keep inspiring
@agentsmith2189
@agentsmith2189 2 жыл бұрын
with react :)
@HabiburRahman-dh7oy
@HabiburRahman-dh7oy 2 жыл бұрын
Fallen Sun yeah! e too
@dfsgjlgsdklgjnmsidrg
@dfsgjlgsdklgjnmsidrg 2 жыл бұрын
why dont you use webstorm
@TylerPotts
@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
@dfsgjlgsdklgjnmsidrg 2 жыл бұрын
@@TylerPotts get it free lul
@dfsgjlgsdklgjnmsidrg
@dfsgjlgsdklgjnmsidrg 2 жыл бұрын
@@TylerPotts i use it free
@pakistantareekeinsaaf9825
@pakistantareekeinsaaf9825 2 жыл бұрын
program.
@Meinungsmacher
@Meinungsmacher 2 жыл бұрын
you don't want google fonts in europe :D gdpr will hunt you in your dreams :D
@staskozak8118
@staskozak8118 2 жыл бұрын
Smooth without content. But add some images and div`s and width changing animation tear your eyes apart...
@SERGex8
@SERGex8 Жыл бұрын
Module not found: Error: Can't resolve './src/main.js эта ошибка не дает мне прогресса
@dailymeow3283
@dailymeow3283 2 жыл бұрын
I learnt .router-link-exact-active thanks🍦🍦
@TylerPotts
@TylerPotts 2 жыл бұрын
You're welcome!
@MTFights
@MTFights Жыл бұрын
awesome video
Animating Vue Router Transitions in Vue 3
12:08
LearnVue
Рет қаралды 53 М.
My scorpion was taken away from me 😢
00:55
TyphoonFast 5
Рет қаралды 2,7 МЛН
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
黑天使被操控了#short #angel #clown
00:40
Super Beauty team
Рет қаралды 61 МЛН
Nuxt in 100 Seconds
2:50
Fireship
Рет қаралды 595 М.
Animated Navbar using CSS, Vue and Vue Router
8:05
Justin Brooks
Рет қаралды 73 М.
Build an e-commerce site... with a twist - Web Dev Challenge S1E3
26:20
Learn With Jason
Рет қаралды 257 М.
They Just Fixed VUE ROUTER
2:17
LearnVue
Рет қаралды 38 М.
Better Rendering Performance with Virtual Lists
5:59
LearnVue
Рет қаралды 36 М.
How to Create Tailwind CSS Responsive Sidebar with Vue js 3
26:30
I built 10 web apps... with 10 different languages
14:23
Fireship
Рет қаралды 1,7 МЛН
преобразовал старый молоток
0:55
Стакановец
Рет қаралды 2,3 МЛН
It's not easy to think too much in this life
0:56
R-CC
Рет қаралды 103 МЛН
Ты ТОЧНО делаешь это когда БОЛЕЕШЬ 🤒
0:38
Никита Удановский
Рет қаралды 2,7 МЛН
Бизнес на лесе. Павловния на Иссык-Куле, Кыргызстан @Арстан Тазабеков
0:59
Главный фермерский портал ФЕРМЕР.RU
Рет қаралды 707 М.