JSFiddle - React, Tailwind, and code Playground

by Takuya Tejima

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.8.1/vue-router.js"></script>
  <div id="app">
    <!-- この部分に必要なHTML要素を記述していく -->
    <router-link to="/">トップページ</router-link>
    <router-link to="/fruits">フルーツ一覧ページ</router-link>
    <router-view></router-view>
  </div>

JavaScript

// ルートオプションを渡してVue Routerを初期化します
var router = new VueRouter({
  // 各ルートにコンポーネントをマッピングします
  routes: [
    {
      path: '/',
      component: {
        template: `
          <div>
            <h1>トップページです。</h1>
          </div>
        `
      }
    },
    {
      path: '/fruits',
      component: {
        template: `
          <div>
            <h1>フルーツ一覧ページです。</h1>
            <div v-for="fruit in fruits" :key="fruit.id">
              <h2>{{ fruit.name }}</h2>
            </div>
          </div>
        `,
        data () {
          return {
            fruits: [
              {
                id: 1,
                name: 'りんご'
              },
              {
                id: 2,
                name: 'みかん'
              },
              {
                id: 3,
                name: 'バナナ'
              }
            ]
          }
        }
      }
    }
  ]
})

// Vueの初期化を行います
var app = new Vue({
  router: router
}).$mount('#app')