Great content John... came here after watching your 6hrs VueJs blogging project tutorial uploaded on Brad's YT channel and instantaneously subscribed to your YT channel please keep making more VueJS videos , keep up with the good work and please increase your font-size I had real trouble coding along.
Thanks, this is exactly what I was looking for. to be honest, I feel so blessed I found this channel, btw I have only one request can u plz increase the editor font size by 1?
hi, can someone help me? i have a problem with the transition of the mobile menu, when it disappear it does his animation, but when i want to open it, it only pop up on the screen, i'm missing something🤔 here's the css: .mobile-nav-enter-active, .mobile-nav-leave-active { transition: 1s ease all; } .mobile-nav-enter-from,.mobile-nav-leave-to { transform: translateX(-250px); } .mobile-nav-enter-to{ transform: translateX(0px); } it should be the same as the video
Thanks for the tutorial. Do you know why the "far fa-bars" is not working for me? What could the problem be? I did exactly the same as you did till minute 17:15 but was not able to get the same result as yours.
Same for me, if I remove position absolute, then the bars show but otherwise not. Very strange why it works for some and not others. EDIT: close the inspector if it's not showing - once I did that mine was exactly the same as John's
Hi, nice video but i have a question when u toggle hamburger fast it starts doing leave animation from 0px how can i fix that ?? i want to do leave animation exactly in entering process when user click on hamburger i dont know if you understand :D but nice video keep it up :)
Hi, i'm not exactly 100% sure what you are asking. However here are the docs for the vue 3 transitions i used in this video. Perhaps this will give you a better visual of how exactly to accomplish what you are looking for :) v3.vuejs.org/guide/transitions-enterleave.html#transition-classes
Thank you for this video. I've been following and adapting it the Vue composition API setup and since there is no created hook in the Composition API, how can I make the browser detect the initial width of the device ?
All good up to around 23:20 of the video but the @click doesn’t work for the toggleMobileNav. I’ve even console.logged inside this but the nothing is triggered by the click event, which is done exactly the same as in the tutorial. Could you think of any updates/other causes for this not to work?
I did resolve it, in my case it was the script link to the font-awesome in my index.html, the solution was to delete the link and instead use npm install, and install via npm the fontawesome
Hi John. Just want to say thanks for a very wonderful tutorial. Very Helpful. Just wanted to ask why is my enter-to sliding transition not working but the leave transition is working perfectly fine. Followed your guide step by step. Thanks in advance if you can respond.
@@JohnKomarnicki Hi John, quadruple checked everything and the spelling is correct. Is it because when the navigation slides out, it adds display none? And when it slides back in, it removes the style display none. Display cannot be animated right?
You could listen for a route change, and close the navigation when the route changes. Or use a click event on the navigation links to close the bar when pushing to a new route.
I added `@click="toggleMobileView"` to the dropdown router links and it seems to give it this functionality. See crappy code snippet below (top part included for context). 🤓 =======================================================
If you are using the repo from this, the issue is probably node sass was depreciated for versions 15.x & beyond. You'll have to downgrade to use node-sass or uninstall and install i believe dart-sass
Thanks, really appreciate your effort in making these vue3 videos. It would be awesome if you could make more vue3 + firebase tutorials!
You rock dude. And SCSS got a new disciple thanks to you John. Subscribers ++
Amazing tutorial. Really clean and beautiful UX!
Thank you Cody!
Great content John... came here after watching your 6hrs VueJs blogging project tutorial uploaded on Brad's YT channel and instantaneously subscribed to your YT channel please keep making more VueJS videos , keep up with the good work and please increase your font-size I had real trouble coding along.
Thank you! I also did increase my font size in my most recent videos :)
I study with pleasure. Thank you
sooo cool!!! I will use it in my project, thank you so much :)
Glad you were able to find use of this component!
These Vue videos are gems OMG. Thank you so much
Glad you like them! :)
Please can you push the final code ?
Thanks, this is exactly what I was looking for. to be honest, I feel so blessed I found this channel, btw I have only one request can u plz increase the editor font size by 1?
Awesome! Yes, in my future videos I’ve increased the font zoom by 1! The newest video is going to be how it will look going forward.
Please you have the final code ? I did everything mine doesn't work and I don't know what really happened...I have tried everything.
It is grate, Thanks!!
Does someone know which VS Code extension makes the { } have matching colors?
Sorted me out, thanks for the help!
Glad it could be helpful!
do you need a media query to set max width of 1140, or will max width just handle itsself? 12:49
Thank you for this video.
Appreciate you watching! 😁
Thanks bro :)
awesome
hi, can someone help me? i have a problem with the transition of the mobile menu, when it disappear it does his animation, but when i want to open it, it only pop up on the screen, i'm missing something🤔
here's the css:
.mobile-nav-enter-active,
.mobile-nav-leave-active
{
transition: 1s ease all;
}
.mobile-nav-enter-from,.mobile-nav-leave-to
{
transform: translateX(-250px);
}
.mobile-nav-enter-to{
transform: translateX(0px);
}
it should be the same as the video
Can you please also share the branch withe the finished implementation?
Can you show example how to build the structure of the web side. Navbar and footer, the right way please 🙏
You've inspired me to just go ahead
thanks!!!! you help me a lot!
Glad to hear that!
Thanks man!
Welcome :)
great tutorial! tnx :)
Glad you liked it! :)
Thanks for the tutorial. Do you know why the "far fa-bars" is not working for me? What could the problem be? I did exactly the same as you did till minute 17:15 but was not able to get the same result as yours.
It is hard to say, but sounds like you might not have the cdn inserted into the head of the public html file
Same for me, if I remove position absolute, then the bars show but otherwise not. Very strange why it works for some and not others. EDIT: close the inspector if it's not showing - once I did that mine was exactly the same as John's
i loved!
Glad to hear! Thanks 😀
thanks!
Thanks for watching Evgeny!
Hi, nice video but i have a question when u toggle hamburger fast it starts doing leave animation from 0px how can i fix that ?? i want to do leave animation exactly in entering process when user click on hamburger i dont know if you understand :D but nice video keep it up :)
Hi, i'm not exactly 100% sure what you are asking. However here are the docs for the vue 3 transitions i used in this video. Perhaps this will give you a better visual of how exactly to accomplish what you are looking for :) v3.vuejs.org/guide/transitions-enterleave.html#transition-classes
Awsome, It is very useful especially for me as a junior :)
Could you please push the final code into the repository?
Thanks
Thank you for this video. I've been following and adapting it the Vue composition API setup and since there is no created hook in the Composition API, how can I make the browser detect the initial width of the device ?
You’d wanna wait until the app has been mounted. You could use the mounted lifecycle look for that.
@@JohnKomarnicki Oh thank you, I was not writing it correctly yesterday when I tried it ! I works now . Thank you again for this great tutorial !
All good up to around 23:20 of the video but the @click doesn’t work for the toggleMobileNav.
I’ve even console.logged inside this but the nothing is triggered by the click event, which is done exactly the same as in the tutorial.
Could you think of any updates/other causes for this not to work?
Dis you fixed, i have the same problem 😢??
I did resolve it, in my case it was the script link to the font-awesome in my index.html, the solution was to delete the link and instead use npm install, and install via npm the fontawesome
Hi John. Just want to say thanks for a very wonderful tutorial. Very Helpful. Just wanted to ask why is my enter-to sliding transition not working but the leave transition is working perfectly fine. Followed your guide step by step. Thanks in advance if you can respond.
I’d check to make sure you are using the correct class names for leaving! Maybe there is a spelling error?
@@JohnKomarnicki Hi John, quadruple checked everything and the spelling is correct. Is it because when the navigation slides out, it adds display none? And when it slides back in, it removes the style display none. Display cannot be animated right?
@@marcusdfelix You have to rename mobile-nav-enter-from to mobile-nav-enter (without from).
ty
Would like to know how to close menu when selecting background, and how to close menu when a link is selected.
You could listen for a click on the outside of the navigation menu. Or you could use a package called vue click outside!
I have a problem :c. No match for
{"name":"Home","params":{}}
Error: No match for
{"name":"Home","params":{}}
You da man.
Appreciate it 👊
Great tutorials! Is the complete demo code available in github? Thank you.
Yes, there should be a link in the description
your content is soo precious to good not to follow. asante sana.
I appreciate that! 🙌
how can i close the navigation bar when navigating to a page?
You could listen for a route change, and close the navigation when the route changes.
Or use a click event on the navigation links to close the bar when pushing to a new route.
I added `@click="toggleMobileView"` to the dropdown router links and it seems to give it this functionality.
See crappy code snippet below (top part included for context). 🤓
=======================================================
Home
....
why didn't you show and destroy it according to css screen size with bootstrap d-block d-lg -none
This is not made with bootstrap.
👏👏👏👏👏
why do I keep getting so many errors in css?
If you are using the repo from this, the issue is probably node sass was depreciated for versions 15.x & beyond. You'll have to downgrade to use node-sass or uninstall and install i believe dart-sass
please make a tutorial how to make a responsive sidebar on vue 3... Thanks)
Are you ready referring to a vertical navigation bar?
My mark for code along 22:57
I have a problem with sass loader sad
same, were u able to fix that error?
@@Adi02 YES
bro your github is wrong what happens?
Not sure what you mean?
Your code is broken.
thanks!
Welcome 😀