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>

<a href="#" v-on="click: logChildren">Log $children</a>

<component is="{{view}}" v-transition="page" wait-for="child-ready"></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;
        },
        logChildren: function() {
            console.log(this.$children);
        }
    }
});

Vue.component('page1', {
    template: "<div>page 1</div>",
    data: function () {},
    methods: {},
    compiled: function () {
        console.log('page1 compiled');
        var vm = this;
        setTimeout(function() {
            vm.$emit('child-ready');
        }, 2000);
    }
});


Vue.component('page2', {
    template: "<div>page 2</div>",
    data: function () {},
    methods: {},
    compiled: function () {
        console.log('page2 compiled');
        var vm = this;
        setTimeout(function() {
            vm.$emit('child-ready');
        }, 2000);
    }
});