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 ponent as an argument, how can I access things like app or installed plugins like store, i18n in a script file like the one above?

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 ponent as an argument, how can I access things like app or installed plugins like store, i18n in a script file like the one above?

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow asked Nov 14, 2018 at 14:48 JohanJohan 35.2k6262 gold badges189189 silver badges306306 bronze badges 4

• Please, elaborate why default plugin format doesn't work for you? export default ({ app, store }) => { /* plugin code */ } – aBiscuit Commented Nov 14, 2018 at 15:33
• @aBiscuit Because the script file is not a plugin – Johan Commented Nov 14, 2018 at 15:41
• Where does doStuff is expected to be called from? Components, store or other places? This may help to determine better approach of implementation. – aBiscuit Commented Nov 14, 2018 at 17:00
• @aBiscuit Sorry for not being clear about that. Mainly from ponents. I would like to avoid doStuff(this), doStuff.call(this) etc. – Johan Commented Nov 14, 2018 at 18:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

1) Using mixins

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

customHelpers.js

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

ponent.vue

// ponent.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 ponent:

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

3) Using bined 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.