How to import bootstrap or external js in Vue.js

Question

Few days ago i decide to implement vue.js in a simple html5, css3 and javascript web. But now i can't import my libraries like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>LiloTechnology</title>
  <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">

</head>

<body>

  <div id="app"></div>

  <!-- built files will be auto injected -->

  <script type="text/javascript" src="../assets/js/jquery.1.8.3.min.js"></script>
  <script type="text/javascript" src="../assets/js/bootstrap.js"></script>
  <script type="text/javascript" src="../assets/js/jquery-scrolltofixed.js"></script>
  <script type="text/javascript" src="../assets/js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="../assets/js/jquery.isotope.js"></script>
  <script type="text/javascript" src="../assets/js/wow.js"></script>
  <script type="text/javascript" src="../assets/js/classie.js"></script>

</body>

</html>

Can you please tell me how to import external .js files?

Thank you.

score 2 · Accepted Answer · edited May 23 '17 at 11:54

You can just add external (from the outside) resources like so:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

and so on... CSS works the same way in link rel="externalUrlTo.css"

For a production ready app; maybe consider using a module bundler like Webpack and npm to install dependencies. Therefore you don't have to rely on a external services being up or down and have tighter control over bundling.

If you are in a ES6 or ES5-style CommonJS environment and using Webpack, you should consider installing your dependencies with npm

npm install module --save

and afterwards importing them in your JS code using var module = require('module') or in ES6 import module from 'module'

For instance for jQuery it would be npm install jquery --save (--save by the way stores it to your package.json to be able to restore your dependencies easily using npm install) and import it using var $ = require('jquery') (again ES6: import {$, jQuery} from 'jquery').

For jQuery in particular take into account, that some libraries rely on it being globally available. So make sure to import it first and assign it to window (or global) as seen in How to import jquery using ES6 syntax?)

If you require a specific version you might also want to add it to your package.json or install it directly using npm install module@version. Hope that helps a bit!

How to import bootstrap or external js in Vue.js

1 Answers1