Vue Js Template Separate File

Posted on  by admin
For Advanced Users

Modified4 years ago. 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":.

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

String Templates

What About Separation of Concerns?

Is this possible? Or a tag in the .vue file that vue-loader understands? The goal is to set breakpoints in visual studio code + separation of concerns + readability.



Oh, and this needs to work with typescript!

22 gold badges1212 silver badges2323 bronze badges. 2323 bronze badges. The second option is possible with a small tweak made in it. Nafiul IslamNafiul Islam. You’re browsing the documentation for v2.x and earlier.

For v3.x, click here. In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' }) to target a container element in the body of every page. This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views.