Passing Data in asyncData Nuxt.js

Question

I'm new to nuxt.js and I want to ask if there is any way to pass data in asyncData. Here is the code.

    <script type="text/javascript">
  import axios from 'axios'
  export default {
    data(){
        return {
          sample: 'asdf',
          baseUrl: 'https://jsonplaceholder.typicode.com/posts/1'
        }
    },
    async asyncData ({ params }) {
      let { data } = await axios.get(this.baseUrl)
      return { title: data}
    }
}
</script>

I know you don't have access to this but is there a way to pass data. Thanks.

in the asyncData, look at this.baseUrl in axios.get(this.baseUrl) it's invalid. How can I pass it? Thanks. — Rbex
– Rbex, Commented Jul 7, 2018 at 17:03
you cant pass it from data. You can only use objects from context. Like params, or store. You can put anything in store and access it from asyncDAta — Aldarund
– Aldarund, Commented Jul 7, 2018 at 17:27
I see, I know now... so my global data need to pass in the store and it's accessible in the context.store or es6 { store }. Thanks.. — Rbex
– Rbex, Commented Jul 7, 2018 at 17:30

Aldarund · Accepted Answer · 2018-07-08 09:49:35Z

5

Usually this kind of configuration like baseurl defined in env vars in nuxt. Docs

  // nuxt.config.js
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }

Then you can access it anywhere via process.env e.g. in asyncData

async asyncData ({ params }) {
  let { data } = await axios.get(process.env.baseUrl)
  return { title: data}
}

But for baseUrl for axios you can just define it once e.g. in plugins/axios and then import from there

import axios from 'axios'

export default axios.create({
  baseURL: process.env.baseUrl
})

Or you can use @nuxt/axios module where u can set baseUrl as an configuration option

answered Jul 8, 2018 at 9:49

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

F.NiX Over a year ago

You can also access env directly asyncData({ env })

Collectives™ on Stack Overflow

Passing Data in asyncData Nuxt.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related