I am trying to organize my Vue.js template by separating it into a .vue file, while keeping the code in a .js file.
Here is an example of a Vue "single file component":
<template>
..
</template>
<script>
..
</script>
Current Solution:
I have made the .vue file the main component and used a MIXIN to reference the .js file. This approach seems a bit messy!
Preferred Approach:
I would like to be able to import the .js file with just one webpack import:
...
</template>
import ViewModel from 'vm.js'
Is there a way to do this? Or perhaps use a <script> tag in the .vue file that can be understood by vue-loader?
<template>
..
<script src='vm.js'/>
</template>
Thank you for your help! My aim is to be able to set breakpoints in Visual Studio Code, maintain separation of concerns, and improve readability. :)
Additionally, I need this solution to work with TypeScript!