✨ Configurable and native-like page transition for Vue3 and vue-router-next

Overview

vue-router-transition

Configurable and native-like page transition for Vue3 and vue-router-next

Demo

Code Demo

Why

  • Light weight: Only one component added and optional pre-built css

  • Configurable: Easily config different transition for EACH route. Support reverse transition to make your app animation look like native.

  • Easy to use: Just need to install the package and add some configs to use. Easily integrate with other css library like Animate.css

Install

Note: The plugin only support for Vue3+ and Vue Router Next (vue-router^4)

npm i @duannx/vue-router-transition
yarn add @duannx/vue-router-transition

Usage 🚀

Import the plugin on your main.js

// src/main.js
import VueRouterTransition from '@duannx/vue-router-transition'
Vue.use(VueRouterTransition)
// Optional. Import css file if you want to use built in css
import '@duannx/vue-router-transition/dist/style.css'

Replace your router-view with RouterViewTransition component

">

<template>
   <RouterViewTransition :route-key="route.path"/>
template>

Add config to your routes list

// routes.js
export default [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { // the plugin will use meta.transitons of your route
            transitions: {
                priority: 3, // smaller number - higher priority
                enter: 'fade', // transition when navigate to this route
                leave: 'fade' // transition when navigate from this route
            }
        }
    },
    {
        path: '/collection/:id',
        component: Collection,
        name: 'collection',
        meta: {
            transitions: {
                priority: 2,
                enter: {
                    name: '', // optional. It will render to {{name}}-enter-to {{name}}-enter-from {{name}}-leave-to {{name}}-leave-from
                    enterClass: 'animate__animated animate__rollIn', // integrate with animate.css.
                    leaveClass: ''
                },
                leave: {
                    enterClass: '',
                    leaveClass: 'animate__animated animate__rollOut'
                }
            }
        }
    },
    {
        path: '/product/:id',
        component: Product,
        name: 'product',
        meta: {
            transitions: {
                priority: 1,
                enter: 'slide-right',
                leave: 'slide-right-reverse',
                selfEnter: 'fade', // use selfEnter to define transition when redirect to the same route which has the same name or transitionID.
                transitionID: 'product-route' // id that define which routes is the same and use selfEnter transition
            }
        }
    }
]

List of available transitions

  • fade
  • slide-left
  • slide-right
  • slide-up
  • sldie-down
  • zoom-in
  • More comming soon...

You can easily add your custom transition by providing a name and styling for it. This plugin is built on top of Vue3 Transition. Strong recommend to read Vue3 Transition before customizing the plugin. The classes to add style are: yourClassName-enter-from, yourClassName-enter-to, yourClassName-enter-active, yourClassName-leave-from, yourClassName-leave-to, yourClassName-leave-active

Props

props: {
    /**
     * Default class added when the transition active for all type of transitions
     */
    defaultClassTransition: {
        type: String,
        required: false,
        default: "transition-active"
    },
  // Class add to body when enter transition active
    bodyClassEnterTransitonActive: {
      type: String,
      required: false,
      default: "body-enter-transition-active",
    },
    // Class add to body when leave transition active
    // It should be different with bodyClassEnterTransitonActive to avoid conflict and accident remove other class
    bodyClassLeaveTransitonActive: {
      type: String,
      required: false,
      default: "body-leave-transition-active",
    },
    // The key to distinct your router. The trasition will only trigger when the key is changed
    routeKey: {
      type: String,
      requried: true,
    },
    // On SSR, you might wait for the router resolved before mounting the app
    // it leads to the first afterEach hook will not be fired in the page load
    // so you should turn this option to false
    ignoreFirstLoad: {
      type: Boolean,
      default: true,
    }  
}

Development

  • Clone the project
  • Install dependencies: npm install or yarn
  • yarn dev to watch build source code
  • cd dev && yarn dev to run the demo

TODO

  • Add demo
  • Add tests
  • Add more transition: slide-up, slide-down, zoom-in, zoom-out...
  • Support Vue2
  • Support all Vue3 Transition properties
  • Support breakpoints config
  • Support transition hooks
  • Clean readme

License

MIT

You might also like...
Generate Vue Router routes automatically using a markdown arborescence.

Generate Vue Router routes automatically using a markdown arborescence.

Automated generation of vue-router

自动生成router文件 通常情况下一个vue项目,随着时间的增加,router会越来越多,而大部分的代码其实都是重复的,修改很麻烦,还不如通过工具生成。

Lightweight layout resolver for Vue Router

vue-router-layout Lightweight layout resolver for Vue Router. You may want to use vue-cli-plugin-auto-routing which includes all useful features on ro

Filesystem based route generation for Webpack + vue-router

@badrap/routdir Filesystem based route generation for Webpack + vue-router. @badrap/routdir is based on Sapper's pages and layouts features, with some

VRouteHelper - package to add that kind of syntax for vue-router.

VRouteHelper I really like how easy it is to specify routes in Laravel so I made this package to add that kind of syntax for vue-router. Any feedback

Generate Vue Router routing automatically for multipages

Generate Vue Router routing automatically for multipages

Vue route change loading. using Router Navigation Guards.

Vue Router Loading Easy to use and highly customizable Vue Router Loading. Getting started Install the package: npm install vue-router-loading Import

A MOD version based on vue-router

vue-router-mod This is a MOD version based on vue-router 3.1.3. Introduction vue-router-mod provides extra apis to replace/remove route dynamically. I

Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Comments
  • Only transition the router

    Only transition the router

    Description of issue

    When transitioning, the entire page transitions, rather than targeting just the router component. I'd expect that only the portion of the page governed by the router-view would transition.

    Example

    https://www.loom.com/share/57e1639e6660420f8f1b150dc762bfd7

    opened by bjkippax 1
Owner
Nguyễn Xuân Duẩn
Nguyễn Xuân Duẩn
🚦This is the repository for Vue Router 4 (for Vue 3)

vue-router This is the repository for Vue Router 4 (for Vue 3) Supporting Vue Router Vue Router is part of the Vue Ecosystem and is an MIT-licensed op

vuejs 2.4k Oct 1, 2022
🚦 The official router for Vue.js.

vue-router This is vue-router 3.0 which works only with Vue 2.0. For the 1.x router see the 1.0 branch. Supporting Vue Router Vue Router is part of th

vuejs 18.9k Sep 27, 2022
Generate sitemap.xml by vue-router configuration

vue-router-sitemap Generate sitemap.xml by vue-router configuration Install npm i --save vue-router-sitemap Example usage // router.js import VueRout

Konstantin Kulinicenko 111 Aug 9, 2022
A Trie-based vue router with the ability of managing history.state.

vue-pilot A Trie-based vue router with the ability of managing history.state. Install npm install vue-pilot Features Small (8kb after gzipped). Abili

Jiang Fengming 11 Nov 16, 2020
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Katashin 146 Sep 27, 2022
Hello-vue-router

hello-vue-router Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

null 0 Dec 23, 2021
Touring Vue Router Example App

Touring Vue Router Example App This is the Vue 3 application we build step by step in the Touring Vue Router course on Vue Mastery. It's starting code

pparonson 0 Dec 30, 2021
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Zen 0 Jul 3, 2021
A tool to generate routes for Vue-Router with Vite.

v-route-generate A tool to generate routes for Vue-Router with Vite. Getting Started Install v-route-generate # Choose a package manager you like. #

weiquanju 6 Sep 13, 2022