2

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
товіаѕ
  • 2,881
  • 4
  • 23
  • 53
  • 1
    Related https://stackoverflow.com/questions/47078315/how-to-load-external-html-file-in-a-template-in-vuejs – Jorjon Feb 07 '18 at 18:46
  • 1
    @Veehmot I was looking for related questions but couldn't find any. Thanks, I'll take a look at it – товіаѕ Feb 07 '18 at 18:46
  • 1
    There is a webpack plugin for that. Might help cut down on the work of handling it all yourself. https://github.com/pksunkara/vue-builder-webpack-plugin – skribe Feb 07 '18 at 19:28
  • Personally I like the opposite way - have all in one place, but yes, I can understand your wishes too. Why use single file components then - why not just go "old school" and write it seperately (and then evt. use Webpack or sth. to bundle if needed)? – nettutvikler Feb 07 '18 at 21:31
  • @nettutvikler because I like the concept of single files components. and as an addition; my experience with webpack is very limited. .. – товіаѕ Feb 08 '18 at 08:46

1 Answers1

4

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
Tom Headifen
  • 1,885
  • 1
  • 18
  • 35
  • 1
    I see. Separating a .vue component might not be intended by the docs, but it is an additional step of code quality improvement for me. Additionally, the benefit of having single file component in the first place is not lost by splitting it up into 3 files, the concept is just taken a step further. But I accept your answer, gave me a good idea on the situation – товіаѕ Feb 08 '18 at 08:51