Transform DOM Elements into Vue.js Components

Question

I am using a d3.js plugin to create a complex visualization in my Vue.js application. I would like to apply a custom vue directive to the elements that were added by the d3 plugin.
It looks like the $compile functionality that was deprecated in vue2 is what I am looking for.

How can I dynamically change the elements in the dom to vue components?

Answer 1

It seems that the property you are looking for is $mounted . Provide a funtion to the key mounted , then you can instantiate the d3 visualization.

This is a good set of example

The basics of $mounted from the above link:

<template>
  <svg width="500" height="300"></svg>
</template>

<script>
const d3 = require('d3');
export default {
  mounted: function() {
    // this.#el - is the root element in <template>
    // in this case it is <svg> tag
    d3.select(this.$el)
      .append('circle')
      .attr('cx', '250')
      .attr('cy', '150')
      .attr('r', '100')
  }
}
</script>