vue-effect-page v2.0.5

vue-effect-page

Description

VUE-EFFECT-PAGE - It's VUE JS component for your projects, which allows you to add animation of the effect of switching pages in your SPA application. There are a large number of different 3D effects that will make your application excellent. Your users will appreciate it.

View DEMO

Install

npm install vue-effect-page

Usage

1.

import VueEffectPage from 'vue-effect-page'
Vue.use(VueEffectPage)

Wrap <router-view/> in an <vue-effect-page></vue-effect-page> component and set prop defaultEffect

<template>
  <div id="app">
    <vue-effect-page :defaultEffect="defaultEffect">
      <router-view/>
    </vue-effect-page>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      defaultEffect: 33
    }
  }
}
</script>

OR set up a unique effect for each route, for this add the property effect

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      effect: '1'// Specific code of effect or effect ID
    },
    {
      path: '/second-page',
      name: 'second-page',
      component: SecondPage,
      effect: '5'// Specific code of effect or effect ID
    },
    {
      path: '/random-page',
      name: 'random-page',
      component: RandomPage,
      effect: '25'// Specific code of effect or effect ID
    },
  ],
});

new Vue({
  el: '#app',
  render: h => h(App),
  router
});

Properties

this.$effectPage

• setEffect: (routeName: String, effectID: String | Number) => void
  Method for programmatically assigning an effect to a route by the name of the route

this.$effectPage.setEffect('second-page', 'move-to-left--from-right');

• current The object of the current effect for the current route

this.$effectPage.current
  
// result: { id: '...', name: '...', code: '...', ... }

List of all effects