https://github.com/syntaxlexx/v-router-transition
Get awesome vue-router page transitions for your application
https://github.com/syntaxlexx/v-router-transition
Last synced: 2 months ago
JSON representation
Get awesome vue-router page transitions for your application
- Host: GitHub
- URL: https://github.com/syntaxlexx/v-router-transition
- Owner: syntaxlexx
- License: mit
- Created: 2018-11-25T10:26:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-26T10:37:36.000Z (about 2 years ago)
- Last Synced: 2025-09-22T12:19:44.650Z (8 months ago)
- Language: Vue
- Size: 2.81 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-router-transition
[](https://badge.fury.io/js/v-router-transition)
A vue ^2.2.0 awesome vue-router page transitions for your application
## Donating to the project
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](https://store.acelords.com).
This funding is used for maintaining the project and adding new features into Code Style plus other open-source repositories.
## 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**
```js
Vue.component('v-router-transition', require('v-router-transition'));
```
then you can use the component anywhere you choose. Check out the [examples](#examples) for demo usage.
### Locally
Import and include it in the component's `components` property.
```js
// navigation.vue
`import VRouterTransition from 'v-router-transition';`
export default {
components: {
VRouterTransition
},
...
}
```
After declaring the component, you should use the component below the
`` in your components.
```js
```
> Check the [examples](#examples) on how to use it in your template
# Examples
Using the default options, you just need to pass an id and a model
```
```
Laravel/Blade/Vue.js
```php
// sidebar.blade.php
@php
$route = $navigation['route'];
$route = isset($navigation['default']) ? route($route, [$navigation['default']]) : route($route);
@endphp
{{ $link['name'] }}
```
```php
// 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
- [Lexx YungCarter](https://github.com/lexxyungcarter)
- [maoberlehner](https://github.com/maoberlehner/vue-router-page-transitions)
## Licence
- MIT