Vue

by Roland Doda

HTML

<!--   <dialog open class="dialog">
    <div class="header">
      <div class="title">Save changes?</div>
      <span class="close">X</span>
    </div>
  </dialog> -->

<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="/about">About</router-link>
  <router-view></router-view>
</div>

<template id="home">
  Hi I am the home page
</template>

<template id="about">
  About
</template>

CSS

body {
  background: #1f5398;
  padding: 20px;
  font-family: Helvetica;
}

.dialog {
    width: 20rem;
    border: none;
    box-shadow: 1px 2px 1px #6b5c5c;
    display: grid;
    grid-template-rows: 50px 1fr;
    height: 20rem;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.header {
    height: 50px;
    box-shadow: inset 0px 4px 9px 5px #eee;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
}

.header > .close {
  font-weight: bold;
  cursor: pointer;
}

Babel + JSX

const Home = Vue.component({
	template: '#home'
})

const About = Vue.component({
	template: '#about'
})

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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