No video :(

Animating Vue Router Transitions in Vue 3

Подписаться 46 тыс.

Просмотров 52 тыс.

50% 1

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...

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 72

@christopheryeung9235 3 года назад

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

@LearnVue 3 года назад

thank you so much! more content to come!

@shmert 3 года назад

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!

@LearnVue 3 года назад

Thanks so much! Glad you enjoy it. What other topics are you interested in as someone new to Vue?

@shmert 3 года назад

@@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.

@deangelolevi3854 3 года назад

Pro trick: watch movies at flixzone. Me and my gf have been using it for watching a lot of movies recently.

@ricardograyson5781 3 года назад

@Deangelo Levi Definitely, have been watching on flixzone for months myself :D

@lighty262 3 года назад

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

@LearnVue 3 года назад

thanks for watching! i'd love to know what you'd want to see next!

@RobertWildling 2 года назад

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!

@LearnVue 2 года назад

appreciate it tons!

@Nekoeye 2 года назад

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

@MrRezaw 5 месяцев назад

It was great! please make more advanced courses for vue and nuxt❤

@deweywsu Год назад

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

@bowiemtl Год назад

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!

@bmmartin1684 Год назад

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

@LearnVue Год назад

That's always my goal :)

@qumbiaweb 2 года назад

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

@SusanthCom 3 года назад

Detailed and clean explanation ❤️

@piusijachi2763 2 года назад

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

@abdianrizkyramadan1535 3 года назад

What just I need. Need more of this

@LearnVue 3 года назад

glad to hear! thanks!

@gnjrale 2 года назад

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

@ten8217 3 года назад

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

@ransela6139 3 года назад

well said my friend, very poetic and accurate

@brianzhamilton 2 года назад

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

@Antonio_Pivaldi Год назад

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

@twilighthunter8021 Год назад

5:28 the part about transitions starts here

@farnaamsamadi5386 3 года назад

Thank you Sir. Please keep going

@LearnVue 3 года назад

Thank you for the encouragment - I plan on making tons of video in the next few months so be ready!

3 года назад

Super awesome, thank you very much!

@LearnVue 3 года назад

You're very welcome!

@4otko999 Год назад

amazing video by the way

@briannhb Год назад

thanks, this is so easy to understand!

@xxwaldi 2 года назад

Your channel is amazing. Keep it up!!

@nurjamil6381 23 дня назад

can someone please explain me how that absolute position fixed the last transition ? I dont have a clue

@webxcryptoit7308 Год назад

Bro, thank's for this besting content!

@justinvanderkwaak1901 2 года назад

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_am_a_real_cat1443 3 месяца назад

Can someone explain me why i should use this technic instead of using /pages/ ???

@cindrmon 2 года назад

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!

@hamidk7294 2 года назад

Thank you 💙

@ryan_roga Год назад

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

@creamCheese89 7 месяцев назад

wow no i have router transition, thank brother!

@andrewkodkod 3 года назад

Great tutorial, thanks 🙏

@LearnVue 3 года назад

you’re welcome

@yudilokhande8915 3 года назад

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

@LearnVue 3 года назад

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!

@12mfon2002 3 года назад

nice tutorial！

@Acuce7ibd468j Год назад

What is the name of the Font used in the thumbnail

@mawpaingthu4042 4 месяца назад

Thank you sir ..

@LeagueOfAI711 2 года назад

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

@genesdada7045 Год назад

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

@LearnVue Год назад

Thanks for watching!

@devops-sushi5534 Год назад

Strangly my transition only works "sometimes" alot of times my View just does not show up.... any idea why? ``` Home | Login | Register | Events ```

@devops-sushi5534 Год назад

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", }, ], }); ```

@sharonlau3963 2 года назад

Thanks for the great content. 🎈

@Vitovarg 2 года назад

Very helpful, thanks.

@LearnVue 2 года назад

aye! glad it helped 💚

@camyrado7140 3 года назад

Awesome!

@asyncFlex 2 года назад

i cant find the github of this class

@aliaaa3254 2 года назад

it's veryy gooood

@user-ym4zr7dm9y 11 месяцев назад

Wow!

@GazX90 Год назад

it doesn't work for me

@ShCcAzad Год назад

Boooooooom! 💥

@Lily-um8pl 2 года назад

thank you open the CC subtitle for the poor English people with poor ear

@darkmift 3 года назад

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

@ransela6139 3 года назад

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.