如何在 Vue3 中使用 src 导入？

Question

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

Answer 1

You must just not wrap the content of the .js -file with script tags, since you are not writing this code in an HTML file. You do already specify to use javascript code by importing the file in <script setup /> , so the compiler knows that the content of the .js -file contains JavaScript code.

It is similar to the CSS -file: Just delete the HTML-tags ( <script> and </script> ) from the beginning and the end of the .js -file, and you should be fine.

If this does not work, the error message says that script setup cannot be used with external file imports, so you might be forced to write the JavaScript code directly into your .vue -component-file.