Udemy VueJS - Slots

App.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <br>
                <button class="btn btn-primary" @click="selected = 'blue'">Load Blue Template</button>
                <button class="btn btn-success" @click="selected = 'green'">Load Green Template</button>
                <button class="btn btn-danger" @click="selected = 'red'">Load Red Template</button>
                <hr>
                <app-blue v-show="blueOn">
                    <h2>Mr Blue Sky</h2>
                </app-blue>
                <app-green v-show="greenOn">
                    <h2>Green Lantern</h2>
                </app-green>
                <app-red v-show="redOn">
                    <h2>Hunt for the red October</h2>
                </app-red>
            </div>
        </div>
    </div>
</template>

<script>
    import Blue from './components/Blue.vue';
    import Green from './components/Green.vue';
    import Red from './components/Red.vue';

    export default {
        components: {
            appBlue: Blue,
            appGreen: Green,
            appRed: Red
        },
        data()
        {
            return {
                selected: 'blue',
            }
        },
        computed: {
            blueOn(){
                return this.selected === 'blue';
            },

            redOn(){
                return this.selected === 'red';
            },

            greenOn(){
                return this.selected === 'green';
            },
        }
    }
</script>

<style>
</style>

Blue.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>

</script>

<style scoped>
    div {
        border: 1px solid blue;
        background-color: lightblue;
        padding: 30px;
        margin: 20px auto;
        text-align: center
    }
</style>

Green.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>

</script>

<style scoped>
    div {
        border: 1px solid green;
        background-color: lightgreen;
        padding: 30px;
        margin: 20px auto;
        text-align: center
    }
</style>

Red.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>

</script>

<style scoped>
    div {
        border: 1px solid red;
        background-color: lightcoral;
        padding: 30px;
        margin: 20px auto;
        text-align: center
    }
</style>