chore(docs): updated info about importing *.md files

Author: hawkeye64

docs/src/components/page-parts/LandingPageContent.vue

@@ -17,7 +17,7 @@
         </div>
       </div>
     </div>
-    <div class="full-width row justify-center q-pb-xl">
+    <div class="full-width row justify-center q-pb-xl q-gutter-sm">
       <q-btn
         to="/all-about-qmarkdown/what-is-qmarkdown"
         no-caps
@@ -31,6 +31,19 @@
           <q-icon :name="biArrowRightCircle" />
         </div>
       </q-btn>
+      <q-btn
+        to="/developing/using-qmarkdown"
+        no-caps
+        class="bg-green-8"
+      >
+        <div
+          class="row justify-around items-center"
+          style="width: 140px;"
+        >
+          <div>Examples</div>
+          <q-icon :name="biArrowRightSquare" />
+        </div>
+      </q-btn>
     </div>
   </section>
 </template>
@@ -39,7 +52,8 @@
 import { defineComponent, computed } from 'vue'
 import { useQuasar } from 'quasar'
 import {
-  biArrowRightCircle
+  biArrowRightCircle,
+  biArrowRightSquare
 } from '@quasar/extras/bootstrap-icons'
 
 export default defineComponent({
@@ -54,7 +68,8 @@ export default defineComponent({
 
     return {
       layout,
-      biArrowRightCircle
+      biArrowRightCircle,
+      biArrowRightSquare
     }
   }
 })

docs/src/pages/developing/using-qmarkdown.md

@@ -10,6 +10,30 @@ components:
 
 ## Markdown
 
+## Importing Markdown
+
+The app extension needs to be installed in order to import markdown (*.md) files. This works for both @quasar/app-webpack and @quasar/app-vite. To import markdown files, **DO NOT** place them into your `public` folder. Put them into your `assets` folder.
+
+```js
+<template>
+  <q-markdown :src="ContactUs" show-copy />
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import ContactUs from 'assets/contact-us.md'
+
+export default defineComponent({
+  setup () {
+    return {
+      ContactUs
+    }
+  }
+})
+</script>
+
+```
+
 ## Extending Prism
 
 The `prismjs` package is used for language highlighting. When Prism is installed by QMarkdown, it loads itself globally. You can acces it via `window.Prism`. Visit their [documentation](https://prismjs.com/) on modifying the run-time, like adding additional language support.