vue-router 2 template

Template for vue-router 2

by khamer

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">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <div class="thing">
    <transition @enter="enter" @leave="leave" mode="out-in">
      <router-view :key="$route.fullPath"></router-view>
    </transition>
    <transition name="fade">
    <div v-if="isLoading" class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-double-ring"><div></div><div></div></div></div>
    </transition>
  </div>
</div>

CSS

.thing {
  position: relative;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 250ms ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* Spinner stuff Only Below */

@keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.lds-css {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.lds-double-ring {
  position: relative;
}
.lds-double-ring div {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 60px;
  left: 60px;
  border-radius: 50%;
  border: 8px solid #000;
  border-color: #20262e transparent #20262e transparent;
  -webkit-animation: lds-double-ring 4s linear infinite;
  animation: lds-double-ring 4s linear infinite;
}
.lds-double-ring div:nth-child(2) {
  width: 60px;
  height: 60px;
  top: 70px;
  left: 70px;
  border-color: transparent #20262e transparent #20262e;
  -webkit-animation: lds-double-ring_reverse 4s linear infinite;
  animation: lds-double-ring_reverse 4s linear infinite;
}
.lds-double-ring {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

Babel + JSX

const Foo = {
	template: `<div><h1 v-text="\`You're on \${$route.params.slug}\`"></h1></div>`,
};

const router = new VueRouter({routes: [{path: '/:slug', component: Foo}]});

new Vue({
	router,
  el: '#app',
  data: {
  	isLoading: true,
  },
  methods: {
    enter(el, done) {
      setTimeout(() => {
      	this.isLoading = false;
      	done();
      }, 1000);
    },
    leave(el, done) {
    	this.isLoading = true;
      setTimeout(done, 250);
    }
  },
})

router.push('/home');