vue.js 2 - extract html snipped of single file component into standalone file

Question

I'm wondering if there is a way to split a Single File Components file into multiple smaller ones.

What am I talking about? Let's look at this:

<template>
  ... 
</template>

<script>
  export default {
    name: 'my-component',
  };
</script>

<style scoped>
  ...
</style>

That is the way the typical vue.js single file component is built up. As you can see, there is a html -section (content of <template> tag), a javascript -section (content of <script> tag) and a css -section (content of style tag). I was wondering if it is possible to split all of those sections into single files. Let's call them my-component.css , my-component.es6 and my-component.html - all 'belonging' to my-component.vue .

I managed to extract the javascript and the css styling into standalone files like so:

<template>
  ...
</template>

<script src="./my-component.es6"></script>

<style scoped>
  @import './my-component.css';
</style>

This works just fine. Now I'm just left with the html -section. Is there a way to extract this one also?

Why?

I like to have a clear code separation and this is the only way to keep the 'code-mixing' to a minimum within the my-component.vue file.

Answer 1

The argument here is what is code separation. The author of Vue argues that having HTML, CSS and JS in one .vue file is separating the components code to their own place and keeping their related code together and is not relevant to 'separation of concerns'. It's talked about briefly in the docs here:

https://v2.vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns .

So you have 3 different choices:

1. Use .vue files as they are intended.
2. Use the webpack plugin (mentioned in other comment).
3. Build your components without using a .vue file however you will lose the ability to hot reload during development and you will have to use the html-loader plugin.

HTML:

<div id="example">
  <my-component></my-component>
</div>

JS:

// register
Vue.component('my-component', {
  template: require('my-component.html');
})

// create a root instance
new Vue({
  el: '#example'
})

Opinion: Just use the .vue file as shown in the docs. It will be easier to maintain, easier to find your code and you won't have to wrestle with webpack. Coming from an Angular world I found this a bit weird but I've learned to love it.