JSFiddle - React, Tailwind, and code Playground

vue router with layout

by Christopher O

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/">Go to Default</router-link><br>
    <router-link to="/foo">Go to Foo</router-link><br>
    <router-link to="/bar">Go to Bar</router-link><br>
    <router-link to="/user/123">Go to User 123</router-link><br>
    <router-link to="/user/456">Go to User 456</router-link><br>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

CSS

html, body {
     height: 100%;
     position: relative !important;
}
body {
     padding: 0px;
     margin: 0px;
     font-family: Helvetica;
     background-color: #20262e;
}

#main {
     display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(14px, 1fr));
     */
     grid-template-columns: minmax(200px, 10fr) 30fr;
    /* default. will resize automatically */
     grid-gap: 0px;
}
.squarebubble{
     background-color: #fff;
    /* border-radius: 3px;
     */
}
.mainIn {
    /* padding: 20px;
     */
     font-size: 14px;
}
/* Main Top div */
.topbubble{
    /* margin-bottom: 10px;
     */
     padding: 1px;
     font-size: 14px;
     height:40px;
     /* border-bottom:1px solid #ccc; */
     background-color: #E0E7EF;
}

#logo{
  font-weight:bold;
  font-size: 18px;
  font-family: 'Questrial', sans-serif !important;
}

/* Main Left Div */
#lefty{
}

#menu{
     background-color: #FF0;
     width:200px;
     float:left;
     position:relative;
     height:100% !important;
     min-height:100% !important;
}
.hideme{
     display:none;
}

/* Hamburger Animation */

/* 

https://github.com/jonsuh/hamburgers/tree/master/dist https://rawgit.com/jonsuh/hamburgers/master/dist/hamburgers.min.css

 */
 .hamburger {
     padding: 15px 15px;
     display: inline-block;
     cursor: pointer;
     transition-property: opacity, filter;
     transition-duration: 0.15s;
     transition-timing-function: linear;
     font: inherit;
     color: inherit;
     text-transform: none;
     background-color: transparent;
     border: 0;
     margin: 0;
     overflow: visible;
}
 .hamburger:hover {
     opacity: 0.7;
}
 .hamburger.is-active:hover {
     opacity: 0.7;
}
 .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
     background-color: #000;
}
 .hamburger-box {
     width: 20px;
     height: 12px;
     display: inline-block;
     position: relative;
}
 .hamburger-inner {
     display:...

JavaScript

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.
// These can be imported from other files
const Default = { template: '<div class="squarebubble topbubble" id="toppy"><div class="hamburger hamburger--arrowturn"  id="hammy">    <div class="hamburger-box">      <div class="hamburger-inner"></div>    </div>  </div>  <span id="logo">Chatfer</span></div><div id="main">  <div class="squarebubble mainIn" id="lefty">🍌 Bananas are amazing fruit!</div>  <div class="squarebubble mainIn" id="righty">🍒 Cherries taste delicious!</div></div>' };
const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
const User = { template: '<div>User {{ $route.params.id }}</div>' };
// https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

// uses Promise & webpack 2 to async load file when the route is visited
const Foo2 = () => import('./Foo2.vue');


// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
	{ path: '/', component: Default, name: 'Hello'},
  { path: '/foo', component: Foo, name: 'Hi Foo' },
  { path: '/bar', component: Bar, name: 'Hi Bar' },
  { path: '/user/:id', component: User, name: 'Hi User' },
  
  { path: '*', redirect: '/' } // redirect for default or 404
];

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
	//mode: 'history', 
  // use full URLs vs # (html5). Requires server rewrite to index if file doesn't exist (for bookmarks)
  // NGINX: location / { try_files $uri $uri/ /index.html; }
  routes // short for `routes: routes`
});

/* router.replace({ path: '*', redirect: '/'...