CODEWITHSUNDEEP
vuejs2nuxt.js
hga77
hga77

Reputation: 111

How to extend Nuxt page components?

I am building a website with NUXT.

I have setup the page components in the Pages folder. I'd like to have a BasePage component, and then extend this base component for new pages that would inherit common methods that are within the base component.

I am trying to use mixins but it's not working

For example I have:

Children:

Parent:

The mixin (or parent) has a method, initPage().

I want to also have the same method, initPage(), in the children. When I call initPage() from a child page, I need this method to run from parent and child. The order is parent then child.

Basically I am trying to do in NUXT what you would typically do in an OOP language where you inherit a base class then call super.initPage() from within the child class method.

I am trying to use optionMergeStrategies.methods but with no luck. Please help.

Thanks

UPDATE:

I am sure it is possible to make this work using a custom merge strategy (using optionMergeStrategies option). I tried but don't get how it works. So I needed another solution. Well, all I did is, in the mixin (or parent) I made the method name _initPage() (notice the underscore), while in the page components (the children) I kept the name initPage (without underscore). Now all I need to do is, from a child component, and from within the initPage() method, I just call the parent method by using _initPage(). This behaves exactly like calling super.initPage(). This can be applied to as many methods as you need, just add an underscore within the mixin (or parent) methods, and call them from the child. I named the mixin file, pageMixins. This mixin has many inherited methods such as _initPage, _animateIn, _animateOut, _dispose, loadPage... etc.

Parent (mixins file):

_initPage: function() {

  // code...

}

Child (page component)

initPage: function() {
  this._initPage();

  // code...

}

Upvotes: 0

Views: 5857

Answers (2)

Bakhtiyor Sulaymonov
Bakhtiyor Sulaymonov

Reputation: 382

For this it is better to use Vuejs Parent-child communication. Child emits (this.$emit('yourEventName')) an event to parent and parent listens that (<child-component @yourEventName='initPage'>) event than calls it's corresponding function (in parent component). Then child component continues running statements in it's function (initPageInChild () { this.$emit('yourEventName'); // after parent done run other statemnts here }. You can see this answer as well https://stackoverflow.com/a/40957171/9605654 (really good explained)

const mainVue = new Vue({}),
        parentComponent = new Vue({
          el: '#parent',
          mounted() {
            this.$nextTick(() => {
              console.log('in parent')
              // in nuxt instead of mainVue use this 
              mainVue.$on('eventName', () => {
                this.parentMsg = `I heard event from Child component ${++this.counter} times..`;
              });
            })
          },
          data: {
            parentMsg: 'I am listening for an event..',
            counter: 0
          }
        }),
        childComponent = new Vue({
          el: '#child',
          methods: {
          initPageInChild: function () {
            mainVue.$emit('eventName');
            this.childMsg = `I am firing an event ${++this.counter} times..`;
          }
        },
        data: {
          childMsg: 'I am getting ready to fire an event.',
          counter: 0
        }
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="parent">
  <h2>Parent</h2>
  <p>{{parentMsg}}</p>
</div>

<div id="child">
  <h2>Child</h2>
  <p>{{childMsg}}</p>
  <button @click="initPageInChild">Child Call</button>
</div>

Upvotes: 1

Florin Miu
Florin Miu

Reputation: 56

If this is of any interest here's a solution to extending a Nuxt.js page component

In my case I have a page to add an item and a page to edit an existing item and they are similar. However due to the routing mechanism of Nuxt, I need to have 2 files for it. So the add.vue file looks like this

<script>
import EditItemPage from './_id/edit'

export default {
  extends: EditItemPage 
  // you can add `data()`, `methods`, `computed` below this line
}
</script>

Upvotes: 1

Related Questions