Delving into the world of Vue.js and web-pack, I opted to utilize the vue-cli (webpack) for scaffolding an initial application. A challenge arose when attempting to incorporate an external script (e.g <script src="...") in a template that isn't required globally across every page or component. Vue raised a warning against this practice.
The structure of my index.html closely resembles the initially 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>
The App.vue file mirrors the default setup:
<template>
<div id="app">
<div class="container pt-5">
<router-view></router-view>
</div>
</div>
</template>
Incorporating a route to /upload within my routes file leads to an Upload component requiring dropzone.js (an external script). While including it in index.html like bootstrap is loaded is feasible, loading it universally for all pages/components isn't optimal considering only this specific component necessitates it.
Despite this, directly embedding it in the template file faces challenges:
<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>
Is there a way to include an external script exclusively for one component?