add page and layout transitions

assets/global.scss

@@ -1,4 +1,5 @@
 @import "./colors";
+@import "./transitions";
 @import url('https://fonts.googleapis.com/css?family=Raleway');
 
 html, body, #__nuxt, #__layout {

assets/transitions.scss

@@ -0,0 +1,29 @@
+.page-enter-active, .page-leave-active {
+  transition: opacity 0.5s;
+}
+
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+
+.layout-enter-active {
+  transition: transform 0.5s ease, opacity 0.6s ease;
+}
+
+.layout-leave-active {
+  transition: transform 0.5s ease, opacity 0.1s ease;
+}
+
+.layout-enter {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.layout-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.layout-enter-to, .layout-leave {
+  opacity: 1;
+}

layouts/default.vue

@@ -2,6 +2,12 @@
   <nuxt/>
 </template>
 
+<script>
+  export default {
+    name: "default"
+  }
+</script>
+
 <style lang="scss">
 
 </style>

layouts/secondLevel.vue

@@ -1,10 +1,10 @@
 <template>
-    <div id="layout">
+  <div id="layout">
-      <nuxt-link class="button" to="/"></nuxt-link>
+    <nuxt-link class="button" to="/"></nuxt-link>
-      <div class="content">
+    <div class="content">
-        <nuxt/>
+      <nuxt/>
-      </div>
     </div>
+  </div>
 </template>
 
 <script>