A vue ^2.2.0 awesome vue-router page transitions for your application
If you've found this useful and would like to buy the maintainers a coffee (or a Tesla, we're not picky), feel free to do so.
Or by buying products and merchandise at Marketplace.
This funding is used for maintaining the project and adding new features into Code Style plus other open-source repositories.
npm install v-router-transition --save
OR
yarn add v-router-transition
- fade (default)
- slide
- sliding
- fade-transform
- out-in (default)
- in-out
e.t.c.
You can either choose to import the component globally or inside a certain component.
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.
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
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>
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!
- MIT