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.

Improve this question
5
  • 1
    Related stackoverflow.com/questions/47078315/… Commented Feb 7, 2018 at 18:46
  • 1
    @Veehmot I was looking for related questions but couldn't find any. Thanks, I'll take a look at it Commented Feb 7, 2018 at 18:46
  • 1
    There is a webpack plugin for that. Might help cut down on the work of handling it all yourself. github.com/pksunkara/vue-builder-webpack-plugin Commented Feb 7, 2018 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)? Commented Feb 7, 2018 at 21:31
  • @nettutvikler because I like the concept of single files components. and as an addition; my experience with webpack is very limited. .. Commented Feb 8, 2018 at 8:46

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.