v-router-transition
A vue ^2.2.0 awesome vue-router page transitions for your application
Install
npm install v-router-transition --save
OR
yarn add v-router-transition
Options (Props)
transition
- fade (default)
- slide
- sliding
- fade-transform
mode
- out-in (default)
- in-out
e.t.c.
Usage
You can either choose to import the component globally or inside a certain component.
Globally
Define a Vue.component()
inside your app.js/main.js
Vue;
then you can use the component anywhere you choose. Check out the examples for demo usage.
Locally
Import and include it in the component's components
property.
// navigation.vue `import VRouterTransition from 'v-router-transition';` components: VRouterTransition ...
After declaring the component, you should use the component below the
<router-view></router-view>
in your components.
<v-router-transition transition="slide"> <router-view></router-view></v-router-transition>
Check the examples on how to use it in your template
Examples
Using the default options, you just need to pass an id and a model
<v-router-transition transition="sliding" mode="in-out">
<router-view></router-view>
</v-router-transition>
Laravel/Blade/Vue.js
// sidebar.blade.php @php $route = $navigation['route']; $route = isset($navigation['default']) ? route($route, [$navigation['default']]) : route($route);@endphp {{ $link['name'] }}
// main.blade.php @include('layouts.partials.sidebar')
Contribution
The package has been kept as simple as possible to offer a starting point for your next project. We are looking for more css page transitions and we would be more than grateful to receive your pull-requests. You can also share a gist containing the css transition for us to add.
Cheers!
Credits
Licence
- MIT