Animating Vue Router Transitions in Vue 3
HTML-код
- Опубликовано: 27 дек 2024
- Vue Router transitions are a quick and easy way to add some flair to Vue app. They allow you to add smooth animations/transitions between different pages of your app. In this video, learn how to set up Vue Router in Vue 3 and add transitions using both custom classes and the Animate.css library.
LINKS
Companion Article w/ Code - learnvue.co/20...
Vite Tutorial - • Creating Your First Vu...
Animate.css - animate.style/
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
Seriously this is by far the most well articulated set of videos for vue
thank you so much! more content to come!
This is the best tut on actual vue transitions. Should be in the docs tbh
The pacing and content are both excellent. I'm new to Vue and couldn't find a basic example of installing/setting up vue-router with Vite. Thank you!
Thanks so much! Glad you enjoy it. What other topics are you interested in as someone new to Vue?
@@LearnVue Building a really solid best-practices form. Input-level and form-level validation messages and styling. Disabled inputs & buttons while submitting. Define reusable components so you don't need to duplicate this for every form.
Pro trick: watch movies at flixzone. Me and my gf have been using it for watching a lot of movies recently.
@Deangelo Levi Definitely, have been watching on flixzone for months myself :D
The way you deliver information is like a professional, very easy to understand for beginners like me, you deserve more subscribers.
thanks for watching! i'd love to know what you'd want to see next!
I have learnt more in this simple tutorial that I ever thought I would when I clicked on the video. Thanks mahn
That's always my goal :)
Wow. The only tutorial that worked flawlessly and was clearly understandable. Thanks.
Best tutorial for Vue 3 transitition I have watched so far. Thanks
I thought I had everything when I saw the newer transitions video but no he top's it off with the EXACT use case I had in mind! Haha this is great!
Wow! I know Vue and Vue-Router and have use all those concepts that the video explains. But I have NEVER EVER seen or read a better and more concise overview on this topic! Absolutely excellent! Thank you very much!
appreciate it tons!
Wow. What a cool video, and a great teacher. The concepts were built upon each other, done in real time, and at a smooth pace. A++++!
It was great! please make more advanced courses for vue and nuxt❤
I'm new to vue(2days in) , thank for this
What just I need. Need more of this
glad to hear! thanks!
Detailed and clean explanation ❤️
Thank you. This video of yours helped a lot, really.
You are the best. Not only the latest version but also very good explanation and content!
Thank you! This is exactly what I’m looking for right now!
Your channel is amazing. Keep it up!!
thanks, this is so easy to understand!
amazing video by the way
Thank you Sir. Please keep going
Thank you for the encouragment - I plan on making tons of video in the next few months so be ready!
Do you have a video to do the same effect using Nuxt 3?
Super awesome, thank you very much!
You're very welcome!
Very good explanation! I have a question that someone here is able to help me with. I have a menu with home in the middle, on the left agenda and on the right contact. When i'm on home and I click on agenda. Home slides to the right and agenda slides in from the left. But when I click on contact home slides right and contact comes in from the right. Is it possible to detect on which item you click and use a different transitions based on that choice. Thanks in advance!
Bro, thank's for this besting content!
upon searching for diamonds. i found diamonds. ty for this.
well said my friend, very poetic and accurate
5:28 the part about transitions starts here
Great tutorial, thanks 🙏
you’re welcome
Yet another amazing video. Also, sidenote... Is it possible to setup a discord server where we could give our suggestions for possible videos?
Thanks again! Right now, I think the best way to give suggestions is to email me over at matt@learnvue.co - hope to hear from you!
hoi! nice tutorial on vue router transitions! thanks for bringing high-quality vue tutorials both for vue2 and vue3! i actually have a suggestion.. since you're making a lot of vite + vue 3 content recently, can you make a video about vite-plugin-pages? it seems noteworthy because it feels more like nuxtjs when you have that setup on your vite project, worth a topic of your time. other than that, really awesome content! keep it up!
can someone please explain me how that absolute position fixed the last transition ? I dont have a clue
great voice! greate content! ..wow. Beautiful.
Thanks for watching!
nice tutorial！
Thank you 💙
Thanks for the great content. 🎈
What is the name of the Font used in the thumbnail
Can someone explain me why i should use this technic instead of using /pages/ ???
Very helpful, thanks.
aye! glad it helped 💚
wow no i have router transition, thank brother!
Awesome!
i cant find the github of this class
Hi ! Can I ask why this does not work anymore? everytime i type in mode="outIn" , my page just goes blank
Thank you sir ..
Strangly my transition only works "sometimes" alot of times my View just does not show up.... any idea why?
```
Home |
Login |
Register |
Events
```
This is my router:
```
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/login",
name: "login",
component: () => import("@/views/LoginView.vue"),
meta: {
enterClass: 'animate__animated animate__fadeInLeft',
leaveClass: 'animate__animated animate__fadeOutRight',
}
},
{
path: "/events",
name: "events",
component: () => import("@/views/EventsView.vue"),
},
{
// the 404 route, when none of the above matches
path: "/404",
name: "error-404",
component: () => import("@/views/error/ErrorPage404.vue"),
},
{
path: "/:pathMatch(.*)*",
redirect: "/404",
},
],
});
```
it doesn't work for me
Boooooooom! 💥
it's veryy gooood
Wow!
♥️♥️♥️♥️♥️
thank you open the CC subtitle for the poor English people with poor ear
With 3 routes adding a name of the class to meta wouldn't work.
Take a look a the article linked in the description under the section, "Dynamic Transitions Using v-bind"
I would recommend to drop the first half showing what router is and focusing on the the subject of the video title.
I disagree, there are too many half baked tutorials out there.. a good tutorial is complete imo.. and this is perfect. If you don't need the first bit skip over it.
😲
What I should to do to remove # from url? CreateWebHashHistory doesn’t work