Extend template of a component

Hi. I have a component that I would want to extend. I would also want to append something to the template, similar to the way “slot” works. I was thinking about just passing the template in a variable to the component that I was extending but when I do that it, the template in the variable loses all the vue functionality like v-if . Any idea of how can I accomplish this? Thanks

It is possible to extend one component’s template to another with a bit of trickery. I use Pug to do this because it offers good template inheritance options.

First, put the template you want to extend into a separate file e.g. BaseComponent.pug.

Then in your base component, include it:

<template lang="pug">
  include BaseComponent.pug
</template>

In the sub component you can simply extend it:

<template lang="pug">
  extends BaseComponent.pug
    block content
      ....
</template>

I’ve written about this idea more extensively on my blog if you’re interested.

1 Like

Check my comment here on how I deal with this:

What I do to extend my components templates is use the “extends” option and instead of using a template, I specify overrides for each slots I want to change (i don’t allow creating new slots and that’s enough for my needs). This can be done using JS files, but could not with VUE files since they are pre-compiled. However, I think it may be possible using a functional component…

I can share an helper and some code if someone is interested