JSFiddle - React, Tailwind, and code Playground

by Vu Nguyen

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-link to="/books">/books</router-link>
  <router-view></router-view>
</div>

<template id="books">
  <div> 
      <div class="book" v-for="book in books">
      
          {{book.title}}
          <ul>
              <router-link :to="{ path: '/books/'+book.id+ '/summary'}">Summary</router-link>
              <router-link :to="{ path: '/books/'+book.id+ '/location'}">Location</router-link>
              <router-link :to="{ path: '/books/'+book.id+ '/condition'}">Condition</router-link>
              <router-link :to="{ path: '/books/'+book.id+ '/reservation'}">Reservation</router-link>
          </ul>    
          <router-view></router-view>
      </div>
  </div>
</template>

CSS

.book{
  margin-top: 15px;
}

JavaScript

const Home = { template: '<div>Home</div>' }
const Foo = { template: '<div>Foo</div>' }

const Books = {
  template: '#books',
  data: function(){
      return {
        books: [
          {id: 1, title: 'Harry Potter'},
          {id: 2, title: 'Twilight'},
          {id: 3, title: 'The Hobbit'}
        ]
      }
  }
}

const summary = { template: '<div>Summary component</div>' }
const location = { template: '<div>Location component</div>' }
const condition = { template: '<div>Condition component</div>' }
const reservation = { template: '<div>Reservation component</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    { path: '/books', component: Books,
      children: [
              {
                path: ':bookID/summary',
                component: summary
              },
              {
                path: ':bookID/location',
                component: location
              },
              {
                path: ':bookID/condition',
                component: condition
              },
              {
                path: ':bookID/reservation',
                component: reservation
              }
        ]
  }]
})

new Vue({
	router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})