Proposal: vue-template-extension-loader. A Webpack loader for extending .vue component templates.
One thing Vue component templates don’t offer is inheritance. It’s not something that’s matters in small apps, but it can be an limitation in enterprise apps.
Imagine you’re building an app with many components, but most have similar templates with only minor variations. How do you keep the markup DRY
One possibility is to combine all the variations into a single “master” component. Bu this will require lots of props and v-ifs to provide the necessary variations at runtime.
Another possibility is to use slots and have a parent component determine the variations. But this can be a poor design if it forces you to separate single units of functionality across multiple components with separate data models unnecessarily.
An interesting solution is to use an HTML preprocessor that supports template extension, like Pug. You first create an abstract “base” template in a Pug file and have other components extend this template, which Pug allows. I wrote about this method in a blog post
The Pug method is not perfect, though. It solves the problem of keeping markup DRY, but it requires an architecture that clashes with the natural design of single-file components.
I think the means of an even better solution have come with Vue Loader 15 and support for custom blocks. But rather than provide an explanation here, I’ll point you to the proposal on GitHub
If you’re developing enterprise Vue apps and have a horse in this race, I’d like to hear your opinion. I’d also like to hear any thoughts on the viability of this approach.