Search code examples
javascriptvue.jsvuejs2vue-sfc

If a Vue.js project uses Single File Components, does it mean vue libraries cannot be loaded from CDN?

I downloaded a tutorial from https://github.com/Ethiel97/simple-chart-vue It seems to be built with vue-cli

I would like to convert it to load Vue over CDN. I do not know where to insert code to load the Vue libraries from CDN because there is no HTML code due to use of Single File Components .vue files.

Where to insert following code?

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

Am I right that if Vue code uses SFC (single file component), it cannot load js library through CDN?

Solution

  • It doesn't matter that you are using single-file components. In production, you need to use a module bundler such as Webpack to compile your application to a single app.js and app.css. By doing that, you'll be able to attach the JS and CSS file in your HTML code and it would be compatible with CDNs.