CODEWITHSUNDEEP
javascriptwebpackvue.jsvisual-studio-codevue-loader
Edza
Edza

Reputation: 1444

How to separate vue.js template into a .vue file while leaving code in .js?

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 component":

<template>
..
</template>

<script>
..
</script>

What works:

Make the .vue file the real component, 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!

Upvotes: 6

Views: 7844

Answers (1)

Nafiul Islam
Nafiul Islam

Reputation: 1220

...
</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>

Upvotes: 7

Related Questions