#Help loading a Docus Page.

1 messages · Page 1 of 1 (latest)

rotund wigeon
#

I'm using Nuxt3 and Docus.
Docus is generating my page content and routes from markdown and it's working well.

I would like to load the content of one of the pages into a vue component somewhere else in my nuxt application.

Has anyone done anything like this before?

I'm not new to vue, but I'm new to nuxt3 and am looking for general guidance.

Do I need to make a call to the server for that route and pass the contents into a markdown render, or as it seems to be already rendered can I just grab the page context as html from somewhere?

tawny nimbus
rotund wigeon
#

THanks I'll give it a try, my first attempt below seems to return the whole viewport includnig the Index on the left and the TOC on the right.

<template>
    <div v-html="htmlContent"></div>
</template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  import axios from 'axios';
  
  const htmlContent = ref('');
  
  onMounted(async () => {
 
    try {
      const response = await axios.get('/galactic-guide-to-the-universe/character-creation/origns/origin-list/androids#androids');
      htmlContent.value = response.data;
    } catch (error) {
      console.error('Error fetching markdown content:', error);
    }
  });
  </script>

<style scoped lang="scss">

    .rank-property-view {
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 10px;
    }
    .rank-expansion-view {
        border: 2px solid green;
        background-color: transparent;
        text-shadow: #0dfa05;
        padding: 10px;
        margin-bottom: 10px;
    }
</style>
rotund wigeon
#

Ok so I have it featching a data structure of some type 🙂 Looks like it requires some kinda of parser to render it into html, just need to figure out what that parser is.

image.png