Question 168587 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can external JS be loaded in <script setup> in Vue 3 component?

I am attempting to implement a tokenized payment form in my Vue3/InertiaJS/Laravel app, and am unable to get the external script loaded so that it is available in the <script setup> to define a value and attach it to a DOM element. Per the docs, I am doing this

<script setup> 
        const tokenizerScript = document.createElement("script");
        tokenizerScript.setAttribute(
            "src",
            "https://app.2apgateway.com/tokenizer/tokenizer.js"
        );
        tokenizerScript.setAttribute(
            'language',
            'javascript'
        )
        document.head.appendChild(tokenizerScript);

        const tokenizer = new Tokenizer({
            url: apiUrl, 
            apikey: publicApiKey,
            container: '#container', 
            // Callback after submission request has been made
            submission: (resp) => { // Figure out what response you got back
                switch(resp.status) {
                    case 'success':
                        // Successful submission
                        console.log(resp.token)
                        Inertia.post(`/users/${props.user.id}/dues/submit-online-payment`, {
                            token: resp.token
                        })
                        break;
                    case 'error':
                        // Encountered an error while performing submission
                        console.log(resp.msg)
                        break;
                    case 'validation':
                        // Encountered form validation specific errors
                        console.log(resp.invalid)
                        break;
                }
            }
        })
</script>

<template>
    <div id="container" />
</template>

No matter how I do it, whether this way, or using <link rel="prefetch">, or trying to load it in the onMounted or onBeforeMount hooks, I get an error that Tokenizer is not defined. Often it will work if I go back to the previous page using the browser back button and come back, but not always

How can I get this script loaded so that when I call it in <script setup>, it is fully available?

Tags:

2

Answers


  1. 0

    You can solve this by using mounted() function in your code.

    <script>
  export default {
    
    mounted() {
      let tokenizerScript= document.createElement('script')
      tokenizerScript .setAttribute('src', 'https://app.2apgateway.com/tokenizer/tokenizer.js')
      document.head.appendChild(tokenizerScript)
    }

  }
</script>
    Login or Signup to reply.
  2. 0

    You will need to know when the script is ready in order to use the code it provides and you may need to do this in onMounted in theory because you can only append when the DOM exists to append it to.

    Before you append tokenizerScript to the document, you need to consider if this has been ran before and if the script is already loaded, I can’t tell you the behaviour if there is going to be duplication or not, I not loaded an external script like this in over 10 years.

    You should put tokenizer in its own method (funciton doTokenize() { ... new Tokenizer() ... }) that you can call if the script is already loaded or defer calling it after it has loaded via a callback.

    To wait for tokenizer.js to be loaded you should register an onload callback function before doing appendChild(tokenizerScript).

    tokenizerScript.defer = true

tokenizerScript.onload = () => {
  doTokenize()
}

document.head.appendChild(tokenizerScript);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search