javascript - How to use dayjs duration plugin in a vue app - Stack Overflow

I have a plain HTML page (made using .NET MVC, not node or anything like that) that uses Vue for client side rendering (among other things).

<script src="~/lib/vue/dist/vue.global.js"></script>
<script type="module">
    const { createApp } = Vue;

    import * as dayjs from '/lib/dayjs/dayjs.min.js';
    import * as dateFormatting from '/js/DateFormatting.js';

    createApp({
        data() {
            return {
                // data
            }
        },
        methods: {
            ...dateFormatting,
            // other methods
        }
    }).mount('#app');
</script>

I also have a javascript module (DateFormatting.js) with some date/time formatting functions that I need to reuse on several different pages.

export function formatDate(d) {
    if (d) {
        return dayjs(d).format('M/D/YYYY');
    }
    return "";
}

// many other functions follow...

Set up this way, I am able to use the formatDate() function in my Vue template.

But now I need to use the dayjs duration plugin in a few of my functions, and I can't figure out how to do that. Per the documentation and several searches, I tried:

    import * as dayjs from '/lib/dayjs/dayjs.min.js';
    import * as duration from '/lib/dayjs/plugin/duration.js';
    dayjs.extend(duration);

    import * as dateFormatting from '/js/DateFormatting.js';

When I do this I get the following error in the Chrome console:

Uncaught TypeError: dayjs.extend is not a function

I also tried importing dayjs and the duration plugin directly in to DateFormatting.js as opposed to the Vue app (which I would rather do), and I get the same thing.

How do I use the dayjs duration plugin in my use case?

Is it possible to import the dayjs (and duration plugin) in to my DateFormatting.js file directly instead of having to remember to do it in the Vue app?