0

I'm trying to refactor some commonly used functions into a globally available Util plugin for my app. I followed the instructions from the docs and this question, but I'm not sure how to use it the functions in the template and Vue keeps complaining about an undefined method. Ideally I just want to call isEmpty from any child component.

util.js

export default {
  install(Vue, options) {
      Vue.isEmpty = function (object) {
        return false // dummy function for now to check if method works
      }
  }
}

Also tried:

Util.install = function (Vue, options) {
  Vue.isEmpty = function () {
    ...
  }
  // this doesn't work either
  // Vue.prototype.$isEmpty = function (object) {
  // return false
  //  }
}

main.js

import util from './components/shared/util.js'
import comp from './components/shared/myComponent.js'
// Vue.component('util', util) this doesn't work
Vue.use(util)

const app = new Vue({
...
components: {
    comp
}).$mount('#app')

None of the below work. The error thrown is TypeError: Cannot read property 'isEmpty' of undefined

component template

<p v-if="util.isEmpty(license)" class="margin-0">N/A</p>
<p v-if="Vue.isEmpty(license)" class="margin-0">N/A</p>
<p v-if="isEmpty(license)" class="margin-0">N/A</p>
tony19
  • 125,647
  • 18
  • 229
  • 307
blackbird
  • 1,129
  • 1
  • 23
  • 48

1 Answers1

1

You are almost done, are missing of prototype. Try this:

utils.js

export default {
  install(Vue, options) {
      Vue.prototype.isEmpty = function (object) {
        return false // dummy function for now to check if method works
      }
  }
}

Component

<p v-if="isEmpty(license)" class="margin-0">N/A</p>

Here a example: https://codesandbox.io/s/vue-template-tdx00

Robson Braga
  • 432
  • 3
  • 8