Convert Vue Component to HTML in advance

Question

I need to create a vuejs component and pass it into a library (mapbox) as pure html. Mapbox has a setHtml method for popups that I'm trying to populate.

https://docs.mapbox.com/mapbox-gl-js/example/popup/

var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat([-96, 37.8])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);

I haven't been able to find any way to pre-render a specific component into html that I could then insert into the mapbox call. Sort of like v-html in reverse.

Answer 1

set ref attribute for your component, and then you can get rendered HTML content of component by using this.$refs.ComponentRef.$el.outerHTML , and remember don't do this when created.

<template>
  <div class="app">
    <Hello ref="hello" />
  </div>
</template>

<script>
import Hello from './Hello.vue'
export default {
  name: 'App',
  components: {
    Hello,
  },
  created() {
    // wrong, $el is not exists then
    // console.log(this.$refs.hello.$el.outerHTML)
  },
  mounted() {
    console.log(this.$refs.hello.$el.outerHTML)
  },
}
</script>