I want to separate the vue.js template into a .vue file while leaving code in a .js file.

This is a vue "single file ponent":

<template>
..
</template>

<script>
..
</script>

What works:

Make the .vue file the real ponent, and define a MIXIN that points to the .js file. Seems very hacky!

What I would like:

A single webpack import to the .js file:

...
</template>

import ViewModel from 'vm.js'

Is this possible? Or a tag in the .vue file that vue-loader understands?

<template>
..
<script src='vm.js'/>
</template>

Thanks a ton! The goal is to set breakpoints in visual studio code + separation of concerns + readability. :)

Oh, and this needs to work with typescript!

I want to separate the vue.js template into a .vue file while leaving code in a .js file.

This is a vue "single file ponent":

<template>
..
</template>

<script>
..
</script>

What works:

Make the .vue file the real ponent, and define a MIXIN that points to the .js file. Seems very hacky!

What I would like:

A single webpack import to the .js file:

...
</template>

import ViewModel from 'vm.js'

Is this possible? Or a tag in the .vue file that vue-loader understands?

<template>
..
<script src='vm.js'/>
</template>

Thanks a ton! The goal is to set breakpoints in visual studio code + separation of concerns + readability. :)

Oh, and this needs to work with typescript!

• javascript
• webpack
• vue.js
• visual-studio-code
• vue-loader

• 1 As someone who is still learning vue, from what I understand is that vue needs the template/js in one file in order for it to be piled into a ponent for web usage. However, if this is in fact possible I would like to know as well... – Get Off My Lawn Commented Apr 29, 2018 at 15:36
• Can't you just wrap the import in script tags? – pishpish Commented Apr 29, 2018 at 15:58

1 Answer 1

...
</template>

import ViewModel from 'vm.js'

The second option is possible with a small tweak made in it

<template>
...
</template>

<script src="vm.js"></script>