Animating Vue Router Transitions in Vue 3
Вставка
- Опубліковано 9 лют 2025
- 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!
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!
This is the best tut on actual vue transitions. Should be in the docs tbh
Wow. The only tutorial that worked flawlessly and was clearly understandable. Thanks.
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 :)
Best tutorial for Vue 3 transitition I have watched so far. Thanks
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++++!
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!
Detailed and clean explanation ❤️
It was great! please make more advanced courses for vue and nuxt❤
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",
},
],
});
```
What just I need. Need more of this
glad to hear! thanks!
You are the best. Not only the latest version but also very good explanation and content!
I'm new to vue(2days in) , thank for this
Thank you. This video of yours helped a lot, really.
Thank you! This is exactly what I’m looking for right now!
can someone please explain me how that absolute position fixed the last transition ? I dont have a clue
Do you have a video to do the same effect using Nuxt 3?
Your channel is amazing. Keep it up!!
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!
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!
Super awesome, thank you very much!
You're very welcome!
thanks, this is so easy to understand!
amazing video by the way
Bro, thank's for this besting content!
Can someone explain me why i should use this technic instead of using /pages/ ???
5:28 the part about transitions starts here
Hi ! Can I ask why this does not work anymore? everytime i type in mode="outIn" , my page just goes blank
What is the name of the Font used in the thumbnail
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!
Great tutorial, thanks 🙏
you’re welcome
upon searching for diamonds. i found diamonds. ty for this.
well said my friend, very poetic and accurate
Thanks for the great content. 🎈
Thank you 💙
nice tutorial！
great voice! greate content! ..wow. Beautiful.
Thanks for watching!
Very helpful, thanks.
aye! glad it helped 💚
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!
Awesome!
i cant find the github of this class
wow no i have router transition, thank brother!
Thank you sir ..
it's veryy gooood
Wow!
Boooooooom! 💥
it doesn't work for me
♥️♥️♥️♥️♥️
thank you open the CC subtitle for the poor English people with poor ear
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.
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"
😲
What I should to do to remove # from url? CreateWebHashHistory doesn’t work