[{"data":1,"prerenderedAt":101},["ShallowReactive",2],{"blog-nuxt-api-integration":3},{"id":4,"title":5,"body":6,"date":89,"description":90,"extension":91,"meta":92,"navigation":93,"path":94,"seo":95,"stem":96,"tags":97,"__hash__":100},"blog\u002Fblog\u002Fnuxt-api-integration.md","Planning the interface between a Nuxt frontend and an API",{"type":7,"value":8,"toc":80},"minimark",[9,13,18,21,24,28,31,34,38,50,53,57,60,63,67],[10,11,12],"p",{},"My work includes Nuxt applications with Fastify, PostgreSQL, and Prisma, as well as frontend work integrating REST APIs. These are the questions I recommend settling before connecting a screen to its backend.",[14,15,17],"h2",{"id":16},"describe-the-screens-data-contract","Describe the screen's data contract",[10,19,20],{},"Start with what the user needs to see and do. For a scheduling screen, that might include a list of events, the currently selected event, and the fields needed to create or edit it. Agree on required fields, nullable values, identifiers, and the format of errors.",[10,22,23],{},"TypeScript types help communicate that contract inside the frontend. They do not validate a network response at runtime. When data comes from outside the application's trust boundary, decide where it will be validated and how invalid responses will be handled.",[14,25,27],{"id":26},"design-more-than-the-successful-response","Design more than the successful response",[10,29,30],{},"A screen needs useful behavior while data is loading, when the result is empty, and when a request fails. An empty list is not the same as an unavailable service. Give each state a clear message and an appropriate next action.",[10,32,33],{},"For writes, think through repeated clicks and retries. Disable duplicate submissions while a request is pending, and work with the backend on safe retry behavior. The user should be able to tell whether their action succeeded before trying it again.",[14,35,37],{"id":36},"choose-where-the-request-should-run","Choose where the request should run",[10,39,40,41,45,46,49],{},"Nuxt can render pages on the server as well as in the browser. For initial page data, its ",[42,43,44],"code",{},"useFetch"," and ",[42,47,48],{},"useAsyncData"," composables support transferring server-fetched data into the client payload. This avoids treating every initial request as a browser-only concern.",[10,51,52],{},"Keep private API credentials in server-only code and configuration. An authenticated screen also needs an explicit plan for how the server obtains the user's session. Never put a secret in public runtime configuration just to make a browser request easier.",[14,54,56],{"id":55},"verify-the-complete-interaction","Verify the complete interaction",[10,58,59],{},"Check a direct page load and navigation from another page. Exercise an empty response, an expired session, a failed request, and a successful mutation. Confirm that updated data appears where the user expects it and that an error does not leave the interface in an ambiguous state.",[10,61,62],{},"These checks connect the API contract to the actual product experience. They are useful whether the backend is Fastify or another service: the frontend still needs to present a reliable account of what happened.",[14,64,66],{"id":65},"further-reading","Further reading",[68,69,70],"ul",{},[71,72,73],"li",{},[74,75,79],"a",{"href":76,"rel":77},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fdata-fetching",[78],"nofollow","Nuxt documentation: Data fetching",{"title":81,"searchDepth":82,"depth":82,"links":83},"",2,[84,85,86,87,88],{"id":16,"depth":82,"text":17},{"id":26,"depth":82,"text":27},{"id":36,"depth":82,"text":37},{"id":55,"depth":82,"text":56},{"id":65,"depth":82,"text":66},"2026-09-27","Practical considerations for Nuxt API integration: data contracts, loading and error states, server rendering, and keeping secrets on the server.","md",{},true,"\u002Fblog\u002Fnuxt-api-integration",{"title":5,"description":90},"blog\u002Fnuxt-api-integration",[98,99],"nuxt","api","02LWelVhondNXN7JcLuqwpgR4Oh8D8aEKayuvt5TDrA",1791287285133]