CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Johan
Johan

Reputation: 35194

Access Nuxt plugins in .js files

Let's say that I have a script file, foo.js:

function doStuff() {
   // how to access store and other plugins here?
}

export default { doStuff }

Without passing the calling component as an argument, how can I access things like app or installed plugins like store, i18n in a script file like the one above?

Upvotes: 3

Views: 5349

Answers (1)

aBiscuit
aBiscuit

Reputation: 4732

There are multiple ways to call custom function with this being a reference to the component it was invoked in.

1) Using mixins

Custom function can be declared as a method and used within component via this.customMethod.

customHelpers.js

const customHelpers = {
  methods: {
    doStuff () {
      // this will be referenced to component it is executed in
    }
  }
}

component.vue

// component.vue
import customHelpers from '~/mixins/customHelpers'
export default {
  mixins: [customHelpers],
  mounted () {
    this.doStuff()
  }
}

2. Using context injection

Declare custom plugin:

plugins/customHelpers.js

import Vue from 'vue'

Vue.prototype.$doStuff = () => { /* stuff happens here */ }

And use plugin in nuxt.config.js

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

This makes method available inside every component:

export default {
  mounted () {
    this.$doStuff()
  }
}

3) Using combined injection

Same as method 2, but injection will be also accessible inside fetch, asyncData and inside store modules. Bindings to this may vary, since context is not available everywhere.

plugins/customHelpers.js

export default ({ app }, inject) => {
  inject('doStuff', () => { /* stuff happens here */ })
}

And use plugin in nuxt.config.js

export default {
  ..., // other nuxt options
  plugins: ['~/plugins/customHelpers.js']
}

Usage example:

export default {
  asyncData ({ app }) {
    app.$doStuff()
  }
}

Please, refer to documentation for more examples.

Upvotes: 5

Related Questions