JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<a href="#" v-on="click: navigate('page1')">Page 1</a>

<a href="#" v-on="click: navigate('page2')">Page 2</a>

<component is="{{view}}" wait-for="child-ready" v-transition="page" transition-mode="out-in"></component>

CSS

.page-transition {
    transition: all .5s ease;
}
.page-enter {
    opacity: 0;
}
.page-leave {
    opacity: 0.1;
}

JavaScript

Vue.config.debug = true;

new Vue({
    el: 'body',
    data: {
        view: null,
        loggedIn: false,
        viewAfterLogin: null
    },
    methods: {
        navigate: function(page) {
            this.view = page;
        }
    },
    events: {
        login: function() {
            this.viewAfterLogin = this.view;
            this.view = 'login';
        },
        loggedIn: function() {
            this.loggedIn = true;
            this.view = this.viewAfterLogin;
        }
    }
});

Vue.component('page1', {
    template: "<div>page 1</div>",
    data: function () {},
    methods: {},
    compiled: function () {
        this.$nextTick(function() {
            this.$emit('child-ready');
        });
    }
});


Vue.component('page2', {
    template: "<div>page 2</div>",
    data: function () {},
    methods: {},
    compiled: function () {
        if (!this.$root.loggedIn) {
            this.$dispatch('login');
        } else {
            this.$nextTick(function() {
                this.$emit('child-ready');
            });
        }
    }
});

Vue.component('login', {
    template: "<div>Login page: <a href=\"#\" v-on=\"click: login\">login</a></div>",
    data: function () {},
    methods: {
        login: function() {
            this.$dispatch('loggedIn');
        }
    },
    compiled: function () {
        var self = this;
        this.$nextTick(function() {
            this.$emit('child-ready');
        });
    }
});