Transition name is not applied if the route has never been changed.

[Muhammad Rizqi Nur]

First of all, I know that this plugin is meant to be used with the router-view, but a page doesn't necessarily mean a route to me. I have some special pages that I display with v-if on special cases, one of them is a login page. It is a page because covers the entire window page and hides everything else (because v-else). It appears first and only gets hidden on login.

If you want to dismiss this because it's not the intended use case, it's fine, I can still extend the component. Although, the issue and the fix are simple and shouldn't break stuff, maybe.

Now, for the issue; the name prop is not applied if the route has never been changed yet, because it only applies that on beforeEach route change. The plugin defaults to fade transition and will only apply the transition in name prop after a route change.

The fix is simple; set transition from name prop on created.

I'd also like to add that while 'fade' is the default value for transition, it is not the default value for the name prop. So, maybe you also want to set name prop default value to 'fade'.

The extending component I mentioned

<script>
import VuePageTransition from 'vue-page-transition/src/components/VuePageTransition';

const MyPageTransition = {
    name: "MyPageTransition",
    extends: VuePageTransition,
    created(){
        this.transition = this.$props.name;
    }
}
export { MyPageTransition }
export default MyPageTransition
</script>