Search code examples
jsonnuxt.jsfetch-api

Create blog with Static json file with Fetch in Nuxt. How to use slug to get content of specific node?


Am trying to build a blog with a static json file in Nuxt(with http module).
Using the Nuxt 'Mountains' example as a base, for testing. I saved the api response as json in the 'static' folder.
(Example is here: https://nuxtjs.org/examples/data-fetching-fetch-hook)

Using 'fetch' to connect to the json in static folder on the Blog-page is working.
See: https://3udju.sse.codesandbox.io/blog

Have problems with using Fetch to identify the individual node/content.
See: https://3udju.sse.codesandbox.io/blog/mount-everest (No content here)

I have no idea how to recreate this - with the local Json file instead of the Api url:
https://api.nuxtjs.dev/mountains/${this.$route.params.slug}

And the _slug.vue file:
https://codesandbox.io/s/nuxt-http-fetch-static-json-3udju?file=/pages/blog/_slug.vue

Have tried to use a Filter on the Fetch. Have tried different querystrings as parameters on the .json, but its not working.

Have searched for :

  • get data from json slug id
  • get object based on slug in local json
  • fetch local json filter on slug

Watched several youtubes about Fetch but haven't found anything.

If anyone has a clue or can point me towards an solution, much appreciated.


Solution

  • Found a way to use a static json in the Content module in Nuxt. Example here:

    https://codesandbox.io/s/nuxt-http-fetch-static-json-3udju?file=/pages/cars/index.vue Also see 'cars.json' in 'Content' folder. Frontend : https://3udju.sse.codesandbox.io/cars (reused the mountains as cars ;-)