Vue.js basics - transition element

Oct 20, 2020

Today I've decided to review my basics on vue.js even I've been using Nuxt.js. Nuxt.js made everything even simplier than a framework as Vue.js but I had the need of revisit the ways how works vue.js in its fundamentals.

It has worked for me to have even clearer why computed and methods for example and to learn how a transition element works. I don't remember if I knew it or not, but I've appreciated to use it anyway.

Here an example from vue.js documentation where it explain how we can use a transition element:

Transition Element Vue.js

We can see how important is to name the transition-el with the basename that serves vue to select the css class we need in the enter-leave system.

And I add two cases:

- (A) If you had more than one element in the transition where you need to change to transition-group and bind a key directive to each element.

- (B) Where you can use terc conditional to manage the content and directives as key and show.

This first post serves me to be a start using this own-made feature in my portfolio. And in favor to that serves me to try how it works.

Miguel Angel Alcala Romero © 2020