Import javascript file in Vue component

Question

i'm trying to import a .js file into one of my Vue components.

I've already tryed : import './magnetic' but i got this error:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted.

If i put it like this <script src="magnetic.js"></script> into index.html it work without problems.

You can find the .js i'm using at this link: https://github.com/codrops/MagneticButtons/blob/master/dist/demo1.151408fb.js

Can someone help me please?

Answer 1

Use mounted hook to load your js file

<script>
export default {
  mounted() {
    const plugin = document.createElement("script");
    plugin.setAttribute(
      "src",
      "//api.example.com/widget/core.js"
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
};
</script>