v-router-transition

Get awesome vue-router page transitions for your application

Usage no npm install needed!

<script type="module">
  import vRouterTransition from 'https://cdn.skypack.dev/v-router-transition';
</script>

README

v-router-transition

npm version

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