Including external script in vue.js template
Question
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 (eg <script src="..." ) in a template which isn't needed globally (for every page/component), 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.com/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.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/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 component 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/component when only this component 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.com/path/to/dropzone"></script>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
How can I include an external script for only one component?
2 answers
solution1
2 2017-07-17 13:49:06
You 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>
solution2
1 2017-07-17 13:31:28
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 component 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.