Guide to retrieving the compiled HTML content of a Vue.js component

Question

Guide to retrieving the compiled HTML content of a Vue.js component

I have a component structured like this

<AgentCard :agent="agent" />

, with the object agent containing properties such as

FirstName, LastName, Recent Orders

, and more.

My current challenge involves displaying this component inside a Google Maps InfoBox. The infoWindow.setContent() method (which is part of the Google Maps API used to showcase popup info windows) only accepts an HTML string. Therefore, I am attempting to manually render the <AgentCard>, extract the HTML content of the rendered component, and then pass it on to the setContent() method.

I made an attempt using

Vue.compile('<AgentCard :agent="agent" />').render()

, but unfortunately, this approach did not work. How can I go about manually rendering a Vue component and obtaining its HTML content?

javascript vue.js

Answer 1

Answer №1

One way to solve this issue is by initializing a fresh Vue instance containing solely the targeted component, then utilizing $mount to mount it. Subsequently, you can obtain the outerHTML of its root element ($el):

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691f1c0c295b475f47585b">[email protected]</a>/dist/vue.min.js"></script>

<script>
Vue.component('AgentCard', {
  template: `<div>{{agent.name}}</div>`,
  props: {
    agent: Object
  }
})

const app = new Vue({
  template: `<AgentCard :agent="agent" />`,
  data: () => ({ agent: { name: 'john doe' } })
}).$mount()

console.log(app.$el.outerHTML)
</script>

Answer 2

One way to solve this issue is by initializing a fresh Vue instance containing solely the targeted component, then utilizing $mount to mount it. Subsequently, you can obtain the outerHTML of its root element ($el):

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691f1c0c295b475f47585b">[email protected]</a>/dist/vue.min.js"></script>

<script>
Vue.component('AgentCard', {
  template: `<div>{{agent.name}}</div>`,
  props: {
    agent: Object
  }
})

const app = new Vue({
  template: `<AgentCard :agent="agent" />`,
  data: () => ({ agent: { name: 'john doe' } })
}).$mount()

console.log(app.$el.outerHTML)
</script>

Answer 3

Answer №2

When using Vue3:

import { createApp } from "vue";    
const newDiv = document.createElement("div"); 
createApp(MyComponent, { myProp: "here" }).mount(newDiv); 
console.log(newDiv.innerHTML);

Answer 4

When using Vue3:

import { createApp } from "vue";    
const newDiv = document.createElement("div"); 
createApp(MyComponent, { myProp: "here" }).mount(newDiv); 
console.log(newDiv.innerHTML);

Guide to retrieving the compiled HTML content of a Vue.js component

Answer №1

Answer №2

Similar questions

Ways to retrieve a specific value from a JSON dataset

Ways to access PromiseValue in XMLHttpRequest with JSON

What is the best way to pass a JSON object from R to Plumber in a format that JavaScript can interpret as an array instead of

Obtain the parameter value from the resolve function in ui-router

Node.js woes: troubleshooting object output issues

Developing entities in Express.js

Check to see if the upcoming birthday falls within the next week

Tips for adding a string variable to a JQuery HTML element attribute

The status value in the result has a whitespace just before the term "success"

VueJS - The application is unable to find the designated route

Exploring the world of jQuery waypoints and the art of modifying

Unable to adjust the size of a DIV with a button click in Vue3

I am consistently encountering the error message: "Error: Unable to locate module './framer'"

What steps should I take to create a JavaScript-based downloader application?

Tips for triggering a click event on a hyperlink using a JavaScript function within the Nightmare library

Error: Call stack size limit reached in Template Literal Type

React component fails to display content following execution of Jquery Ajax request

unable to see the follow button in the website's Vue component

Array values remain unchanged after forEach method execution

I am receiving all NFT IDs when I should only be getting the ones that are associated with the current account