How to use imported component inside a method - Vue3

Question

here I am trying to render the HighlightJs component inside splitContent method. But it is not working instead it displays the Component name as a html tag. Also I tried registering it has a global component, still it doesn't work.

<script setup lang="ts">
import HighlightJs from "./components/HighlightJs.vue";

const splitContent: (content: string) => string = (content) => {
  const paragraphs = content.split("\n\n");
  const codeBlocks = content.split("```");

  if (codeBlocks.length > 1) {
    return codeBlocks
      .map((codeBlock, i) => {
        if (i % 2 === 0) {
          return `<p>${codeBlock}</p>`;
        } else {
          return `<HighlightJs code="${codeBlock}"></HighlightJs>`; // component is not rendered
        }
      })
      .join("");
  } else {
    return paragraphs.map((paragraph) => `<p>${paragraph}</p>`).join("");
  }
};
</script>

<template>
  <div
      class="bg-gray-500 text-white p-4 rounded-lg prose"
      v-html="splitContent(content.answer)"
  ></div>
</template>

You can't. Don't use v-html when you're able to do this in other way, i.e. with a combination of v-if and v-for — Estus Flask, Mar 30 '23 at 08:17
Or use Vue [Render Functions](https://vuejs.org/api/render-function.html). Check the answer for solution: https://stackoverflow.com/a/75405334/2487565 — Tolbxela, Mar 30 '23 at 08:28
You're using `content.answer` in ``. What is `content` supposed to be? Where is it declared? — tao, Mar 30 '23 at 11:48
Yes I removed them, I don't want to copy paste everthing and mess it up with the point I want to ask. — Manikandan, Apr 01 '23 at 07:15

score 0 · Answer 1 · answered Mar 30 '23 at 13:27

Okay I have resolved by making some changes to the splitContent method (i.e instead of joining and returning html string. I returned array with string, object combination) and also remove the usage of v-html as suggested by Estus Flask in comment.

<script setup lang="ts">

import HighlightJs from "./components/HighlightJs.vue";

const splitContent: (content: string) => any = (content) => {
  const paragraphs = content.split("\n\n");
  const codeBlocks = content.split("```");

  if (codeBlocks.length > 1) {
    return codeBlocks.map((codeBlock, i) => {
      if (i % 2 === 0) {
        return `${codeBlock}`;
      } else {
        return {
          codeBlock,
        };
      }
    });
  } else {
    return paragraphs.map((paragraph) => `${paragraph}`);
  }
};

and in template section

<template>
  <div class="bg-gray-500 text-white p-4 rounded-lg prose">
     <template
         v-for="(block, index) in splitContent(content.answer)"
         :key="index"
     >
        <component
            v-if="block instanceof Object"
            :is="HighlightJs"
            :code="block.codeBlock"
        />
        <p v-else>{{ block }}</p>
     </template>
  </div>
</template>

How to use imported component inside a method - Vue3

1 Answers1