Although I am new to Vue, there are many aspects that I find appealing. However, one thing I dislike is combining templates, scripts, and styles in the same file.
Instead, I prefer separating these concerns by using:
<template src="./template.html"></template>
<script lang="ts" src="./script.ts"></script>
<style lang="scss" scoped src="./style.scss"></style>
Therefore, for each component, my directory will have a structure like this:
https://i.sstatic.net/8Pa6U.png
If I follow this approach, it seems logical to me that the .vue file may become unnecessary.
There should be a way to instruct my build tools to replace x/x.vue with the above code if the file is not found.
Setting aside debates about the advantages and disadvantages of this method, how can I achieve this?
For reference, I am using Vue version 3.9.3 and willing to include any necessary npm dependencies in the project.
To clarify, while I am open to adjusting my import statements, my primary objective is to remove the need for creating and managing identical .vue files. (Ideally, the solution should use the file if it exists, in case we need to build that component differently for some reason.)
Just to emphasize, I am seeking a solution that does not alter the architecture of my components. Instead, I seek a meta-programming solution that automatically generates code that can be assumed to exist without requiring the manual creation of numerous identical implementations.