I have a page which loads the following JS files
The app.js file is compiled using webpack, this includes a NPM component from @chenfengyuan/vue-countdown.
I am trying to display a vue.js countdown component on my page using the following code on my page:
<div class="container" id="app">
<vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
Time Remaining：@{{ days }} days, @{{ hours }} hours, @{{ minutes }} minutes, @{{ seconds }} seconds.
</vue-countdown>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
import VueCountdown from '@chenfengyuan/vue-countdown';
// Vue application
const app = new Vue({
el: '#app',
data: {
messages: [],
},
});
app.component(VueCountdown.name, VueCountdown);
</script>
When I run this I get a JS error saying:
Uncaught SyntaxError: Cannot use import statement outside a module
Can someone explain what I am doing wrong and how I can correctly import this?
Imports aren't needed, when we reference the script, it'll add it to the page scope. I created a working codepen here.
I believe the issue you were running into was not including components, so you were very close!
<div class="container" id="app">
<vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
Time Remaining：@{{ days }} days, @{{ hours }} hours, @{{ minutes }} minutes, @{{ seconds }} seconds.
</vue-countdown>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@chenfengyuan/vue-countdown@1.1.5/dist/vue-countdown.min.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
VueCountdown,
},
data: {
messages: [],
},
});
// This line is not needed
// app.component(VueCountdown.name, VueCountdown);
</script>