I'm new to Vue.js and web-pack, so I decided to use the vue-cli (webpack) to scaffold an initial application. I'm trying to include an external script (e.g <script src="...") in a template which isn't needed globally (for every page/ponent), however Vue warns that this isn't allowed.
My index.html file is similar to the initial generated one:
<html lang="en">
<head>
<title>App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=".0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src=".1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src=".4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src=".0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
My App.vue is also similar to the generated one:
<template>
<div id="app">
<div class="container pt-5">
<router-view></router-view>
</div>
</div>
</template>
I have a route to /upload in my routes file, which maps to an Upload ponent which requires dropzone.js (an external script). I could include it in my index.html, similarly to how bootstrap is loaded, however it seems less than ideal to load it for every page/ponent when only this ponent requires it.
However, as stated above, I simply cannon include it in my template file as such:
<template>
<div>
<h2>Upload Images</h2>
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" value="upload" />
</div>
</form>
</div>
<script src=""></script>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
How can I include an external script for only one ponent?
I'm new to Vue.js and web-pack, so I decided to use the vue-cli (webpack) to scaffold an initial application. I'm trying to include an external script (e.g <script src="...") in a template which isn't needed globally (for every page/ponent), however Vue warns that this isn't allowed.
My index.html file is similar to the initial generated one:
<html lang="en">
<head>
<title>App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery./jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
My App.vue is also similar to the generated one:
<template>
<div id="app">
<div class="container pt-5">
<router-view></router-view>
</div>
</div>
</template>
I have a route to /upload in my routes file, which maps to an Upload ponent which requires dropzone.js (an external script). I could include it in my index.html, similarly to how bootstrap is loaded, however it seems less than ideal to load it for every page/ponent when only this ponent requires it.
However, as stated above, I simply cannon include it in my template file as such:
<template>
<div>
<h2>Upload Images</h2>
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" value="upload" />
</div>
</form>
</div>
<script src="https://example./path/to/dropzone"></script>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
How can I include an external script for only one ponent?
Share Improve this question asked Jul 17, 2017 at 13:21 AshAsh 6,7938 gold badges30 silver badges37 bronze badges2 Answers
Reset to default 2You can define a method that will be responsible for script loading and call it in the mounted or created hook like below:
<script>
export default {
data() {
return {}
},
methods: {
loadJs(url, callback) {
jQuery.ajax({
url: url,
dataType: 'script',
success: callback,
async: true
});
}
},
mounted() {
this.loadJs('url_to_someScript.js', function() {
//Stuff to do after someScript has loaded
});
}
}
</script>
Script tags are global by nature. Including scripts tag in template is not how you do with modules systems (at least for now).
You can install it as a node module using npm, npm install dropzone --save.
Then import it inside your ponent code.
import drozone from 'dropzone';
export default {
// Component code...
}
However, be aware that the bundle will contain dropzone in every page, unless you are using webpack code splitting feature. See here for an official tutorial about how to split your bundle with Vue Router.