Can you guide me on using a component in VUE3 with composition API and script setup pattern? For example, let's say I have a component named Modal. Here is how I plan to structure the folder:
Modal.vue - this file will contain the Vue template and import the script and SCSS as shown below:
<script src="./index.js"><style lang="scss" scoped> @import './style.scss'; </style>index.js - where the JavaScript code resides. The issue arises when attempting to use the <script setup> tag here. Any insights on why?
style.scss - containing the CSS styles.
Regarding the 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>
I envision something like this:
A folder named Modal with the following structure: https://i.sstatic.net/0L2dr.png
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: