Vue3 (Composition API) не поддерживает (script setup src) традиционную схему разделения кода на esm-модули,
так как принуждает прописывать код в *.vue-файлах (SFC). Соответственно тонко рулить
import'ами похоже не выйдет.
Более того, если ранее с использованием vue-class-component
приучали к "чистому коду" (всё что требуется импортируем явно), то теперь с такими конструкциями как defineProps вновь идёт откат к использованию окружения.
Workaround: SFC.vue (non setup, js transpiled by webpack etc. compilers):
<template>...</template>
<script>
import { defineComponent } from 'vue';
import { opts } from './SomeComponent';
// export default only: https://github.com/vuejs/vue-loader/issues/1234#issuecomment-380222855
export default defineComponent(opts);
</script>SomeComponent.js:
import { reactive } from 'vue';
const opts = {
// use props as optionsAPI, not defineProps
props: {
params: Object,
},
setup (props) {
const items = reactive(props.params.items);
// "computed"
return {
items,
};
}
}
export { opts };
from stackoverflow