Introduction

Vue offers built-in <transition> component to apply transition effects and animate DOM easily. It is a special component that we can use to animate anything which is between the opening and closing tag.

Only ONE element can animate with the <transition> component.

You can have multiple elements inside of this <transition> component, but then have to apply conditions of these elements using v-if or v-show. We can use the <transition-group> component for multiple components.

Demo Scenario

Alert Notification will appear and slide up after 5 seconds using built-in <transition> component. Here’s an example:

There are 6 CSS…

Introduction

Let explore Vue’s lifecycle hooks which include activated, deactivated, errorCaptured, renderTracked, and renderTriggered in this article. Vue 3 just release recently and updated some cool features for an example renderTracked and renderTriggered lifecycle hooks. The other lifecycle hooks are explained here.

activated and deactivated

activated and deactivated lifecycle hooks will be invoked accordingly when a component is wrapped by a dynamic component — keep-alive. This dynamic component is useful if want to preserve/maintain the previous state's when switching the tab or navigate to another page.

• activated hook shows that the dynamic component e.g. Home component is active on the web page.
• The deactivated…

Introduction

There are 13 of Vue’s lifecycle hooks according to the latest Official Vue documentation. Every Vue instance that created will go through lifecycle hooks. Here are the Vue’s lifecycle hooks will explain in this article:

• beforeCreate and created
• beforeMount and mounted
• beforeUpdate and updated
• beforeUnmount and unmounted

destroyed and beforeDestroy lifecycle hooks (in Vue.js 3.0.0+) are deprecated.

Another 5 of Vue’s lifecycles hooks are explained in Part 2 which included activated, deactivated, errorCaptured, renderTracked, and renderTriggered.

beforeCreate and created

Vue declares and knows data properties in these two phases. We can fetch the data from the server-side in the created hook before render…