vue3 template separation and script setup

Question

I am currently migrating a Vue2 Project to Vue3. With Vue2 I've always had my component parts split up in separate files. I.e. the component's Vue template loads from different source files like this:

// public-main.vue
<template src="./public-main.html" lang="html"></template>
<script src="./public-main.js"></script>
<style src="./public-main.scss" lang="scss"></style>

I know "real" vue buffs hate splitting up the templates it is sort of frowned upon. But I like it because my aesthetics are twisted anyway.

Enter vue3 and it's fancy new script setup tag. Gullible as I am I gave this attempt a short:

// public-main.vue
<template src="./public-main.html" lang="html"></template>
<script src="./public-main.js"></script>
<script setup src="./public-main-setup.js"></script>
<style src="./public-main.scss" lang="scss"></style>

And of course, it does not work. Vue3 throws this Error towards me:

<script> cannot use the "src" attribute when <script setup> is also present because they must be processed together.
SyntaxError: <script> cannot use the "src" attribute when <script setup> is also present because they must be processed together.

So it's bye bye template splitting, I guess ...

... or ..., is there any way I can continue using splitted template files?

Answer 1

<script setup> only works with single file components. It cannot be used with the src attribute. So yeah, no more template splitting.

Source