Loading a Javascript file into a Vue component

Hi all -
I don’t know if this is possible, but I have a custom third party JavaScript file that I would like to use in my Vue component.

I have tried the following:

1. Added a script tag to the body of my index.html and tried accessing the code in the mounted hook of my Vue component.
2. In the mounted hook of my Vue component, creating a script element first (although this is a localized version of #1):

    let myScript = document.createElement( 'script' );
    myScript.setAttribute( 'src', './static/js/custom.js' );
    document.body.appendChild( myScript );

3. Instead of placing the JavaScript file in the public directory, I’ve also tried static. I know both locations are ignored by webpack and just copy the file.
4. Tried using both relative paths and absolute paths
5. Tried something like the following in my Vue component to an epic fail:

    import * as custom from '/static/js/custom.js';

My Ionic Info dump:

Ionic:

   Ionic CLI       : 6.17.1 (C:\Users\Matt\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.2.1

Capacitor:

   Capacitor CLI      : 4.0.1
   @capacitor/android : not installed
   @capacitor/core    : 4.0.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v14.17.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.13
   OS     : Windows 10

I’m grabbing at straws now. Be kind, as I’m not an expert web developer. I’m not quite sure Ionic Vue is the correct post location and would be happy to locate it somewhere else.

Regards,
Matt

1 post - 1 participant

Read full topic