How to load external js file in my component VUE 2 (webpack)?

Question

I already looked and I did not find. I have a url from an external js file and I'm importing in my index.html. The file is loading when the application starts.

however, the user will not use the features frequently; And I would like to upload this file only when a specific component was called.

I'm using the vue cli (vue 2) with template webpack.

I've tried something like:

import * as PagSeguroDirectPayment from 'https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js';
required('https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js');

And they do not working.

need to upload this file to use a payment gateway. can anybody help me?

Answer 1

Instead of using it in index.html, create a separate js file and copy the script from the link. Export the required method in js file and import it in the component required.

Answer 2

This is one of those features that vue has that makes believe that it is really well thought out. To do such a thing is actually super easy.

I'm using this in my routes like this:

// home gets loaded always
const Home = import('@/pages/home')
// profile and account gets loaded on demand
const Profile = () => import('@/pages/profile')
const Account = () => import('@/pages/account')

When used with webpack, this will generate individual files for each component. (01.js, 02.js, etc) These files will load as needed.

• Daniel: also, forgot to mention. There is a talk that goes into it further that's worth listening to at youtu.be/rn97hCNQsKI
• Renato Souza de Oliveira: My question is not how to loading file internal lazily. I need to know how to load an external file. stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/….
• Daniel: is there a reason why externals don't work for this? webpack.js.org/configuration/externals/#externals