5

Can I call mixin function from asyncData() method of the page component with Nuxt.js?

My code:

<template>
  ...
</template>
<script>
   import api from "@/plugins/api/api.js"

   ...

   export default {

      ...

      async asyncData(context) {
          ...
          context.apiMethodName()
          ...
      }

      ...
   }

   ...
</script>

api.js

import Vue from 'vue'
import API from '@/assets/js/api'

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

5 Answers 5

7

You cant call vue methods from withing asyncData, because asyncData executed before vue have an instance.

You can extract method into simple js function and call it both in asyncData and your vue method, but keep in mind that in asyncData you wont be able to access vue instance properties and other methods

7
  • You CAN call a method from asyncData. See my answer.
    – Igor Popov
    Feb 19, 2022 at 1:28
  • @IgorPopov not true. You are not calling method of component from asyncData. You just calling external function without access to component this.
    – Aldarund
    Feb 20, 2022 at 20:58
  • What makes you unable to write asyncData in a page component? However according to the documentation while running asyncData function Vue instance is not yet created. So if we are talking about "this" - it doesn't exist yet. And you forget about the purpose of asyncData: this is a hook that can only be placed on page components, it blocks route navigation until it is resolved and must return data.
    – Igor Popov
    Feb 21, 2022 at 12:08
  • Meanwhile, the key question from the author is: Can I call mixin function from asyncData? And the answer is YES, you can. Author did not ask to call a "method of component", but "mixin function". In the first comment, I made a mistake. I meant to call the function from mixin from a separate file.
    – Igor Popov
    Feb 21, 2022 at 12:11
  • @IgorPopov the question was about calling mixin function from asyncData. Thats it. Your solution is just call external function which you obv can do from anywhere and it has nothing to do with quesiton. What you propose isnt calling mixin function. Mixin is a specific thing is vue, not some random external function in other file.
    – Aldarund
    Feb 21, 2022 at 14:49
2

I see it is quite late for the answer, but it is possible.

template.vue

<template>
...
</template>
<script>
  import api from "~/mixins/api/api"
  ...

  export default {
    ...

    async asyncData({context}) {
      ...
      // You don't need to use context
      // You have to use "api" like this:
      const collection = await api.methods.apiMethodName()
      ...

      // bear in mind you should return data from this function
      return {
        collection,
        ...
      }
    }
    ...
  }
  ...
</script>

~/mixins/api/api.js

const api = {
  ...
  methods: {
    async apiMethodName() {
      ...
      // better use here try / catch or Promise with then / catch
      const data = await do_something()
      ...

      return data
    }
    ...
  }
  ...
}

export api

A similar approach was tested with stack VueJS + NuxtJS and it is working on the live website https://elfinforce.com.

0

You can inject mixin into app, see https://nuxtjs.org/guide/plugins#inject-in-root-amp-context

1
  • You don't need any injection. You CAN call a method from asyncData. See my answer.
    – Igor Popov
    Feb 19, 2022 at 1:28
0

you can access global mixin methods like this:

app.router.app.gloablMethod()

so simple!

-1

You need to abandon using mixins and inject your methods instead.

First; Replace your mixin method to be

export default ({ app }, inject) => {
  inject('apiMethodName', () => {
    return 'some data!';
  })
}

Then, inside asyncData() method, call apiMethodName() function like so

async asyncData(context) {
  context.app.$apiMethodName();
})
1
  • That's not true. It is possible.
    – Igor Popov
    Feb 19, 2022 at 0:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.