VUE-CLI: Adding external js and css libraries

Hi all,

I’m using vue-cli for the first time.
I would like to do how to include libraries from a CDN (like underscorejs, momentum etc. etc.) using vue.config.js?

Thanks a lot in advance!

1 Like

There’s no dedicated config option for this. You yould simply include script tags for these CDN dependencies in /public/index.html

Then you would have to extend the webpack config to include these as externals:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.externals({
      'jquery', 'jQuery'
    })
  }
}

https://webpack.js.org/configuration/externals/#externals
https://github.com/mozilla-neutrino/webpack-chain

Alternatives might be plugins like this one:

https://www.npmjs.com/package/html-webpack-cdn-plugin

I never used it but could assist to add this to the webpack config if it seems like a way you want to go.

3 Likes

Thanks LinusBorg! I saw this part of the doc but I don’t understand where is the url defined.
How does webpack know where to pick jQuery in this case?

it doesn’t. As I said, you add the script tags to the CDN resources. The externals option is simply a mapping between the module name as you use it in your app and the global variable through which this externalized dependency is available to webpack.

In my example, we tell webpack that the exportr of the module jquery can be derrived from the global variable jQuery. That global variable is set by jquery itself when its loaded through the script tag.

2 Likes

So at the I still have to add the script tag in my html template. Is this what you are saying?

Thanks btw for your response. It’s very helpful

Yes, that’s what I’m saying.

Ok! I thought there was a way to add CDN without touching the template. I might have a look at the plugin you have posted before.

Thanks again for you help!!!

This one seems to be good as well, and documentation seems more detailed:

Hi.

I have the same problem, but there must be something I don’t get. I am trying to declare ‘moment’ (moment.js) as an external dep to my small Vue library. When I use this in vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.externals({
      'moment': 'moment'
    })
  },
  css: {
    extract: false
  }
}

The final gzipped UMD minified build is 81kB. But when I use

module.exports = {
  configureWebpack: config => {
    config.externals = {
      'moment': 'moment'
    }
  },
  css: {
    extract: false
  }
}

the final gzipped UMD minified build is 31kB. But it is certainly too large too ! Moment.js gzipped is 16k, and my library is tiny (certainly smaller than momentjs).

There is two questions in one, in fact. Which vue.config.js should I use, and does it really work (or am I doing something wrong) ? Thanks !

it’s hard to say something definitive without seeing your app, and what other dependencies might get included as well.

Anyway, I think:

  1. in both instances, you are essentially overwriting the existing externals (most notably, Vue itself, which is automatically added to externals when building with — target lib`.
  2. Both ways to config can work fine, if you repsect existing externals:
module.exports = {
  chainWebpack: config => {
    config.externals({
      ...config.get('externals')
      'moment': 'moment'
    })
  }

// or:
module.exports = {
  configureWebpack: config => {
    config.externals = {
       ...config.externals
      'moment': 'moment'
    }
  },
  1. minified != (minified and…) gzipped. the former is usually still much larger than the latter, so it’s hard to compare, especially without knowing what else is in your bundle.

  2. You seem to include css into your bundle instead of extarcting it - how big is your CSS?

Hi LinusBorg,
I’m also new to vuejs and I’m having a hard time importing mapkit from cdn into vuejs components, it gives an error saying that mapkit can’t be resolved.

Here’s part of my code:

// vue.config.js, which I created manually
module.exports = {
    chainWebpack: config => {
        config
            .externals(
            {
                ...config.externals,
                'mapkit': 'mapkit'
            }
        );
    }
}

I added the apple maps cdn script in public/index.html at the bottom (right before the closing body tag)

And then in one of the components I added import mapkit from 'mapkit'

PS: I know there’s a mapkit npm but I would like to know why my implementation is not working, could be useful in the future.

Thank you in advance