Prevent layout component re-rendering about vue-enterprise-boilerplate HOT 13 OPEN

diff --git a/src/app.vue b/src/app.vue
index 6857411..b9702a8 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -9,6 +9,14 @@ export default {
       return title ? `${title} | ${appConfig.title}` : appConfig.title
     },
   },
+  computed: {
+    LayoutComponent() {
+      return (
+        (this.$route.meta && this.$route.meta.layout) ||
+        require('@layouts/main').default
+      )
+    },
+  },
 }
 </script>
 
@@ -18,7 +26,22 @@ export default {
     Even when routes use the same component, treat them
     as distinct and create the component again.
     -->
-    <router-view :key="$route.fullPath"/>
+    <transition
+      name="fade"
+      mode="out-in"
+    >
+      <component
+        :is="LayoutComponent"
+        :key="LayoutComponent.name || LayoutComponent.__file"
+      >
+        <transition
+          name="fade"
+          mode="out-in"
+        >
+          <router-view :key="fullPath"/>
+        </transition>
+      </component>
+    </transition>
   </div>
 </template>
 
@@ -88,4 +111,17 @@ h6 {
 #nprogress .bar {
   background: $color-link-text;
 }
+
+// ===
+// Transitions
+// ===
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/src/router/views/404.vue b/src/router/views/404.vue
index 4ce46e9..1921d60 100644
--- a/src/router/views/404.vue
+++ b/src/router/views/404.vue
@@ -1,12 +1,9 @@
 <script>
-import Layout from '@layouts/main'
-
 export default {
   page: {
     title: '404',
     meta: [{ name: 'description', content: '404' }],
   },
-  components: { Layout },
   props: {
     resource: {
       type: String,
@@ -17,15 +14,13 @@ export default {
 </script>
 
 <template>
-  <Layout>
-    <h1 :class="$style.title">
-      404
-      <span v-if="resource">
-        {{ resource }}
-      </span>
-      Not Found
-    </h1>
-  </Layout>
+  <h1 :class="$style.title">
+    404
+    <span v-if="resource">
+      {{ resource }}
+    </span>
+    Not Found
+  </h1>
 </template>
 
 <style lang="scss" module>
diff --git a/src/router/views/home.vue b/src/router/views/home.vue
index 540e538..dc71078 100644
--- a/src/router/views/home.vue
+++ b/src/router/views/home.vue
@@ -1,22 +1,20 @@
 <script>
 import appConfig from '@src/app.config'
-import Layout from '@layouts/main'
 
 export default {
   page: {
     title: 'Home',
     meta: [{ name: 'description', content: appConfig.description }],
   },
-  components: { Layout },
 }
 </script>
 
 <template>
-  <Layout>
+  <div>
     <h1>Home Page</h1>
     <img
       src="@assets/images/logo.png"
       alt="Logo"
     >
-  </Layout>
+  </div>
 </template>
diff --git a/src/router/views/loading.vue b/src/router/views/loading.vue
index df01943..eaf6e8f 100644
--- a/src/router/views/loading.vue
+++ b/src/router/views/loading.vue
@@ -1,25 +1,20 @@
 <script>
-import Layout from '@layouts/main'
-
 export default {
   page: {
     title: 'Loading page...',
     meta: [{ name: 'description', content: 'Loading page...' }],
   },
-  components: { Layout },
 }
 </script>
 
 <template>
-  <Layout>
-    <transition appear>
-      <BaseIcon
-        :class="$style.loadingIcon"
-        name="sync"
-        spin
-      />
-    </transition>
-  </Layout>
+  <transition appear>
+    <BaseIcon
+      :class="$style.loadingIcon"
+      name="sync"
+      spin
+    />
+  </transition>
 </template>
 
 <style lang="scss" module>
diff --git a/src/router/views/login.vue b/src/router/views/login.vue
index 7352feb..0f17226 100644
--- a/src/router/views/login.vue
+++ b/src/router/views/login.vue
@@ -1,5 +1,4 @@
 <script>
-import Layout from '@layouts/main'
 import { authMethods } from '@state/helpers'
 import appConfig from '@src/app.config'
 
@@ -8,7 +7,6 @@ export default {
     title: 'Log in',
     meta: [{ name: 'description', content: `Log in to ${appConfig.title}` }],
   },
-  components: { Layout },
   data() {
     return {
       username: '',
@@ -43,36 +41,34 @@ export default {
 </script>
 
 <template>
-  <Layout>
-    <form
-      :class="$style.form"
-      @submit.prevent="tryToLogIn"
+  <form
+    :class="$style.form"
+    @submit.prevent="tryToLogIn"
+  >
+    <BaseInput
+      v-model="username"
+      name="username"
+    />
+    <BaseInput
+      v-model="password"
+      name="password"
+      type="password"
+    />
+    <BaseButton
+      :disabled="tryingToLogIn"
+      type="submit"
     >
-      <BaseInput
-        v-model="username"
-        name="username"
+      <BaseIcon
+        v-if="tryingToLogIn"
+        name="sync"
+        spin
       />
-      <BaseInput
-        v-model="password"
-        name="password"
-        type="password"
-      />
-      <BaseButton
-        :disabled="tryingToLogIn"
-        type="submit"
-      >
-        <BaseIcon
-          v-if="tryingToLogIn"
-          name="sync"
-          spin
-        />
-        <span v-else>Log in</span>
-      </BaseButton>
-      <p v-if="authError">
-        There was an error logging in to your account.
-      </p>
-    </form>
-  </Layout>
+      <span v-else>Log in</span>
+    </BaseButton>
+    <p v-if="authError">
+      There was an error logging in to your account.
+    </p>
+  </form>
 </template>
 
 <style lang="scss" module>
diff --git a/src/router/views/profile.vue b/src/router/views/profile.vue
index 3a500f3..ea57ae4 100644
--- a/src/router/views/profile.vue
+++ b/src/router/views/profile.vue
@@ -1,6 +1,4 @@
 <script>
-import Layout from '@layouts/main'
-
 export default {
   page() {
     return {
@@ -13,7 +11,6 @@ export default {
       ],
     }
   },
-  components: { Layout },
   props: {
     user: {
       type: Object,
@@ -24,12 +21,12 @@ export default {
 </script>
 
 <template>
-  <Layout>
+  <div>
     <h1>
       <BaseIcon name="user"/>
       {{ user.name }}
       Profile
     </h1>
     <pre>{{ user }}</pre>
-  </Layout>
+  </div>
 </template>
diff --git a/src/router/views/timeout.vue b/src/router/views/timeout.vue
index 97a96d8..af443af 100644
--- a/src/router/views/timeout.vue
+++ b/src/router/views/timeout.vue
@@ -1,6 +1,4 @@
 <script>
-import Layout from '@layouts/main'
-
 export default {
   page: {
     title: 'Page timeout',
@@ -8,16 +6,13 @@ export default {
       { name: 'description', content: 'The page timed out while loading.' },
     ],
   },
-  components: { Layout },
 }
 </script>
 
 <template>
-  <Layout>
-    <h1 :class="$style.title">
-      The page timed out while loading
-    </h1>
-  </Layout>
+  <h1 :class="$style.title">
+    The page timed out while loading
+  </h1>
 </template>
 
 <style lang="scss" module>