asyncData doesn't work when load from static

[hackuun]

For some reason this doesn't work

asyncData ({ params }) {
    return axios.get('data.json')
      .then((res) => {
        return { title: res.data.title }
      })
  }

How to load data from static folder?
I have JSON files there, where I want to manage content.

_{This question is available on Nuxt.js community (#c1661)}

[cretueusebiu]

You'll have to either provide the full url:

axios.get('http://localhost:3000/data.json')

Or load it in the mounted hook:

mounted () {
  axios.get('/data.json')
    .then(({ data }) => {
      return { title: data.title }
    })
}

[hackuun]

@cretueusebiu if I load it in mounted then it doesn't server render content! Is there any way to solve it? I want both - ssr and ability to modify content in builded app.

[cretueusebiu]

Use the full URL as in the first example.

[hackuun]

@cretueusebiu and conditionally replace url when build? I mean there will be one url in Dev and another in Prod, right?

[cretueusebiu]

Of course, you would use an env variable for the url. And maybe extract the code to a file where you have the api calls.

[hackuun]

If I use

asyncData ({ params }) {
    return axios.get('http://localhost:3000/data.json')
      .then((res) => {
        console.log(res)
        return { data: res.data }
      })
  }

Then I can't do npm run generate because Error: connect ECONNREFUSED 127.0.0.1:3000

[hackuun]

It shouldn't be separate server. I wan't this JSON file inside Nuxt app.

[cretueusebiu]

If you don't want to load it just import it as you do with js files:

import data from 'path/to/data'

[hackuun]

I tried that first. Then I can't edit file content. If I edit JSON file it doesn't have any effect to app.

[hackuun]

And this is strange behavior. Because Nuxt is copying JSON file into dist for some reason. Why it's doing that, if it doesn't consume it?

[hackuun]

I guess it's because JSON file is from static folder. But then this is not a solution for me, because requiring the JSON is merging it's data with app. I want it to be separate. But still server-rendered. Is this possible?

[lunelson]

I guess you either figured this out by now, or did something else; but I would try putting the file you want in your assets folder, rather than static, and import from there via webpack. I believe the contents of assets are tracked for changes...

[mootari]

I tried that first. Then I can't edit file content. If I edit JSON file it doesn't have any effect to app.

You can add custom watch paths to your nuxt config:

build: {
  watch: ['path/to/data']
}

A change to these files will trigger a rebuild and restart the server.

Note that Nuxt path prefixes (@, ~, etc.) in watch paths won't work: #2983

[Jones-S]

Same problem here. But no need for editing json files.
Just the requirement to load json files during nuxt generate with asyncData.

return axios.get('http://localhost:3000/data.json') does not work, as we know,
but what else could I use...?

[lunelson]

I had this working by simply using require to require the JSON file. Webpack takes care of it. If you need route params to know what file to require, you can do it inside the asyncData callback.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.