diff --git a/nuxtjs.org/components/Alert.vue b/nuxtjs.org/components/Alert.vue
index 943cf0612..f23be4de3 100644
--- a/nuxtjs.org/components/Alert.vue
+++ b/nuxtjs.org/components/Alert.vue
@@ -13,9 +13,8 @@
 
 <script>
 import { defineComponent, computed } from '@nuxtjs/composition-api'
-import { Markdown } from '~docus/utils'
+
 export default defineComponent({
-  components: { Markdown },
   props: {
     /**
      * @values info, success, warning, danger, next, star
diff --git a/nuxtjs.org/components/Highlight.vue b/nuxtjs.org/components/Highlight.vue
new file mode 100644
index 000000000..7432d7bb3
--- /dev/null
+++ b/nuxtjs.org/components/Highlight.vue
@@ -0,0 +1,3 @@
+<template>
+  <span class="text-primary"><Markdown unwrap="p" /></span>
+</template>
diff --git a/nuxtjs.org/components/HomeDiscover.vue b/nuxtjs.org/components/HomeDiscover.vue
index bc9039f96..1c58b5773 100644
--- a/nuxtjs.org/components/HomeDiscover.vue
+++ b/nuxtjs.org/components/HomeDiscover.vue
@@ -70,10 +70,7 @@
 </template>
 
 <script>
-import { Markdown } from '~docus/utils'
-
 export default {
-  components: { Markdown },
   props: {
     category: {
       type: String,
diff --git a/nuxtjs.org/components/HomeFeatures.vue b/nuxtjs.org/components/HomeFeatures.vue
index def9071ad..750c298d8 100644
--- a/nuxtjs.org/components/HomeFeatures.vue
+++ b/nuxtjs.org/components/HomeFeatures.vue
@@ -29,10 +29,8 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { Markdown } from '~docus/utils'
 
 export default defineComponent({
-  components: { Markdown },
   props: {
     category: {
       type: String,
diff --git a/nuxtjs.org/components/HomeHero.vue b/nuxtjs.org/components/HomeHero.vue
index adaed463e..cfd3b2459 100644
--- a/nuxtjs.org/components/HomeHero.vue
+++ b/nuxtjs.org/components/HomeHero.vue
@@ -56,10 +56,8 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { Markdown } from '~docus/utils'
 
 export default defineComponent({
-  components: { Markdown },
   props: {
     primary: {
       type: Object,
diff --git a/nuxtjs.org/content/index.md b/nuxtjs.org/content/index.md
index 43163ddba..6dbc22150 100644
--- a/nuxtjs.org/content/index.md
+++ b/nuxtjs.org/content/index.md
@@ -26,7 +26,7 @@ primary:
   url: /docs/get-started/installation
   icon: IconPlay
 ---title
-Easier <span class="text-primary-green italic">Life</span>, from<span class="text-primary-green italic"> Code</span> to<span class="text-primary-green italic"> Cloud</span>
+Easier :highlight[_Life_], from :highlight[_Code_] to :highlight[_Cloud_]
 ---description
 Nuxt is an open source web framework based on official Vue.js libraries, Node.js and using powerful tools such as Webpack, Babel and PostCSS. Nuxt makes web development intuitive and performant with a great developer experience in mind. Deploy with one command your application to many platforms, from Node.js hosting to static websites.
 ::
@@ -34,7 +34,7 @@ Nuxt is an open source web framework based on official Vue.js libraries, Node.js
 ::home-features
 category: Features
 ---title
-Intuitive <span class="text-primary-green">D</span>eveloper E<span class="text-primary-green">x</span>perience
+Intuitive :highlight[D]eveloper E:highlight[x]perience
 ---description
 Nuxt is shipped with plenty of features to boost developer productivity and the end user experience.
 ---
diff --git a/src/core/module.ts b/src/core/module.ts
index 32a062f13..8a214eb5b 100644
--- a/src/core/module.ts
+++ b/src/core/module.ts
@@ -130,14 +130,6 @@ export default <Module>async function docusModule() {
     })
   }
 
-  nuxt.hook('components:dirs', (dirs: any) => {
-    dirs.push({
-      path: resolve(__dirname, 'runtime/components'),
-      global: true,
-      level: 2
-    })
-  })
-
   nuxt.hook('build:before', () => {
     ;(async () => {
       await lazyIndex()
@@ -182,6 +174,10 @@ export default <Module>async function docusModule() {
       await fs.writeFile(join(dir, `db-${dbHash}.json`), db.serialize(), 'utf-8')
     })
   }
+  addPlugin({
+    src: resolve(__dirname, 'runtime', 'components', 'index.ts'),
+    filename: 'docus_components.js'
+  })
   addPlugin({
     src: resolve(__dirname, 'plugin.js'),
     filename: 'docus.js',
diff --git a/src/core/runtime/components/DocusContent.vue b/src/core/runtime/components/DocusContent.ts
similarity index 99%
rename from src/core/runtime/components/DocusContent.vue
rename to src/core/runtime/components/DocusContent.ts
index ede23f4ea..3256c084b 100644
--- a/src/core/runtime/components/DocusContent.vue
+++ b/src/core/runtime/components/DocusContent.ts
@@ -1,4 +1,3 @@
-<script>
 import { pascalCase } from 'scule'
 import Vue from 'vue'
 import info from 'property-information'
@@ -198,4 +197,3 @@ export default {
     return h(tag, data, children)
   }
 }
-</script>
diff --git a/src/core/runtime/components/Markdown.ts b/src/core/runtime/components/Markdown.ts
new file mode 100644
index 000000000..5c2b14fd1
--- /dev/null
+++ b/src/core/runtime/components/Markdown.ts
@@ -0,0 +1,21 @@
+import { flatUnwrap } from '~docus/utils'
+
+export default {
+  name: 'Markdown',
+  functional: true,
+  render: (_h, ctx) => {
+    const slot = ctx.props.slot || 'default'
+    let node = ctx.props.node || ctx.parent.$scopedSlots[slot] || ctx.parent.$slots[slot]
+    if (typeof node === 'function') {
+      node = node()
+    }
+    if (typeof node === 'string') {
+      return [node]
+    }
+    if (node && ctx.props.unwrap) {
+      const tags = ctx.props.unwrap.split(/[,\s]/)
+      node = flatUnwrap(node, tags)
+    }
+    return node
+  }
+}
diff --git a/src/core/runtime/components/index.ts b/src/core/runtime/components/index.ts
new file mode 100644
index 000000000..048a1132d
--- /dev/null
+++ b/src/core/runtime/components/index.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+import Markdown from '~docus/components/Markdown'
+import DocusContent from '~docus/components/DocusContent'
+
+Vue.component('Markdown', Markdown)
+Vue.component('DocusContent', DocusContent)
diff --git a/src/core/runtime/utils.ts b/src/core/runtime/utils.ts
index d8b5636a8..c9c5a25f2 100644
--- a/src/core/runtime/utils.ts
+++ b/src/core/runtime/utils.ts
@@ -18,26 +18,6 @@ export const expandTags = (_tags: string[]) => _tags.flatMap(t => TAGS_MAP[t])
  */
 export const TEXT_TAGS = expandTags(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'])
 
-// @vue/component
-export const Markdown = {
-  functional: true,
-  render: (_h, ctx) => {
-    const slot = ctx.props.slot || 'default'
-    let node = ctx.props.node || ctx.parent.$scopedSlots[slot] || ctx.parent.$slots[slot]
-    if (typeof node === 'function') {
-      node = node()
-    }
-    if (typeof node === 'string') {
-      return [node]
-    }
-    if (node && ctx.props.unwrap) {
-      const tags = ctx.props.unwrap.split(/[,\s]/)
-      node = flatUnwrap(node, tags)
-    }
-    return node
-  }
-}
-
 /**
  * Check virtual node's tag
  * @param vnode Virtuel node from Vue virtual DOM
diff --git a/src/defaultTheme/components/atoms/Alert.vue b/src/defaultTheme/components/atoms/Alert.vue
index c96842e31..10bcfc7b8 100644
--- a/src/defaultTheme/components/atoms/Alert.vue
+++ b/src/defaultTheme/components/atoms/Alert.vue
@@ -10,10 +10,8 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { Markdown } from '~docus/utils'
 
 export default defineComponent({
-  components: { Markdown },
   props: {
     /**
      * @values info, success, warning, danger
diff --git a/src/defaultTheme/components/atoms/ButtonLink.vue b/src/defaultTheme/components/atoms/ButtonLink.vue
index c5285ddd9..478fec535 100644
--- a/src/defaultTheme/components/atoms/ButtonLink.vue
+++ b/src/defaultTheme/components/atoms/ButtonLink.vue
@@ -11,10 +11,8 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
-import { Markdown } from '~docus/utils'
 
 export default defineComponent({
-  components: { Markdown },
   props: {
     href: {
       type: String,
diff --git a/src/defaultTheme/components/organisms/BlockHero.vue b/src/defaultTheme/components/organisms/BlockHero.vue
index 21cb4ee5b..a57cde7df 100644
--- a/src/defaultTheme/components/organisms/BlockHero.vue
+++ b/src/defaultTheme/components/organisms/BlockHero.vue
@@ -73,10 +73,8 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { Markdown } from '~docus/utils'
 
 export default defineComponent({
-  components: { Markdown },
   props: {
     cta: {
       type: Array,