How to use JSON Crawler in Nuxt app?

Support
,
#1

Little bit out my depth here, confused on how to implement a JSON crawler for my nuxt storefront. My products are generated dynamically from API responses, so HTML crawler is out the question. I’ve read the docs, how do I implement something that returns Content-Type application/json and where?

#2

I forgot to mention that I am developing locally using ngrok at the moment. With only Strapi as my backend that feeds data via API to my Nuxt front-end.

#3

if you your nuxt app is ssr then html crawler should work.
if it’s SPA then you can create an API endpoint link that returns the required data. make sure to add the api domain/link to your dashboard as well as your button.

#4

Hey @Kian thanks for replying. My target is SSG actually, looking to host the front-end on Amplify and backend seperately. I’m not sure on an approach, what do I populate the data-item-url with? Any ideas on a logic approach? For both the purposes of testing locally and having it hosted on Amplify?

For localhost I’m thinking I could:

  1. ngrok both the Strapi localhost and Front-end localhost

  2. Use the ngrok Strapi URL as the API endpoint, in the created method (before the DOM is rendered) of my single product component in the Nuxt app, write a PUT method and write the required JSON to a JSON field on the product which gets stored in the Strapi DB, have both data-item-url and the URL in the JSON be the ngrok URL i.e. ngrok.example/api/products/1…not sure how I would target the JSON field name specifically in data-item-url?

  3. As the data-item-url would be the same as the url in the JSON…this would work? If I have the Strapi Ngrok URL in the dashboard too? Not sure how this would get interpreted as content-type application/json

Assuming I’d be able to just swap the ngrok URLs for production URLs once hosted and it would work the same?

I’m just trying to get some test orders in the dashboard created as I need to build some other things based on the back of that. Any help is appreciated, I can share product structure/files etc.

I’m not sure having an endpoint in strapi will work because of how the responses are nested in data and attributes objects. i.e.:

image

I can’t make it dump the contents of snipcartCrawl without the data and attributes objects nested.

Thanks.