I want to display a Doughnut plot in a Django template using Vue.js 3. The Doughnut plot will be a component because I need to reuse this plot a lot.

So far I have managed to create a simple text component in this way:

base.html

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
{% block vue %}
{% endblock %}

status.html

{% extends "../base.html" %}
{% load static %}
<doughnut-plot title={{title}}></doughnut-plot>
{% block vue %}
<script type="module" src="{% static 'js/status.js' %}"></script>
{% endblock %}

status.js

import DoughnutPlot from "./components/doughnut_plot.js"

const app_status = Vue.createApp({
    components: {
        DoughnutPlot,
    }
});
app_status.mount("#app_status");

doughnut_plot.js

export default {
    props: ['title'],
    template: `<h4>{{title}}</h4>`
};

This code show the correct title that I pass with the context in the corresponding view.

However, I cannot manage to change doughnut_plot.js into a plot.

I tried the following:

status.html

% block vue %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Include Vue Chart.js wrapper -->
<script src="https://cdn.jsdelivr.net/npm/vue-chartjs@3"></script>
<!-- Include your Vue component script -->
<script type="module" src="{% static 'js/components/doughnut_plot.js' %}"></script>
<script type="module" src="{% static 'js/status.js' %}"></script>
{% endblock %}

doughnut-plot.js

import { Doughnut } from 'vue-chartjs';

export default {
    extends: Doughnut,
    props: ['data', 'options'],
    mounted() {
        this.renderChart(this.data, this.options);
    }
};

But I get the error Uncaught TypeError: Failed to resolve module specifier "vue-chartjs". Relative references must start with either "/", "./", or "../". And I cannot manage to solve it.

Any help will be greatly aprecciated.