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

Using HTTPS, you can access Flask from AJAX

MDX is revolutionizing Next app routing with the introduction of 'use client' functionality

Node.js, Express continues to execute an if statement even if the condition is false

Creating custom validation in Vuetify for password confirmation is essential in ensuring that

How can I display and utilize the selected value from a Rails select form before submitting it?

Is there a way to detect when the user closes a tab or browser in HTML?

Is it advisable to consolidate all of my JavaScript files into a single file?

How to access a controller function within a recursive directive template in Angular version 1.3?

Combining the inline JavaScript linting tool ESLint with the popular Airbnb configuration and Facebook

Combining a standard JSS class with Material-UI's class overrides using the classnames library

Sorting elements in an array based on an 'in' condition in TypeScript

What is the proper way to define the type for a functional React component by using object destructuring on props?

Having trouble deploying a Heroku app using Hyper? Here's a step-by-step guide to

Pause the counter based on the data attribute containing multiple values

Switchable radio options

Identifying the Click Event Within an ngx Bootstrap Modal

What is the best way to generate a new div element when the content exceeds the preset height of the current div?

What is the best way to determine if an application has been installed on an Android device while browsing a website?

Next.js Content Switching: A Step-by-Step Guide

The Vue router2 is failing to capture routes that are deeply nested within the