Hi, everyone. I would like to explain how to switch themes with Vue and CSS in different ways of cool animations in this article. Let start with a simple way.
<transition>component to apply transition effects and animate DOM easily
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
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.
Alert Notification will appear and slide up after 5 seconds using built-in
<transition> component. Here’s an example:
There are 6 CSS…
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.
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.
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:
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.
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…
A web developer.