Vue-loader: "components want vary templates" or what about is few templates into .vue file with hot reloading?

[ibyteyou]

What problem does this feature solve?

#418

let's imagine an abstract situation when:

1. component script has 1-3 functions
2. component template has 10 tabs which use almost the same functions from component

We can't use include ./tab-1.pug, because process editing of file unbearable without hot reloading.
We can't use components system, because between original parent and needed child may be n-count any ancestors. And we will need use big deep paths as $parent.$parent.$parent or excess props.
A system in which 10 elements within themselves have similar variables and functions looks cumbersome.

simple example:

<template lang="pug">
  wrapper-content(name="settings")
    el-scrollbar
      el-tabs(v-model="tabActive" wrap-class="height-screen" fixed no-scrollbar)
        el-tab-pane(label="Основные" name="basic")
          include ./tab-basic
        el-tab-pane(label="A1" name="a1")
          include ./tab-a1
        ...
        el-tab-pane(label="Z10" name="z10")
          include ./tab-z10
</template>

End user experience concludes in situations, when components needs in interchange of templates which has convention of using functionality.
I suggest the using "the template in template" with supporting props src ... and lang (if it's realistic).
It's will be perfect for components, which have default theme, can change theme and ready for customization.

What does the proposed API look like?

<template lang="pug">
  wrapper-content(name="settings")
    el-scrollbar
      el-tabs(v-model="tabActive" wrap-class="height-screen" fixed no-scrollbar)
        el-tab-pane(label="Основные" name="basic")
          template(src="./tab-basic")
        el-tab-pane(label="A1" name="a1")
          template(src="./tab-a1")
        ...
        el-tab-pane(label="Z10" name="z10")
          template(src="./tab-z10")
</template>

[ghost]

Hi, maybe we can try another way to resolve this problem.

I wrote a pre-loader for your issue. See here. Hope this helps.

[ibyteyou]

@HaoyCn it's works! good job!

[ghost]

My pleasure. :P

[ibyteyou]

@HaoyCn what do you think, vue-loader must have it? Or should I close the issue?

[ghost]

@patriciussanctus I don't think that vue-loader must contain this feature cuz we can already implement it using the proposed apis like loaders and preLoaders. After all, vue-loader is too heavy already.