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:

1. 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>

2. 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é?

3. 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