4

I already searched the whole internet for an answer to my question. No luck so far.

What I want to achieve: I have a Nuxt application running in Universal mode. It is something like a small social network where users can create their own profiles and share their work.

So I am working with dynamic routes (users/_id.vue) that fetch the params from the url and get the appropriate data from my database (firebase). So far so good.

I want to host it with a static host (Netlify or Zeit Now) and I know that dynamic routes can be rendered through the generate config. But that's not what I want. For this particular route I am fine with an empty shell where Async Javascript then hits the API and fills the shell with data. SEO is not important here since the profiles are behind auth anyways.

All I need is Nuxt generating a "catch all" file that then renders the user profile client side (users/martha or users/johndoe). Gridsome does this by rendering a _id.html out of the _id.vue file. Is there a way for Nuxt doing the same thing as well?

Thanks for helping me out here.

Moritz Laube
  • 219
  • 2
  • 9

1 Answers1

0

See this.

By default, Nuxt generate creates a file called 200.html.

If hosting on Netlify, you'll want to update your generate property like so:

export default {
  generate: {
    fallback: true, // Uses '404.html' instead of the default '200.html'
  }
}

GitHub Pages and Netlify recognize the 404.html file automatically, so setting generate.fallback to true is all we have to do!

I have no experience with Zeit, but I did find the following now.json sample here.

// inside now.json
{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

Most SPAs have assets to serve as well, so you should handle the filesystem before rewriting the path:

Hope that helps! If you have any other specific questions about Netlify I'd be happy to answer them, since I do have some production experience on their platform with Nuxt.

HMilbradt
  • 2,113
  • 7
  • 22