Vue + any js library (like D3.js, Chart.js etc)

mstrVLT — Sun, 21 Dec 2025 11:26:23 +0000

While the documentation suggests using ref, useTemplateRef, and onMounted, this approach becomes cumbersome when dealing with multiple libraries. Instead of creating multiple wrapper components or using composables, we can use a custom directive.

const scopeMap = new WeakMap()
// enables v-el in templates
const vEl = {
  mounted: (el, binding) => {
    const scope = effectScope();
    scopeMap.set(el, scope)
    scope.run(() => binding.value && (typeof binding.value === 'function') && binding.value(el));
  },
  unmounted: (el) => {
    const scope = scopeMap.get(el)
    scope && scope.stop();
  }
}

This approach simplifies the process significantly. You only need to add the v-el attribute:

v-el="barChart"

And write the function:

const barChart = (el) => {
  console.log('mount')
  const chart = new Chart(
    el,
    {
      type: 'bar',
      data: {
        labels: data.value.map(row => row.year),
        datasets: [
          {
            label: '',
            data: data.value.map(row => row.count)
          }
        ]
      }
    }
  );

  watch(data, (newData) => {
    console.log('update')
    chart.data.labels = newData.map(row => row.year)
    chart.data.datasets[0].data = newData.map(row => row.count)
    chart.update('none')
  }, {deep: true})
}

Check out the ChartJS example here play.vuejs.org

If you want to use AirDatepicker:

const datepicker = (el) => {
  const dp = new AirDatepicker(el, {
    timepicker: true,
    selectedDates: [currentDate.value],
    onSelect: ({date, formattedDate, datepicker}) => {
      currentDate.value = Array.isArray(date) ? date[0] : date
    }
  })
  watch(currentDate, newCurrentDate => {
    dp.selectDate(newCurrentDate)
  })
}

Check out the AirDatepicker example here play.vuejs.org

Forem: mstrVLT

Vue + any js library (like D3.js, Chart.js etc)