WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?\.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?\.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?\.vue$/.test(url)
                ? ".vue"
                : /.*?\.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "bar-chart": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/bar_chart.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<bar-chart />`,
    });
    app.mount("#app");
</script>

<script setup>
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true
        }
    },
};
let chart_data = { // チャートのデータ
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        borderWidth: 1
    }]
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};
</script>

<template>
    <div>
        <canvas id="chart" width="100%" v-bind:height="chart_height"></canvas>
    </div>
</template>

<style>
</style>

<script>
export default defineComponent({
    setup() {
        …
    },
});
</script>

<script setup>
    …
</script>

<template>
    <div>
        <canvas id="chart" width="100%" v-bind:height="chart_height"></canvas>
    </div>
</template>

<script setup>
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let y_max = Vue.ref(50); // 縦軸の最大値
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true,
            min: 0,
            max: y_max.value,
        }
    },
};
let chart_data = { // チャートのデータ
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        borderWidth: 1
    }]
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart2").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};

////////////////////////////////////////////////////////////////////////////////
// チャートのデータを変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeData = () => {
    chart_data.datasets[0].data = [
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
    ];
    chart.update(); // チャートを再描画する
};

////////////////////////////////////////////////////////////////////////////////
// 縦軸の最大値を変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeYMax = () => {
    chart_options.scales.y.max = y_max.value;
    chart.update(); // チャートを再描画する
};
</script>

<template>
    <div>
        <canvas id="chart2" width="100%" v-bind:height="chart_height"></canvas>
        <form class="chart-ui-form">
            <input type="button" class="data-change-button" v-on:click="onChangeData" value="データを変更" />
            <div class="chart-range-container">
                <span style="margin-right: 0.2em">縦軸の最大値　10</span>
                <input type="range" id="view-time-start-range" class="y-max-range" v-model.number="y_max" min="10"
                    max="100" step="10" v-on:mouseup="onChangeYMax" v-on:touchend="onChangeYMax" />
                <span style="margin-left: 0.2em">100</span>
            </div>
        </form>
    </div>
</template>

<style>
.chart-ui-form {
    margin: 20px;
}

.chart-range-container {
    margin-left: 10px;
    margin-top: 10px;
}

.data-change-button {
    color: #fff;
    background-color: #3b83d8;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    padding: 7px 13px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    border: 2px solid transparent;
    position: relative;
}

.y-max-range {
    max-width: 40%;
    width: 40%;
}
</style>

<template>
    …
</template>

<style>
    …
</style>