Where to store common component methods in #NUXT.JS

Question

Actually i want to know where to store common components methods in #NUXT.JS.

things which i have tried. --> Storing common code in middleware (its use-less) because according to my knowledge middleware is only capable of handling request and response to server.

methods: {

  // states methods.
  SwitchManager: function (__dataContainer, __key, __value) {
    // stand alone debugger for this module.
    let debug = __debug('computed:_3levelSwitch')
    // debug showing function loaded.
    debug('(h1:sizeCheck) creating switch..')
    // switch.
    switch (__key) {
      // fake allow set value to true of given key
      default:
        this[__dataContainer][__key][__value] = true
        break
    }
    return this[__dataContainer][__key][__value]
  },
  SizeCheck: function (__size) {
    // stand alone debugger for this module.
    let debug = __debug('tags:p')
    // debug showing function loaded.
    debug('(p:sizeCheck) checking..')
    // init switch.
    this.SwitchManager('pill', 'size', __size)
  },
  StateCheck: function (__state) {
    // stand alone debugger for this module.
    let debug = __debug('tags:h1')
    // debug showing function loaded.
    debug('(h1:sizeCheck) checking..')
    // init switch.
    this.SwitchManager('pill', 'state', __state)
  }
},
created () {
  // h1 tag size check
  this.SizeCheck(this.size)
  this.StateCheck(this.state)
}

Solution

I go for mixins like with plain vue.js. Only difference - for global mixins - I include them as a plugin, but first:

Non global mixins

I would create an extra folder for my mixins. For example in a /mixins/testMixin.js

export default {
  methods: {
    aCommonMethod () {}
  }
}

Then import in a layout, page or component and add it via the mixins object:

<script>
  import commonMixin from '~/mixins/testMixin.js
  export default {
    mixins: [commonMixin]
  }
</script>

Global mixins

For example in a new file plugins/mixinCommonMethods.js:

import Vue from 'vue'

Vue.mixin({
  methods: {
    aCommonMethod () {}
  }
})

Include that file then in nuxt.config.js

plugins: ['~/plugins/mixinCommonMethods']

After that you would have the method everywhere available and call it there with this.commonMethod(). But here an advice from the vue.js docs:

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above. It’s also a good idea to ship them as Plugins to avoid duplicate application.

Inject in $root & context

Another possibility would be to Inject in $root & context

Comments

[Soleno]

Was my answer of any use? Let me know if anything is unclear.

[Saba Ahang]

any idea how to add multiple related mixins that can be imported separately in the same mixin js file?

[Marc]

fails for me. "this.$globaFunction" is not a function in the component.

[tomasz_kusmierczyk]

How would you import NUXT 'context' object in exemplified global mixin: plugins/mixinCommonMethods.js ?

[Anees Hameed]

Use this.$nuxt.globaFunction

[Soleno]

@marc and @anees-hameed for using this.$globalFunction you need to inject your function first. See the link I shared in the bottom.

[kissu]

For info, mixins are deprecated in Vue3: v3.vuejs.org/guide/mixins.html#drawbacks