0

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:

  • page a
  • page b

Parent:

  • page-mixins

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...

}
hga77
  • 81
  • 1
  • 8

2 Answers2

1

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>
tony19
  • 125,647
  • 18
  • 229
  • 307
Bakhtiyor Sulaymonov
  • 362
  • 3
  • 12
  • Thanks. But using events in this case is not a suitable solution in my opinion. I did something much simpler. I updated my initial post. – hga77 Dec 24 '18 at 19:31
  • Ah I see. So you needed to add some global methods to the project. You said that you couldn't use mixins in nuxt project. I think mixins can be added to nuxt project as Plugin: create mixins.js in plugins folder (add your global methods there) then connect it as plugin in nuxt.config.js. It should work – Bakhtiyor Sulaymonov Dec 26 '18 at 07:27
  • No I don't need global methods. NUXT has Pages built in. Pages are Vue components. I just needed to add a BasePage from which all Pages can inherit its methods. I just need to add inheritance to Pages by extending a base component. I did it my way which is easy and effective. – hga77 Dec 27 '18 at 10:45
1

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>
Florin Miu
  • 46
  • 2