0
240
Vistas¿Cómo puedo usar las importaciones de src en Vue3?
Quiero preguntarle cómo puedo usar un componente en VUE3 con API de composición -> patrón de configuración de script, por ejemplo. -> Tengo un componente: Modal. Así que voy a crear una carpeta Modal que tiene:
Modal.vue -> dónde está la plantilla de vue e importa el script y scss así:
<script src="./index.js"><style lang="scss" scoped> @import './style.scss'; </style>index.js -> dónde está el código js. ¡¡Aquí está el problema!! Si estoy tratando de usar
<script setup>, el código aquí no funciona. ¿Alguna idea de por qué?style.scss -> donde esta el estilo css.
SPA:
<template> <div class="modals"> <h1>Modals</h1> </div> </template> <script setup> /* imports */ import { ref } from 'vue'; import Modal from '@/components/Modal.vue'; import ModalDark from '@/components/ModalDark.vue'; /* modals */ const showDarkModals = ref(false); const showModal = ref(false); const hideModal = () => (showModal.value = false); const displayModal = () => showModal.value = true; </script>Y quiero algo como esto:
Una carpeta llamada Modal y que tiene la siguiente estructura: 
index.vue
<template> <div class="modals"> <h1>Modals</h1> </div> </template> <script src="./index.js" setup></script> <style> @import './style.css'; </style>índice.js
/* imports */ <script> import { ref } from 'vue'; import Modal from '@/components/Modal.vue'; import ModalDark from '@/components/ModalDark.vue'; /* modals */ const showDarkModals = ref(false); const showModal = ref(false); const hideModal = () => (showModal.value = false); const displayModal = () => showModal.value = true; </script>estilo.css
.modals { background: red; }PRODUCCIÓN:
- referencia: https://vuejs.org/api/sfc-spec.html#src-imports
1 Respuestas
Responde la pregunta0
Simplemente no debe envolver el contenido del archivo .js con etiquetas de script , ya que no está escribiendo este código en un archivo HTML. Ya especifica el uso de código javascript al importar el archivo en <script setup /> , para que el compilador sepa que el contenido del archivo .js contiene código JavaScript.
Es similar al archivo CSS : simplemente elimine las etiquetas HTML ( <script> y </script> ) desde el principio y el final del archivo .js , y debería estar bien.
Si esto no funciona, el mensaje de error dice que la script setup no se puede usar con importaciones de archivos externos, por lo que es posible que se vea obligado a escribir el código JavaScript directamente en su archivo de .vue .