DEV Community: Pooya Goodarzi

How To Do Page Transitions In Vue.js

Pooya Goodarzi — Sun, 19 Oct 2025 07:48:35 +0000

Hi there my fellow programmers.
Today we are here to see how we can have smooth page transitions in our SPA Vue.js app .
At first it may seem it's a huge deal and a lot of work to do . Well I'm here to tell you it's not
In fact it's really easy to have custom transitions while you are using vue-routerto change routes in your app.

There are several ways to apply transitions to routes but I'm gonna keep it short and tell the easiest way of all.

What tools do we need to add page transitions?
On top of your vueand vue-router you are going to need a small animation library designed for vue called vue-transify.
Note : This library support vue3 not vue 2.

Installation
Install the library via npm

npm install vue-transify

Add the css styles to your main.js

import { createApp } from 'vue'
import App from './App.vue'
import "vue-transify/dist/vue-transify.css";

createApp(App).mount('#app')

Now you just need to use the helper that transify provides instead of vue-router.

<template>
  <!--This component replaces the <router-view> in your app  -->
  <PageTransitionHelper mode="out-in" :duration="1000" />
</template>
<script setup>
//You need to import the animation you want to use in the app
import { PageTransitionHelper } from "vue-transify";
</script>

Now that we have our library completely setup we can tell the app what transitions to use in router index.js.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

const routes = [
  {
    path: '/',
    component: HomeView,
    meta: { transition: 'fade' }
  },
  {
    path: '/about',
    component: AboutView,
    meta: { transition: 'slideInUp' }
  }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

That's it . Vue-Transify will automatically read the meta add the transition to your pages.

If you want to know more about the library feel free to read the docs in github.
You can also check out the demo website to see the transitions in action

Page Transition Animations With Vue-Transify 1.2.0

Pooya Goodarzi — Wed, 15 Oct 2025 08:14:29 +0000

Vue-Transify just got a major upgrade!
With version 1.2.0, we’re introducing Page Transition Animations — a simple, elegant way to animate your route changes in Vue 3 using vue-router.

Version 1.2.0 brings route-based animations through a built in component <PageTranstionHelper/>
It's built on top of vue-router and lets you animate between pages with a single tag and no extra setup or config.

<template>
  <PageTransitionHelper mode="out-in" :duration="1000" />
</template>
<script setup>
import { PageTransitionHelper } from "vue-transify";
</script>

You just place this line instead of <router-view/> and you got yourself transitions for every page. Stay and I show you what is under the hood.
So basically the only thing you need to change in your project is to replace the <router-view> with <PageTransitionHelper/>
Note : You need to import the animation you want to use in your App.vue otherwise the library will not find any animations to work with.

⚙️ Route-based Custom Animations
First let's see how you can select the animation you want for each route.
This is your router index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

const routes = [
  {
    path: '/',
    component: HomeView,
    meta: { transition: 'fade' }
  },
  {
    path: '/about',
    component: AboutView,
    meta: { transition: 'slideInUp' }
  }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

So you can add animations to each route using the meta fields and the transition will automatically be added to your router-view.

🧩 Dependency
Page transitions use vue-router for their logic but if you don't want them in your project it's totally up to you as the vue-router package is an optional dependency in Vue-Transify

🧠 Update in a nutshell
With Vue-Transify 1.2.0, you can now:

Animate route changes cleanly, without boilerplate.

Reuse the same library for component and page transitions.

Keep your code semantic and minimal.

And to see the transitions in action be sure to visit the Demo Website.

🚀 Quick Start
For a quick start please checkout the documentation in github

✨ Final Thoughts
Vue-Transify started as a simple idea — making transitions elegant and effortless for Vue developers.
With this new release, it’s evolving into a complete animation toolkit for Vue 3.

If you like the project, your support could mean a lot
⭐ star it on GitHub and help it grow → repo

Page Transition Animations With Vue-Transify 1.2.0

Pooya Goodarzi — Wed, 15 Oct 2025 08:07:35 +0000

Vue-Transify just got a major upgrade!
With version 1.2.0, we’re introducing Page Transition Animations — a simple, elegant way to animate your route changes in Vue 3 using vue-router.

<template>
  <PageTransitionHelper mode="out-in" :duration="1000" />
</template>

You just place this line instead of <router-view/> and you got yourself transitions for every page. Stay and I show you what is under the hood.

⚙️ Route-based Custom Animations
First let's see how you can select the animation you want for each route.
This is your router index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

const routes = [
  {
    path: '/',
    component: HomeView,
    meta: { transition: 'fade' }
  },
  {
    path: '/about',
    component: AboutView,
    meta: { transition: 'slideInUp' }
  }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

So you can add animations to each route using the meta fields and the transition will automatically be added to your router-view.

🧠 Update in a nutshell
With Vue-Transify 1.2.0, you can now:

Animate route changes cleanly, without boilerplate.

Reuse the same library for component and page transitions.

Keep your code semantic and minimal.

And to see the transitions in action be sure to visit the Demo Website.

🚀 Quick Start
For a quick start please checkout the documentation in github

If you like the project, your support could mean a lot
⭐ star it on GitHub and help it grow → repo

Introducing Vue-Transify - The New And Simple Way To Animate Vue Components

Pooya Goodarzi — Sun, 05 Oct 2025 06:13:26 +0000

I created Vue-Transify in order to remove the repetitive transition code from my CSS and my components.

What Is Vue-Transify ?

vue-transify is a collection of pre-built , customizable transition components built on top of Vue's <Transition>.

Each animation comes ready to use . all you need is one component tag.
No keyframes No extra CSS !

<Fade :duration="600" :appear="true">
  <p>Hello Vue-Transify 🎉</p>
</Fade>

And Boom !
That's it ! The animation is handled automatically with smart defaults and you can control it all via props

⚙️ Installation

Install the package via npm

npm install vue-transify

2.Add the css to your main.js

import { createApp } from 'vue'
import App from './App.vue'
import "vue-transify/dist/vue-transify.css";

createApp(App).mount('#app')

3.Import any animation you want in your components

<template>
  <div style="padding: 2rem">
    <button @click="show = !show">Toggle Fade</button>
    <!-- Use the component -->
    <Fade :duration="600" :appear="true">
      <p v-if="show">✨ Hello World from Fade Animation !</p>
    </Fade>
    <!-- Use these props to change the behavior of your animation -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
// Import the component
import { Fade } from "vue-transify";
const show = ref(true)
</script>

And done ! Now You have some customizable, light animations in a sec.

💡 Why I Built It ?

When I was experimenting with transitions in vue , I kept repeating my self over and over in the CSS and keyframe patterns.
So I thought if vue is providing everything why not let the library handle the boilerplate ?

How It Works

Each animation component is built on top of Vue's <Transition>Element.
Internally all components share a few CSS variables to define timing, easing and delay

:root {
  --animation-duration: 500ms;
  --animation-easing: ease;
  --animation-delay: 0ms;
}

Then in each transition class they are applied dynamically by the props you provide

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--animation-duration) var(--animation-easing)
    var(--animation-delay);
}

Props to use

Prop	Type	Default	Description
`appear`	Boolean	`false`	Run animation on mount
`duration`	Number	`500`	Duration in ms
`easing`	String	`'ease'`	Transition easing
`delay`	Number	`0`	Delay before starting

All animation components are using these set of props

Where to see all animations ?

For checking out and trying animations you can visit the website

For now you can visit my github page in order to see the animations list
Github;

Ezlazy: A Lightweight Lazy Loading Library for Images & Backgrounds

Pooya Goodarzi — Mon, 29 Sep 2025 07:12:09 +0000

Have you ever opened a webpage and tried to load 100 images at once ? yea, right not fun ! That is why I decided to create ezlazy.
It's minimal attribute based library to lazy-load images on infinite scroll using the Intersection Observer.

*What it does ? *

It's attribute based so you just need to work it in HTML and won't be needing any js.
Automatically uses the Intersection Observer if available in browsers, fallback otherwise
Tiny footprint and dependency free

Quick Start

Just add the CDN and you are ready to go !
Note : You can also install the package using npm i ezlazy
(after installing be sure to import it in your main js file import 'ezlazy';)

<img data-ezlazy="my-photo.jpg" alt="Lazy photo">

<script src="https://unpkg.com/ezlazy@latest/dist/ezlazy.min.js"></script>

That's it and the image will be loading when close to entering viewport.

Links
🔗 GitHub: [https://github.com/Redskullvue/ezlazy]
📦 NPM: [https://www.npmjs.com/package/ezlazy?activeTab=readme]

Give it a try in your next project and let me know your feedback. Contributions and stars are always welcome ⭐️.