<div id="app">

                    <!-- NAVIGATION -->
                    <div class="nav">
                        <nav v-for="nav in navs"
                            v-bind:key="nav"
                            v-bind:class="['nav-button', { active: currentNav === nav }]"
                            v-on:click="currentNav = nav">
                            {{ nav }}
                        </nav>
                    </div>

                    <!-- CONTENT COMPONENT-->
                    <transition name="flipit">
                        <component
                            v-bind:is="contentComponent"
                            class="contentDetails">
                        </component>
                    </transition>

                </div>



                Vue.component('nav-home', {
                    template: `<div>
                    <h1> Home component </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                    <!-- banner -->
                    <product-banner
                        v-for="banner in banners"
                        v-bind:key="banner.id"
                        v-bind:banner="banner">
                    </product-banner>

                        <!-- post -->
                    <blog-post
                        v-for="post in posts"
                        v-bind:key="post.id"
                        v-bind:post="post">
                    </blog-post>

                    </div>`
                })

                Vue.component('blog-post', {
                    props: ['posts'],
                    template: `<h3>{{posts.title}}</h3>`
                })

                Vue.component('product-banner', {
                    props: ['banner'],
                    template: `<div id="product-banner">
                                    <div class="product-container">
                                        <h2>{{banner.title}}</h2>
                                        <p>{{banner.content}}</p>
                                    </div>
                                </div>`
                })

                Vue.directive('focus', {
                    inserted: function(el) {
                        el.focus();
                    }
                })

                new Vue({
                    el: '#app',
                    data: {
                        currentNav: 'Home',
                        navs: ['Home'],
                        posts: [
                            { id: 1, title: 'Title one' },
                            { id: 2, title: 'Title two' },
                            { id: 3, title: 'Title three' }
                        ],
                        banners: [
                            {id: 1, title: 'Title 1', content: 'Content 1'},
                            {id: 2, title: 'Title 2', content: 'Content 2'},
                            {id: 3, title: 'Title 3', content: 'Content 3'}
                        ]
                    },
                    computed: {
                        contentComponent: function() {
                            return 'nav-' + this.currentNav.toLowerCase()
                        }
                    },
                    directive: {
                        focus: {
                            inserted: function(el) {
                                el.focus()
                            }
                        }
                    }

                })