Tengo una página que carga los siguientes archivos JS
El archivo app.js se compila mediante un paquete web, que incluye un componente NPM de @chenfengyuan/vue-countdown .
Estoy tratando de mostrar un componente de cuenta regresiva vue.js en mi página usando el siguiente código en mi página:
<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>Cuando ejecuto esto, aparece un error JS que dice:
SyntaxError no capturado: no se puede usar la declaración de importación fuera de un módulo
¿Alguien puede explicar qué estoy haciendo mal y cómo puedo importar esto correctamente?
No se necesitan importaciones, cuando hacemos referencia al script, lo agregará al alcance de la página. Creé un codepen de trabajo aquí .
Creo que el problema con el que se encontraba no incluía components , ¡así que estuvo muy cerca!
<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>