Nuxt asyncData Error when deploying as static

Developing with Prismic
1

Hi All,

I was just reading a post about the ability to now serve nuxt in a static mode. When trying this on my current project, I am having some issues when the site is fetching data.

Currently, I am using asyncData to grab my data via Prismic, to then populate the page. This looks like this:

async asyncData({ $prismic, error }) {
try {
  const about = await $prismic.api.query(
    $prismic.predicates.at("document.type", "about")
  );

  return {
    doc: about.results[0]
  };
} catch (e) {
  error({
    statusCode: 404,
    message: "Page not found"
  });
}
}

When clicking to the about page in this case (from a nuxt-link) I hit the 404 page, but refreshing the page when the URL is on the about page gives me the correct data and display.

For reference, I am using the nuxt.js sample from Prismic that has been modified with my data. I am also deploying to Netlify, if that makes a difference.

Any ideas?

Thank you much!

2

I could be wrong, but I think you need this in your nuxt.config.js

generate: {
  fallback: '404.html'
}

Or if you’re using a Nuxt version > 2.13

export: {
  fallback: true,
},
5

Hey Kolby,

Welcome to the community!

Do you have a link to your github repo for this so we can check it out?

Thanks.

6

Hi Phil,

I sure do! Here’s the link to the repo: https://github.com/kolbykruger/kolby-kruger

It’s still a very in progress personal project.

I am fairly new to using Nuxt, but so far it’s been a blast to use with Prismic!

Thank you for your assistance.

7

@kolbykruger Remove the static and crawler modules. You don’t need 'em in newer versions of nuxt.

Cool website btw!

2 Likes
8

Thank you @juliandreas, that seems to have done the trick!

I appreciate it!

9

Good spot Julian!

We’ll be updating all our sample projects to full static very soon.

1 Like