# Extending nested panel components not possible

**URL:** <https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638>\
**Category:** Questions\
**Tags:** v3\
**Created:** [February 2, 2019, 6:41pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638 "2019-02-02T18:41:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![moeli](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moeli/32/8964_2.png) [@moeli](https://forum.getkirby.com/u/moeli)\
**Post date:** [February 2, 2019, 6:41pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/1 "2019-02-02T18:41:32Z")

</div>

I am trying to customize parts of the pages section. To do so, want to extend components that are used in `k-pages-section`, e.g. `k-empty`. In my test case is also a files section included.

```auto
# Blueprint
title: Test
sections:
  pages_section:
    headline: Pages Section
    type: pages
  files_section:
    headline: Files Section
    type: files

```

To extend the components is no problem.

```auto
// index.js
panel.plugin('my/plugin', {
    components: {
        'k-empty': {
            extends: 'k-empty',
            template: `<p>lalala</p>`
        },
        'k-headline': {
            extends: 'k-headline',
            template: `<p>headline</p>`
        }
    },
});

```

Instead of the original template “lalala” and “headline” are displayed.

![section-overwritten](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/3/39dbbf7a672ca088d57e2d0aa80354b7e736998d.png)

But when I want to extend the pages section at the same time, the other component changes are ignored **inside** the pages section.

```auto
// index.js
panel.plugin('my/plugin', {
    components: {
        'k-empty': {
            extends: 'k-empty',
            template: `<p>lalala</p>`
        },
        'k-headline': {
            extends: 'k-headline',
            template: `<p>headline</p>`
        },
        'k-pages-section': {
            extends: 'k-pages-section'
        }
    },
});

```

- `empty` and `headline` for the files section are correctly overwritten. But not for the pages section.
- changing the order of extended components (e.g. extend `k-pages-section` first) has no effect.

 ![pages-section](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/c/c5eb25d0434909c24f5a2ce9153469dc6b71c5e0.png)

Console Output:

```auto
Plugin is replacing "k-empty" app.js:1:236187
Plugin is replacing "k-headline" app.js:1:236187
Plugin is replacing "k-pages-section" app.js:1:236187

```

It looks like components nested inside the pages section are not overwritten…why?

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 2, 2019, 7:45pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/2 "2019-02-02T19:45:34Z")

</div>

Sounds like a bug to me. Could you please open an issue on GitHub?

> **[getkirby/kirby](https://github.com/getkirby/kirby/issues)**
>
> Kirby's core application folder. Contribute to getkirby/kirby development by creating an account on GitHub.

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![moeli](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moeli/32/8964_2.png) [@moeli](https://forum.getkirby.com/u/moeli)\
**Post date:** [February 2, 2019, 7:58pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/3 "2019-02-02T19:58:18Z")

</div>

> <https://github.com/getkirby/kirby/issues/1438>

---

<div class="post-metadata">

**Author:** ![rasteiner](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/rasteiner/32/4788_2.png) [@rasteiner](https://forum.getkirby.com/u/rasteiner)\
**Post date:** [February 12, 2019, 10:15am UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/4 "2019-02-12T10:15:02Z")

</div>

Depending on whether you actually need to **extend** `k-empty` and `k-headline`; if you don’t, you might get away with something like this:

```auto
// index.js
const empty = {
  template: `<p>lalala</p>`
};

const headline = {
  template: `<p>headline</p>`
};

panel.plugin('my/plugin', {
  components: {
    'k-pages-section': {
      extends: 'k-pages-section',
      components: {
        'k-empty': empty,
        'k-headline': headline
      }
    }
  },
});

```

This way you override the components **only** for the pages section, which isn’t necessarily bad if what you want is to “customize parts of the pages section”.

If you need to also extend (and not only override) k-empty and k-headline it becomes more complicated

---

<div class="post-metadata">

**Author:** ![moeli](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moeli/32/8964_2.png) [@moeli](https://forum.getkirby.com/u/moeli)\
**Post date:** [February 12, 2019, 1:38pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/5 "2019-02-12T13:38:51Z")

</div>

That’s an excellent solution to redefine components locally.

I am still looking for a solution to extend them. E.g. If I wanted to adjust the [page create dialog](https://github.com/getkirby/kirby/blob/master/panel/src/components/Dialogs/PageCreateDialog.vue) only in my custom pages section, I’ll have to copy a lot of code.

---

<div class="post-metadata">

**Author:** ![rasteiner](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/rasteiner/32/4788_2.png) [@rasteiner](https://forum.getkirby.com/u/rasteiner)\
**Post date:** [February 12, 2019, 2:04pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/6 "2019-02-12T14:04:06Z")

</div>

I guess you need to either wait for this to be fixed or go the _“differently supported”_ way:

```auto

// index.js
const empty = {
  mounted: function() {
    console.log('Hello');
  }
};

const headline = {
  mounted: function () {
    console.log('World');
  }
};

const pages = {
  mounted: function() {
    console.log('extending stuff like a pro here')
  },
  components: {
    'k-empty': empty,
    'k-headline': headline
  }
}

panel.plugin('my/plugin', {
  use: [
    function(Vue) {
      empty.extends = Vue.options.components['k-empty'];
      headline.extends = Vue.options.components['k-headline'];
      pages.extends = Vue.options.components['k-pages-section'];

      Vue.component('k-pages-section', pages);
    }
  ],
});

```

try this.

Everything will look normal (because you extend the components), but you’ll see from the console that **your** components are actually used. (I used the mounted hook just for demo purposes).

`use` plugins get raw access to the Vue “vm”, so you can do pretty much anything. But you lose all safety nets and features that the kirby wrapper code offers you.

---

<div class="post-metadata">

**Author:** ![moeli](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moeli/32/8964_2.png) [@moeli](https://forum.getkirby.com/u/moeli)\
**Post date:** [February 12, 2019, 2:25pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/7 "2019-02-12T14:25:13Z")

</div>

That’s what I was looking for. Awesome.

> [@rasteiner](#):
>
> But you lose all safety nets and features that the kirby wrapper code offers you.

Is there more than [this](https://github.com/getkirby/kirby/blob/master/panel/src/config/plugins.js)?

---

<div class="post-metadata">

**Author:** ![rasteiner](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/rasteiner/32/4788_2.png) [@rasteiner](https://forum.getkirby.com/u/rasteiner)\
**Post date:** [February 12, 2019, 2:38pm UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/8 "2019-02-12T14:38:37Z")

</div>

> [@moeli](#):
>
> Is there more than [this](https://github.com/getkirby/kirby/blob/master/panel/src/config/plugins.js)?

I don’t think there is 🙂

---

<div class="post-metadata">

**Author:** ![steirico](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/steirico/32/5466_2.png) [@steirico](https://forum.getkirby.com/u/steirico)\
**Post date:** [February 22, 2019, 8:54am UTC](https://forum.getkirby.com/t/extending-nested-panel-components-not-possible/12638/9 "2019-02-22T08:54:50Z")

</div>

Hi

I want to extend `k-page-create-dialog` as well and having it available in all other components.

Applying your suggestions led me to the following solution:

```javascript
const PAGE_CREATE_DIALOG = {
  extends: 'k-page-create-dialog',
  // place custom code here...
}

panel.plugin('my/plugin', {
  components: {
    'k-page-create-dialog': PAGE_CREATE_DIALOG
  },
  use: [
    function(Vue) {
      const
        VUE_COMPONENTS = Vue.options.components;
      
      Object.keys(VUE_COMPONENTS).forEach(componentName => {
        const COMPONENT = {
          components: {
            'k-page-create-dialog': PAGE_CREATE_DIALOG
          },
          extends: VUE_COMPONENTS[componentName]
        };
        Vue.component(componentName, COMPONENT);
      });
    }
  ]
});

```

Not sure if this will work out in any case. But so far it works for me.

Thanks for all valuable hints!