Render vue component in data

Question

I trying to make custom tooltip for apexcharts like in example: https://apexcharts.com/docs/options/tooltip/#

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<div class="arrow_box">' +
      '<span>' + series[seriesIndex][dataPointIndex] + '</span>' +
      '</div>'
  }
}

and it's works, but when I set in return some vue component nothing shows.

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<MyComponent/>'
  }
}

<template>
   <div>Just simple component</div>
</template>

<script>
export default { name: "MyComponent" }
</script>

Why is this happening and how to fix it?

It's probably because of the fact that the tooltip isn't being rendered by vue. You need to give the custom tooltip a vue render function that will return a component. However, without a minimal code example of what you're trying to achieve it's difficult to help. — Paul Bollerman, Dec 22 '20 at 11:26
@PaulBollerman , ok, I added minimal example. Could you please show how to render it? — Restman, Dec 22 '20 at 11:35
Have you tried referencing the component with kebab-case? E.g. ? See https://vuejs.org/v2/guide/components-registration.html#Name-Casing — Paul Bollerman, Dec 22 '20 at 12:08
@PaulBollerman, thx for answer. I tried, but it doesn't help — Restman, Dec 22 '20 at 12:20

score 1 · Accepted Answer · edited Jul 15 '22 at 02:00

To make Vue render the component correctly, you'll have to tell it to in the custom tooltip function:

tooltip: {
  custom: ({series, seriesIndex, dataPointIndex, w}) => {
    // create component constructor
    var TooltipComponent = Vue.extend({
      template: '<my-component/>'
    });
    // create an instance of tooltip and mount it
    var tooltip = new TooltipComponent();
    tooltip.$mount();
    // Return the html
    return tooltip.$el.outerHTML;
  }
}

If you need data or other reactivity it becomes a bit more complicated, see https://v2.vuejs.org/v2/api/#Vue-extend for more information.

Render vue component in data

1 Answers1