- use nuxt content to display page

- use components within the md

content/hello.md

@@ -1,18 +0,0 @@
----
-title: Getting started
-description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
----
-
-Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
-
-## Writing content
-
-Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
-
-## Fetching content
-
-Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
-
-## Displaying content
-
-Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.

content/home.md

@@ -0,0 +1,13 @@
+---
+title: 'Mojotrollz'
+description: 'WoW TBC Server'
+---
+
+<logo></logo>
+
+# Mojotrollz
+
+Welcome to Mojotrollz
+
+## Register
+

nuxt.config.js

@@ -43,7 +43,9 @@ export default {
   axios: {},
 
   // Content module configuration (https://go.nuxtjs.dev/config-content)
-  content: {},
+  content: {
+    liveEdit: false,
+  },
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {},

pages/index.vue

@@ -1,6 +1,6 @@
-<template>
+<!--
-  <div class="container">
     <div>
+      <nuxt-content :document="page" />
       <Logo />
       <h1 class="title">Mojotrollz</h1>
       <div class="links">
@@ -22,30 +22,24 @@
         </a>
       </div>
     </div>
-  </div>
+  
-</template>
-
 <script lang="ts">
 import Vue from 'vue'
 
-export default Vue.extend({})
+export default Vue.extend({
+  async asyncData ({ $content }) {
+    const page = await $content('mojotrollz').fetch()
+
+    return {
+      page
+    }
+  }
+})
+
 </script>
 
-<style>
-/* Sample `apply` at-rules with Tailwind CSS
-.container {
-@apply min-h-screen flex justify-center items-center text-center mx-auto;
-}
-*/
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
 
+<style>
 .title {
   font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -68,3 +62,36 @@ export default Vue.extend({})
   padding-top: 15px;
 }
 </style>
+-->
+<template>
+  <div class="container">
+    <article>
+      <nuxt-content :document="page" />
+    </article>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  async asyncData({ $content }) {
+    const page = await $content('home').fetch()
+    return { page }
+  },
+}
+</script>
+
+<style>
+/* Sample `apply` at-rules with Tailwind CSS
+.container {
+@apply min-h-screen flex justify-center items-center text-center mx-auto;
+}
+*/
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>