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