[Vue] vue-chartjs使ってて詰まったところ

emmetでvueのテンプレート構成作ってscriptにvue-chartjsを埋め込んでコンパイルしたら、エラー吐かれてどん詰まりしたので供養。
Vueの仕様を理解していなかったがための事故。

例えば以下のコードはだめ。

<template>
  <div>

  </div>
</template>

<script lang="ts">
import Vue from "vue";
// Chart.js
import { Pie, mixins } from "vue-chartjs";

export default Vue.extend({
  name: 'PieChart',
  extends: Pie,
  props: {[
    'data', 'option'
  ]},
  mounted() {
    // Chart
    this.renderChart(data, option)
  },
});
</script>

<style scoped>
</style>

renderChart()が定義されてないとVuterがエラーを示していたのでパッケージの互換性エラー?型定義解決ミス?と色々探ったたが解決できず・・・。

諦めて一日寝かせて公式読んだら赤字ででかでかと解決法書いてあった。

https://vue-chartjs.org/ja/guide/#%E5%88%9D%E3%82%81%E3%81%AB

Vueファイル内にtemplateタグの定義があると、extendしたモジュールじゃなくこっちで定義したtemplateが優先して読み込まれるために、拡張したテンプレートが使えずエラーになってたらしい。

Vuterが騒いでたエラーはVuterの勘違いでしたとさ。公式読まないバカは勿論だが、こいつも地味に戦犯。

今回の教訓

  • 困ったらまず公式をちゃんと読もう
  • にっちもさっちもいかなくなったら一晩寝かせるのも大事