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}}" 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: {},
    created: function () {
        console.log('page1 created');
    },
    beforeCompile: function () {
        console.log('page1 beforeCompile');
    },
    compiled: function () {
        console.log('page1 compiled');
    },
    ready: function () {
        console.log('page1 ready');
    },
    attached: function () {
        console.log('page1 attached');
    },
    detached: function () {
        console.log('page1 detached');
    },
    beforeDestroy: function() {
        console.log('page1 beforeDestroy');
    },
    destroyed: function() {
        console.log('page1 destroyed');
	}
});


Vue.component('page2', {
    template: "<div>page 2</div>",
    data: function () {},
    methods: {},
    created: function () {
        console.log('page2 created');
    },
    beforeCompile: function () {
        console.log('page2 beforeCompile');
    },
    compiled: function () {
        console.log('page2 compiled');
    },
    ready: function () {
        console.log('page2 ready');
    },
    attached: function () {
        if (!this.$root.loggedIn) {
            this.$dispatch('login');
        }
        console.log('page2 attached');
    },
    detached: function () {
        console.log('page2 detached');
    },
    beforeDestroy: function() {
        console.log('page2 beforeDestroy');
    },
    destroyed: function() {
        console.log('page2...