How can I import an external script from vue.js and use the functions contained in the external script?

Question

For example,

// Example external script
<script src="https://test.abcd.com/js/test.1.0.0.js" />

<script>
  export default {
      name: 'HelloWorld',
      props: {
          msg: String,
      },
      methods: {
          myFunction() {

              // This is the example function of the example external script
              exampleExternalFunction();
      },
   },
};
</script>

In this way, I want to add an external script in vue.js and use the functions contained in the external script, but I get an error.

Is there any other way to do this?

global scripts should generally be placed in your index.html page, which contains the head and body — A. L
– A. L, Commented May 22, 2020 at 10:08
To add a script, I figured out how to add it using mounted(). Then, when I try to use the function contained in the script, an error called an undefined function occurs. This error occurs not only when using a function by adding a script to the vue component, but also when adding a script to index.html and trying to use the function in the vue component. — tail
– tail, Commented May 24, 2020 at 4:15

tail · Accepted Answer · 2020-05-25 02:32:29Z

1

I figured out solution. I used ESLint, but ESLint was blocking an undefined function. So I added ESLint rule called no-undef. Of course,I added the external script before that.

<script>
export default {
    name: 'HelloWorld',
    props: {
        msg: String,
    },
    created() {
        const examExternalScript = document.createElement('script');
        examExternalScript.setAttribute('src', 'https://test.abcd.com/js/test.1.0.0.js');
        document.head.appendChild(examExternalScript);
    },
    methods: {
        myFunction() {

          // This is the example function of the example external script
          // eslint-disable-next-line no-undef
          exampleExternalFunction();
        },
    },
};
</script>

answered May 25, 2020 at 2:32

tail

1151 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I import an external script from vue.js and use the functions contained in the external script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related