Animating Vue Router Transitions in Vue 3

Wow!

Strangly my transition only works "sometimes" alot of times my View just does not show up.... any idea why?

```
<nav id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/login">Login</router-link> |
<router-link to="/register">Register</router-link> |
<router-link to="/events">Events</router-link>
</nav>
</div>

<router-view v-slot="{ Component, route }">
<transition
name="fade"
mode="out-in">
<component
:is="Component"
:key="route.path" />
</transition>
</router-view>
```

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!

Thank you. This video of yours helped a lot, really.

What is the name of the Font used in the thumbnail

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++++!

Bro, thank's for this besting content!

it doesn't work for me

amazing video by the way

Do you have a video to do the same effect using Nuxt 3?

I have learnt more in this simple tutorial that I ever thought I would when I clicked on the video. Thanks mahn

thanks, this is so easy to understand!

Boooooooom! 💥

great voice! greate content! ..wow. Beautiful.

Thank you 💙

Best tutorial for Vue 3 transitition I have watched so far. Thanks

Thank you! This is exactly what I’m looking for right now!

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.

it's veryy gooood

Hi ! Can I ask why this does not work anymore? everytime i type in mode="outIn" , my page just goes blank

You are the best. Not only the latest version but also very good explanation and content!

What I should to do to remove # from url? CreateWebHashHistory doesn’t work

i cant find the github of this class

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!

I'm new to vue(2days in) , thank for this

😲

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!

Thanks for the great content. 🎈

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!

Your channel is amazing. Keep it up!!

♥️♥️♥️♥️♥️

Very helpful, thanks.

Wow. The only tutorial that worked flawlessly and was clearly understandable. Thanks.

nice tutorial！

The way you deliver information is like a professional, very easy to understand for beginners like me, you deserve more subscribers.

I am from Ukraine and I seen that you the best in the world!

Great tutorial, thanks 🙏

Seriously this is by far the most well articulated set of videos for vue

What just I need. Need more of this

Detailed and clean explanation ❤️

upon searching for diamonds. i found diamonds. ty for this.

Thank you Sir. Please keep going

Awesome!

Super awesome, thank you very much!

I would recommend to drop the first half showing what router is and focusing on the the subject of the video title.

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!

Yet another amazing video. Also, sidenote... Is it possible to setup a discord server where we could give our suggestions for possible videos?