How to add external JS scripts to VueJS Components

Question

I ve to use two external scripts for the payment gateways  Right now both are put in the index html file  However  I don t want to load these files at the beginning itself  The payment gateway is needed only in when user open a specific component  using router-view     Is there anyway to achieve this

User · Answer

The top answer of create tag in mounted is good, but it has some problems: If you change your link multiple times, it will repeat create tag over and over.

So I created a script to resolve this, and you can delete the tag if you want.

It's very simple, but can save your time to create it by yourself.

// PROJECT/src/assets/external.js

function head_script(src) {
    if(document.querySelector("script[src='" + src + "']")){ return; }
    let script = document.createElement('script');
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    document.head.appendChild(script)
}

function body_script(src) {
    if(document.querySelector("script[src='" + src + "']")){ return; }
    let script = document.createElement('script');
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    document.body.appendChild(script)
}

function del_script(src) {
    let el = document.querySelector("script[src='" + src + "']");
    if(el){ el.remove(); }
}


function head_link(href) {
    if(document.querySelector("link[href='" + href + "']")){ return; }
    let link = document.createElement('link');
    link.setAttribute('href', href);
    link.setAttribute('rel', "stylesheet");
    link.setAttribute('type', "text/css");
    document.head.appendChild(link)
}

function body_link(href) {
    if(document.querySelector("link[href='" + href + "']")){ return; }
    let link = document.createElement('link');
    link.setAttribute('href', href);
    link.setAttribute('rel', "stylesheet");
    link.setAttribute('type', "text/css");
    document.body.appendChild(link)
}

function del_link(href) {
    let el = document.querySelector("link[href='" + href + "']");
    if(el){ el.remove(); }
}

export {
    head_script,
    body_script,
    del_script,
    head_link,
    body_link,
    del_link,
}

And you can use it like this:

// PROJECT/src/views/xxxxxxxxx.vue

......

<script>
    import * as external from '@/assets/external.js'
    export default {
        name: "xxxxxxxxx",
        mounted(){
            external.head_script('/assets/script1.js');
            external.body_script('/assets/script2.js');
            external.head_link('/assets/style1.css');
            external.body_link('/assets/style2.css');
        },
        destroyed(){
            external.del_script('/assets/script1.js');
            external.del_script('/assets/script2.js');
            external.del_link('/assets/style1.css');
            external.del_link('/assets/style2.css');
        },
    }
</script>

......

User · Answer

Are you using one of the Webpack starter templates for vue  https   github com vuejs-templates webpack   It already comes set up with vue-loader  https   github com vuejs vue-loader   If you re not using a starter template  you have to set up webpack and vue-loader   You can then import your scripts to the relevant  single file  components  Before that  you have toexport from your scripts what you want to import to your components    ES6 import  - https   developer mozilla org en-US docs Web JavaScript Reference Statements import - http   exploringjs com es6 ch modules html   Edit  You can import from these wrappers  - https   github com matfish2 vue-stripe - https   github com khoanguyen96 vue-paypal-checkout

User · Answer

I have downloaded some HTML template that comes with custom js files and jquery  I had to attach those js to my app  and continue with Vue    Found this plugin  it s a clean way to add external scripts both via CDN and from static files https   www npmjs com package vue-plugin-load-script     local files    you have to put your scripts into the public folder      that way webpack simply copy these files as it is  Vue loadScript   js jquery-2 2 4 min js       cdn Vue loadScript  https   maps googleapis com maps api js

User · Answer

Simplest solution is to add the script in the index html file of your vue-project index html    lt  DOCTYPE html gt       lt html lang  quot en quot  gt         lt head gt           lt meta charset  quot utf-8 quot  gt           lt title gt vue-webpack lt  title gt         lt  head gt         lt body gt           lt div id  quot app quot  gt  lt  div gt           lt  -- start Mixpanel -- gt  lt script type  quot text javascript quot  gt  function c a  if  a   SV  var b window try var d m j k b location f k hash d function a b  return m a match RegExp b  quot      amp     quot     m 1  null  f amp  amp d f  quot state quot   amp  amp  j JSON parse decodeURIComponent d f  quot state quot      quot mpeditor quot    j action amp  amp  b sessionStorage setItem  quot  mpcehash quot  f  history replaceState j desiredHash   quot  quot  c title k pathname k search    catch n   var l h window mixpanel a a  i    a init function b d g  function c b i  var a i split  quot   quot   2  a length amp  amp  b b a 0   i a 1   b i  function   b push  i  concat Array prototype slice call arguments      0     var e a  quot undefined quot    typeof g e a g     g  quot mixpanel quot  e people e people     e toString function b  var a  quot mixpanel quot   quot mixpanel quot    g amp  amp  a   quot   quot  g  b   a   quot   stub  quot   return a  e people toString function   return e toString 1   quot  people  stub  quot   l  quot disable time event track track pageview track links track forms track with groups add group set group remove group register register once alias unregister identify name tag set config reset opt in tracking opt out tracking has opted in tracking has opted out tracking clear opt in out tracking people set people set once people unset people increment people append people union people track charge people clear charges people delete user people remove quot  split  quot   quot        for h 0 h lt l length h   c e l h   var f  quot set set once union unset remove delete quot  split  quot   quot   e get group function   function a c  b c  function   call2 args arguments call2  c  concat Array prototype slice call call2 args 0   e push  d call2    for var b    d   quot get group quot   concat Array prototype slice call arguments 0   c 0 c lt f length c   a f c   return b  a  i push  b d g    a   SV 1 2 b c createElement  quot script quot   b type  quot text javascript quot  b async  0 b src  quot undefined quot    typeof MIXPANEL CUSTOM LIB URL      MIXPANEL CUSTOM LIB URL  quot file  quot    c location protocol amp  amp  quot   cdn mxpnl com libs mixpanel-2-latest min js quot  match           quot https   cdn mxpnl com libs mixpanel-2-latest min js quot   quot   cdn mxpnl com libs mixpanel-2-latest min js quot  d c getElementsByTagName  quot script quot   0  d parentNode insertBefore b d     document window mixpanel           mixpanel init  quot xyz quot    lt  script gt  lt  -- end Mixpanel -- gt           lt script src  quot  dist build js quot  gt  lt  script gt         lt  body gt       lt  html gt

User · Answer

You can use vue-loader and code your components in their own files  Single file components    This will allow you to include scripts and css on a component basis

User · Answer

This can be simply done like this      created         var scripts            https   cloudfront net js jquery-3 4 1 min js          js local js             scripts forEach script   gt          let tag   document createElement  script          tag setAttribute  src   script         document head appendChild tag

User · Answer

using webpack and vue loader you can do something like this  it waits for the external script to load before creating the component  so globar vars etc are available in the component  components      SomeComponent       gt       return new Promise  resolve  reject    gt        let script   document createElement  script       script onload        gt         resolve import someComponent             script async   true     script src    https   maps googleapis com maps api js key APIKEY amp libraries places      document head appendChild script

User · Answer

There is a vue component for this usecase https   github com TheDynomike vue-script-component usage  lt template gt       lt div gt           lt VueScriptComponent script   lt script type  quot text javascript quot  gt  alert  quot Peekaboo  quot     lt  script gt    gt       lt div gt   lt  template gt    lt script gt  import VueScriptComponent from  vue-script-component   export default           components                VueScriptComponent              lt  script gt

User · Answer

If you are trying to embed external js scripts to the vue js component template  follow below      I wanted to add a external javascript embed code to my component like this     lt template gt     lt div gt      This is my component      lt script src  https   badge dimensions ai badge js  gt  lt  script gt     lt  div gt   lt template gt    And Vue showed me this error   Templates should only be responsible for mapping the state to the UI  Avoid placing tags with side-effects in your templates  such as   as they will not be parsed        The way I solved it was by adding type  application javascript   See this question to learn more about MIME type for js      lt script type  application javascript  defer src       gt  lt  script gt     You may notice the defer attribute  If you want to learn more watch this video by Kyle

User · Answer

A simple and effective way to solve this  it s by adding your external script into the vue mounted   of your component  I will illustrate you with the Google Recaptcha script    lt template gt          your HTML  lt  template gt    lt script gt    export default       data       gt                 data of your component             mounted           let recaptchaScript   document createElement  script         recaptchaScript setAttribute  src    https   www google com recaptcha api js         document head appendChild recaptchaScript             methods                methods of your component            lt  script gt      Source  https   medium com  lassiuosukainen how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

User · Answer

You can use the vue-head package to add scripts  and other tags to the head of your vue component   Its as simple as   var myComponent   Vue extend     data  function          return                          head        title          inner   It will be a pleasure                Meta tags     meta            name   application-name   content   Name of my application             name   description   content   A description of the page   id   desc        id to replace intead of create element                       Twitter         name   twitter title   content   Content Title              with shorthand         n   twitter description   c   Content description less than 200 characters                          Google    Schema org         itemprop   name   content   Content Title             itemprop   description   content   Content Title                           Facebook   Open Graph         property   fb app id   content   123456789             property   og title   content   Content Title              with shorthand         p   og image   c   https   example com image jpg                                link tags     link            rel   canonical   href   http   example com    contact    id   canonical             rel   author   href   author   undo  false       undo property - not to remove the element         rel   icon   href  require    path to icon-16 png    sizes   16x16   type   image png               with shorthand         r   icon   h   path to icon-32 png   sz   32x32   t   image png                             script            type   text javascript   src   cdn to script js   async  true  body  true      Insert in body          with shorthand         t   application ld json   i       context    http   schema org                                style            type   text css   inner   body   background-color   000  color   fff    undo  false                                Check out this link for more examples

User · Answer

To keep clean components you can use mixins   On your component import external mixin file      Profile vue   import externalJs from   client mixins externalJs    export default    mounted        this externalJsFiles               externalJs js   import   JSassets js file-upload js   then mod   gt         your JS elements          babelrc  I include this  if any get stuck on import         presets     babel preset-env       plugins                module-resolver             root                  alias                client      client              JSassets      server public

User · Answer

mounted         if  document getElementById  myScript      return       let src    your script source      let script   document createElement  script       script setAttribute  src   src      script setAttribute  type    text javascript       script setAttribute  id    myScript       document head appendChild script      beforeDestroy         let el   document getElementById  myScript       if  el    el remove

User · Answer

You can load the script you need with a promise based solution  export default     data          return   is script loading  false          created             If another component is already loading the script     this  root  on  loading script   e   gt    this is script loading   true           methods        load script            let self   this       return new Promise  resolve  reject    gt                if script is already loading via another component         if   self is script loading                 Resolve when the other component has loaded the script           this  root  on  script loaded   resolve            return                    let script   document createElement  script           script setAttribute  src    https   www google com recaptcha api js           script async   true                  this  root  emit  loading script            script onload        gt                 emit to global event bus to inform other components              we are already loading the script              this  root  emit  script loaded             resolve                      document head appendChild script                           async use script            try           await this load script                 do what you want after script has loaded         catch  err    console log err                  Please note that this  root is a little hacky and you should use a vuex or eventHub solution for the global events instead  You would make the above into a component and use it wherever needed  it will only load the script when used  NOTE  This is a Vue 2 x based solution  Vue 3 has stopped supporting  on

[javascript] How to add external JS scripts to VueJS Components

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-component

Examples related to vue-router