I wanna ask you how can I use a component in VUE3 with composition API -> script setup pattern, for eg. -> I have a component: Modal. So I'm gonna create a folder Modal which has:

1. Modal.vue -> where is the vue template and import the script and scss like this: 
<script src="./index.js"> 
 <style lang="scss" scoped>   @import './style.scss'; </style>


2. index.js -> where is the js code. Here is the problem!! If I'm trying to use the <script setup> the code here isn't working. Any idea why?


3. style.scss -> where is the css style.



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>

And I want something like this:

A folder called Modal and which have the following structure:

index.vue

<template>
   <div class="modals">
        <h1>Modals</h1>
   </div>
</template>
    
<script src="./index.js" setup></script>
    
<style> @import './style.css'; </style>

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

style.css

.modals {
  background: red;
}

OUTPUT:

• reference: https://vuejs.org/api/sfc-spec.html#src-imports