diff --git a/lib/app/ThemeWrapper.vue b/lib/app/ThemeWrapper.vue
new file mode 100644
index 0000000000..102b518b67
--- /dev/null
+++ b/lib/app/ThemeWrapper.vue
@@ -0,0 +1,62 @@
+<template>
+  <ThemeLayout v-if="$page.path"/>
+
+  <ThemeNotFound v-else/>
+</template>
+
+<script>
+import ThemeLayout from '@themeLayout'
+import ThemeNotFound from '@themeNotFound'
+export default {
+  components: {
+    ThemeLayout,
+    ThemeNotFound
+  },
+  created () {
+    if (this.$ssrContext) {
+      this.$ssrContext.title = this.$title
+      this.$ssrContext.lang = this.$lang
+      this.$ssrContext.description = this.$page.description || this.$description
+    }
+  },
+  mounted () {
+    this.currentMetaTags = []
+    const updateMeta = () => {
+      document.title = this.$title
+      document.documentElement.lang = this.$lang
+      const meta = [
+        {
+          name: 'description',
+          content: this.$description
+        },
+        ...(this.$page.frontmatter.meta || [])
+      ]
+      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
+    }
+    this.$watch('$page', updateMeta)
+    updateMeta()
+  },
+  beforeDestroy () {
+    updateMetaTags(null, this.currentMetaTags)
+  }
+}
+
+function updateMetaTags (meta, current) {
+  if (current) {
+    current.forEach(c => {
+      document.head.removeChild(c)
+    })
+  }
+  if (meta) {
+    return meta.map(m => {
+      const tag = document.createElement('meta')
+      Object.keys(m).forEach(key => {
+        tag.setAttribute(key, m[key])
+      })
+      document.head.appendChild(tag)
+      return tag
+    })
+  }
+}
+</script>
+
diff --git a/lib/app/util.js b/lib/app/util.js
index 29643be49f..e1229ad1d8 100644
--- a/lib/app/util.js
+++ b/lib/app/util.js
@@ -13,4 +13,8 @@ export function findPageForPath (pages, path) {
       return page
     }
   }
+  return {
+    path: '',
+    frontmatter: {}
+  }
 }
diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue
index df988d69d7..9e54d0f248 100644
--- a/lib/default-theme/Layout.vue
+++ b/lib/default-theme/Layout.vue
@@ -87,32 +87,7 @@ export default {
     }
   },
 
-  created () {
-    if (this.$ssrContext) {
-      this.$ssrContext.title = this.$title
-      this.$ssrContext.lang = this.$lang
-      this.$ssrContext.description = this.$page.description || this.$description
-    }
-  },
-
   mounted () {
-    // update title / meta tags
-    this.currentMetaTags = []
-    const updateMeta = () => {
-      document.title = this.$title
-      document.documentElement.lang = this.$lang
-      const meta = [
-        {
-          name: 'description',
-          content: this.$description
-        },
-        ...(this.$page.frontmatter.meta || [])
-      ]
-      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
-    }
-    this.$watch('$page', updateMeta)
-    updateMeta()
-
     window.addEventListener('scroll', this.onScroll)
 
     // configure progress bar
@@ -132,8 +107,6 @@ export default {
   },
 
   beforeDestroy () {
-    updateMetaTags(null, this.currentMetaTags)
-
     window.removeEventListener('scroll', this.onScroll)
   },
 
@@ -191,24 +164,6 @@ export default {
     }
   }
 }
-
-function updateMetaTags (meta, current) {
-  if (current) {
-    current.forEach(c => {
-      document.head.removeChild(c)
-    })
-  }
-  if (meta) {
-    return meta.map(m => {
-      const tag = document.createElement('meta')
-      Object.keys(m).forEach(key => {
-        tag.setAttribute(key, m[key])
-      })
-      document.head.appendChild(tag)
-      return tag
-    })
-  }
-}
 </script>
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>
diff --git a/lib/prepare.js b/lib/prepare.js
index 49186a82d0..45c50ed654 100644
--- a/lib/prepare.js
+++ b/lib/prepare.js
@@ -311,7 +311,7 @@ async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
     let code = `
   {
     path: ${JSON.stringify(pagePath)},
-    component: ThemeLayout,
+    component: ThemeWrapper,
     beforeEnter: (to, from, next) => {
       import(${JSON.stringify(filePath)}).then(comp => {
         Vue.component(${JSON.stringify(fileToComponentName(file))}, comp.default)
@@ -334,12 +334,11 @@ async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
   const notFoundRoute = `,
   {
     path: '*',
-    component: ThemeNotFound
+    component: ThemeWrapper
   }`
 
   return (
-    `import ThemeLayout from '@themeLayout'\n` +
-    `import ThemeNotFound from '@themeNotFound'\n` +
+    `import ThemeWrapper from '@app/ThemeWrapper'\n` +
     `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
   )
 }