JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/nkovacs/vue/1116-build/dist/vue.js"></script>
<a href="#" v-on="click: race">Click me</a>

<section id="main">
    <component is="{{currentView}}" v-transition="page" transition-mode="out-in"></component>
</section>

CSS

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

JavaScript

Vue.config.debug = true;

new Vue({
    el: 'body',
    data: {
        currentView: null
    },
    methods: {
        race: function () {
            if (this.currentView == 'one') {
                this.currentView = 'two';
            } else {
                this.currentView = 'one';
            }
        }
    }
})

Vue.component('one', {
    template: "<div>Component 1</div>",
});

Vue.component('two', {
    template: "<div>Component 2</div>",
});