v-router-transition
v1.0.2
Published
Get awesome vue-router page transitions for your application
Downloads
26
Maintainers
Readme
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.component('v-router-transition', require('v-router-transition'));
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';`
export default {
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
<router-link to="{{ relativeUrl($route) }}" tag="v-list-tile">
<v-list-tile-content title="{{ relativeUrl($route) }}">
<v-list-tile-title >
{{ $link['name'] }}
</v-list-tile-title>
</v-list-tile-content>
</router-link>
// main.blade.php
@include('layouts.partials.sidebar')
<v-router-transition transition="slide">
<router-view></router-view>
</v-router-transition>
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