Parcel: Vue SFC code splitting

[SteffenL]

🙋 feature request

I would like to be able to split a Vue Single File Component (SFC) into separate files:

• Template
• Script
• Style

This is briefly documented here: What About Separation of Concerns?

🤔 Expected Behavior

The script/style file should be built by Parcel.

😯 Current Behavior

I have tried the method documented on the link above, but the script/style file is not built by Parcel, and it is not included in the output.

💁 Possible Solution

I believe the solution is either obvious or someone will know better than I do.

When a script tag has a src attribute, then the script file (JavaScript, TypeScript, etc) should be built by Parcel. I am not sure if the embedded script should be ignored in this case.

When a style tag has a src attribute, then the style file (CSS, LESS, SASS/SCSS, etc) should be built by Parcel. I am not sure if the embedded styles should be ignored in this case.

🔦 Context

I started using Parcel, Vue.js and vue-router recently, and I organize my Vue components as Single File Components (SFC) with the template, script and styles in these *.vue files due to its simplicity. I do not know the best practices, but as some of my *.vue files are growing in length, I find it more inconvenient to navigate between the template/script/style sections.

I also see no reason to not support this feature because it is documented usage of Vue.js.

If there are no good alternatives, then I also see no reason to not support this feature, because separation is oftentimes a good thing.

Different people can work on the template, script and styles without also crossing the other "layers".

💻 Examples

Taken from What About Separation of Concerns?:

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

my-component.vue contains mostly the template; ./my-component.js contains the script; ./my-component.css contains the styles.

[Hammster]

Another bad thing about .vue files is that it break a lot of tooling, for example certain functions of intelisense in VScode. For anyone who want a solution now, you can do something like this.

<script>
  import MyComponentScript from './my-component-script.js'
  export default MyComponentScript 
</script>

<style lang="scss">
  @import './my-component-style.scss';
</style >

<templatelang="pug">
  include my-component-template.pug
</template>

[AlexGustafsson]

It's been the better part of a year since this was first posted. Is there any update on this?

By the way, a slight simpler way writing what's mentioned above is:

<script>
  export {default} from './script.js';
</script>

[Neefay]

After doing a lot of research, I've come up with a structure that has working HMR, separated files, and doesn't make me feel suicidal every time I look at it. I hope it helps.

[henriquehbr]

Any solution on this? i'm having the same issue

[BlueskyFR]

Any update on this?
I am trying to setup my project using vue and I was very surprised that

<style src="./app.scss" lang="scss"></style>

doesn't work in my App.vue file :-/

This is part of the Vue documentation and Webpack does support it, so why doesn't Parcel support it?
Also, I really do think that a warning about this has to be written on the vue section of the parcel website, as I searched for hours before finding this issue.