JSFiddle - React, Tailwind, and code Playground

by JJ Loneman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.13/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>
<div id="app">
  <v-app dark>
    <v-tabs fixed-tabs>
      <v-tab to="/foo">Foo</v-tab>
      <v-tab to="/bar">Bar</v-tab>
    </v-tabs>
    <router-view></router-view>
  </v-app>
</div>

JavaScript

const Foo = {
  template: '<div>Foo component!</div>'
};
const Bar = {
  template: '<div>Bar component!</div>'
};

const routes = [{
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  },
];

const router = new VueRouter({ routes });

new Vue({
  el: '#app',
  router,
})