Rendering Vue components synchronously as a singular string

Question

Rendering Vue components synchronously as a singular string

There exists a Vue SFC called Bubble, which contains a simple layout structure.

Bubble.vue

<script setup lang="ts">

</script>

<template>
  <div hinted-name="wrapper-bubble" class="hinted-bubble-wrapper">
    <div class="hinted-bubble-frame" hinted-name="frame"></div>
  </div>
</template>

<style scoped lang="stylus">

</style>

Furthermore, there is a class that utilizes this layout as its foundation for functionality.

export class BubbleStepView extends StepComponentView {
  constructor() {
    super(Bubble.toString);
  }
}

This class specifically requires an HTML string as a parameter.

Is there a way to synchronously convert a Vue component into a string?

The application operates within a browser environment.

Although I tried the approach outlined in , it did not work for me due to its Promise return value.

javascript vue.js

Answer 1

Answer №1

You are advised to display the component:

<script setup>
import { onMounted, ref, reactive, watch } from 'vue';
import Bubble from './Bubble.vue';
const html = ref();
const $cont = ref();
const content = ref('type me');
onMounted(()=>{
  html.value = $cont.value.innerHTML;
  new MutationObserver(()=>{
    html.value = $cont.value.innerHTML;
  }).observe($cont.value, {childList:true, subtree:true, attributes:true, characterData:true});
});

</script>

<template>
  <input v-model="content">
  <div ref="$cont" key="1" style="visibility:hidden;position:absolute;width:0;height:0">
    <bubble>{{ content }}</bubble>
  </div>
  <div>{{ html }}</div>
</template>

Answer 2

You are advised to display the component:

<script setup>
import { onMounted, ref, reactive, watch } from 'vue';
import Bubble from './Bubble.vue';
const html = ref();
const $cont = ref();
const content = ref('type me');
onMounted(()=>{
  html.value = $cont.value.innerHTML;
  new MutationObserver(()=>{
    html.value = $cont.value.innerHTML;
  }).observe($cont.value, {childList:true, subtree:true, attributes:true, characterData:true});
});

</script>

<template>
  <input v-model="content">
  <div ref="$cont" key="1" style="visibility:hidden;position:absolute;width:0;height:0">
    <bubble>{{ content }}</bubble>
  </div>
  <div>{{ html }}</div>
</template>

Rendering Vue components synchronously as a singular string

Answer №1

Similar questions

The problem with THREE JS OcclusionComposer: encountering "Cannot read properties of undefined (reading 'x')" error

Refresh a DIV using two SQL queries in forms

Troubleshooting Incorrect Background Image Paths in Vue Component CSS

What is the best way to include specific script tags within the <head> and <body> sections when utilizing HtmlWebpackPlugin?

Info window in Vue Google Maps

Effortless Numerical Calculation for Trio Input Fields

Encountering the error 'node' getProperty of undefined while trying to retrieve data from an array stored in my state variable

Should JavaScript be referenced at the start or generated dynamically?

Transforming Sphere into Flat Surface

Revise the model and execute the function

filling out a form with data retrieved through an ajax request

Alter a prototype method belonging to another module

Unable to view the token balances of the smart contract on remix while executing the seeBalance function

The loading of the module from was hindered due to an invalid MIME type restriction

The pop-up fails to appear

Troubleshooting issue with DOM not refreshing after making a $http POST request in a MEAN

How can you retrieve the `categoryIds` key within an object that holds an array of mongodb's `ObjectId(s)` as its value?

Vue's span function is yielding the promise object

The Zoom-sdk functions properly on a local machine, but encounters issues when it is

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page