What's the standard way to include external js in vue

Question

I want to include a js widget in my vue application.

After trying a lot of random solutions, I came up with "my own", that is just importing it outside of vue, in the html head, then moving it with vue dom bindings to where I want it to be.

The problem is, I don't know if that is what I should be doing, in html I would just put the script tag where I want the external component to be and it would work fine.

Answer 1

The standard way is indeed to create a custom Vue component.

<template>
    <div></div>
</template>

<script>

    import Widget from 'widget.js'

    export default {

        name: 'my-widget',

        mounted(){

            // assume that the widget is a constructor
            // that requires an element to be bound to
            new Widget(this.$el)
        }
    }
</script>

And then you can import this component in another one and use it like <my-widget></my-widget>