[{"data":1,"prerenderedAt":378},["ShallowReactive",2],{"document-library-menu":3,"document-content--docs-technology-nuxt-docs":58,"document-library-links--docs-technology-nuxt-docs":373},[4,8,12],{"title":5,"path":6,"stem":7,"children":-1},"Resources","\u002Fdocs","docs\u002Findex",{"title":9,"path":10,"stem":11,"children":-1},"Project Initiation","\u002Fdocs\u002Fproject-initiation","docs\u002F1.project-initiation",{"title":13,"icon":14,"path":15,"stem":16,"children":17,"page":-1},"Technology","i-lucide-layers","\u002Fdocs\u002Ftechnology","docs\u002F2.technology\u002Findex",[18,23,28,33,38,43,48,53],{"title":19,"path":20,"stem":21,"icon":22,"children":-1},"Laravel","\u002Fdocs\u002Ftechnology\u002Flaravel","docs\u002F2.technology\u002F1.laravel","i-simple-icons-laravel",{"title":24,"path":25,"stem":26,"icon":27,"children":-1},"Flutter","\u002Fdocs\u002Ftechnology\u002Fflutter","docs\u002F2.technology\u002F2.flutter","i-simple-icons-flutter",{"title":29,"path":30,"stem":31,"icon":32,"children":-1},"Nuxt","\u002Fdocs\u002Ftechnology\u002Fnuxt","docs\u002F2.technology\u002F3.nuxt","i-simple-icons-nuxt",{"title":34,"path":35,"stem":36,"icon":37,"children":-1},"Tailwind","\u002Fdocs\u002Ftechnology\u002Ftailwind","docs\u002F2.technology\u002F4.tailwind","i-simple-icons-tailwindcss",{"title":39,"path":40,"stem":41,"icon":42,"children":-1},"Cursor","\u002Fdocs\u002Ftechnology\u002Fcursor","docs\u002F2.technology\u002F5.cursor","i-simple-icons-cursor",{"title":44,"path":45,"stem":46,"icon":47,"children":-1},"AWS","\u002Fdocs\u002Ftechnology\u002Famazon","docs\u002F2.technology\u002F6.amazon","i-simple-icons-amazon",{"title":49,"path":50,"stem":51,"icon":52,"children":-1},"Cloudflare","\u002Fdocs\u002Ftechnology\u002Fcloudflare","docs\u002F2.technology\u002F7.cloudflare","i-simple-icons-cloudflare",{"title":54,"path":55,"stem":56,"icon":57,"children":-1},"MySQL","\u002Fdocs\u002Ftechnology\u002Fmysql","docs\u002F2.technology\u002F8.mysql","i-simple-icons-mysql",{"id":59,"title":60,"body":61,"description":367,"extension":368,"meta":369,"navigation":370,"path":30,"seo":371,"stem":31,"__hash__":372},"docs\u002Fdocs\u002F2.technology\u002F3.nuxt.md","Nuxt development services",{"type":62,"value":63,"toc":349},"minimark",[64,72,75,86,91,141,145,164,167,171,191,195,222,226,232,261,265,282,288,292,301,305,310,313,317,320,324,327,331,337],[65,66,67,68,71],"p",{},"Nuxt is the web client. Customer portals, staff tools, and the public pages around them are Vue applications rendered with Nuxt, and they communicate with a ",[69,70,19],"a",{"href":20}," API. It covers both authenticated screens and public pages that need a stable URL, a title, and markup suitable for search and sharing.",[65,73,74],{},"This site is a Nuxt application. We use the same framework when the interface is the product, rather than a marketing site alone.",[65,76,77,81,82,85],{},[69,78,80],{"href":79},"\u002F_action\u002Fcontact-us","Start a conversation"," about a Nuxt frontend, or read ",[69,83,84],{"href":10},"Project initiation",".",[87,88,90],"h2",{"id":89},"at-a-glance","At a glance",[92,93,94,105],"table",{},[95,96,97],"thead",{},[98,99,100,103],"tr",{},[101,102],"th",{},[101,104],{},[106,107,108,117,125,133],"tbody",{},[98,109,110,114],{},[111,112,113],"td",{},"Kind",[111,115,116],{},"Web application framework",[98,118,119,122],{},[111,120,121],{},"Language",[111,123,124],{},"TypeScript and Vue",[98,126,127,130],{},[111,128,129],{},"Fits",[111,131,132],{},"Portals, authenticated applications, public pages that belong to the same product",[98,134,135,138],{},[111,136,137],{},"Usually with",[111,139,140],{},"Laravel, Tailwind CSS, Cloudflare",[87,142,144],{"id":143},"when-we-use-it","When we use it",[146,147,148,152,155,158],"ul",{},[149,150,151],"li",{},"Customer and staff portals, including catalogues, orders, accounts, and administration",[149,153,154],{},"Authenticated applications that should remain responsive after the first load, without a separate technology stack for each feature",[149,156,157],{},"Public pages that belong to the product, such as a catalogue, a status page, or a landing route, and should be rendered for search and sharing",[149,159,160,161,163],{},"A web client alongside a ",[69,162,24],{"href":25}," application, both using one API",[65,165,166],{},"A single marketing page with no application behind it is a poor fit for this work. That is consistent with the services described on the homepage.",[87,168,170],{"id":169},"what-we-rely-on","What we rely on",[146,172,173,176,179,182,188],{},[149,174,175],{},"File-based routes, so the URL structure is visible in the project",[149,177,178],{},"Server and client rendering chosen per route: public pages rendered for readers and search engines, and authenticated routes treated as an application",[149,180,181],{},"A typed client for the Laravel API, so a changed field is visible in review",[149,183,184,187],{},[69,185,186],{"href":35},"Tailwind CSS"," and a component set for screens that recur",[149,189,190],{},"Data fetching with a loading state, an empty state, and an error state",[87,192,194],{"id":193},"why-it-fits-the-work","Why it fits the work",[146,196,197,204,210,216],{},[149,198,199,203],{},[200,201,202],"strong",{},"First load and later navigation."," Public routes can be rendered before they reach the browser. Inside the portal, navigation stays in the application rather than rebuilding each page from scratch.",[149,205,206,209],{},[200,207,208],{},"One frontend as the product grows."," New areas of the portal are added as routes and components, rather than as a separate site.",[149,211,212,215],{},[200,213,214],{},"A smaller amount of sensitive logic in the browser."," Tokens, permissions, and business rules stay on the API. The frontend displays what the API allows. It does not become a second implementation of those rules.",[149,217,218,221],{},[200,219,220],{},"A conventional Vue codebase."," A developer who knows Nuxt can continue the work. The interface is styled with Tailwind CSS, which is widely used, rather than a private styling system.",[87,223,225],{"id":224},"how-we-build-with-it","How we build with it",[65,227,228,229,231],{},"The engagement follows ",[69,230,84],{"href":10},". On a Nuxt project, that work includes the following.",[146,233,234,240,246,255],{},[149,235,236,239],{},[200,237,238],{},"Architecture."," Which routes are public, which require a session, and what the API must return. The frontend is designed against that contract.",[149,241,242,245],{},[200,243,244],{},"Development."," Components for screens that recur, and a single API client. Type checking and linting in continuous integration make contract changes visible in review.",[149,247,248,251,252,254],{},[200,249,250],{},"Hardening."," Authentication redirects, no secrets in client code, and forms that report errors clearly. Caching headers are set for ",[69,253,49],{"href":50},", not only for a local preview.",[149,256,257,260],{},[200,258,259],{},"Release and support."," The frontend can be deployed separately from the API when that separation is useful, and each remains releasable on its own. After launch, additional workflow is added as routes.",[87,262,264],{"id":263},"how-it-sits-in-the-stack","How it sits in the stack",[65,266,267,268,270,271,273,274,276,277,279,280,85],{},"Nuxt is the web client. ",[69,269,19],{"href":20}," is the API and the system of record. ",[69,272,186],{"href":35}," provides the styling. ",[69,275,49],{"href":50}," terminates TLS and caches responses that are safe to cache. ",[69,278,44],{"href":45}," is where the API runs. The browser does not connect to ",[69,281,54],{"href":55},[65,283,284,285,287],{},"A ",[69,286,24],{"href":25}," application, where one is required, uses that same API.",[87,289,291],{"id":290},"in-practice","In practice",[65,293,294,300],{},[69,295,299],{"href":296,"rel":297},"https:\u002F\u002Fdcommerce.io",[298],"nofollow","dCommerce"," is the reference: a customer portal and administration interface in front of a Laravel platform, including catalogue, pricing, and order flows. This marketing site is a smaller Nuxt application in the same framework family. Client portals follow that division of responsibilities, scoped to their process.",[87,302,304],{"id":303},"questions","Questions",[306,307,309],"h3",{"id":308},"is-nuxt-a-good-fit-for-a-large-portal-or-only-for-content-sites","Is Nuxt a good fit for a large portal, or only for content sites?",[65,311,312],{},"It is a good fit for a portal. Content rendering is one mode. Authenticated application routes are the other, and they are the larger part of the work we do. Using one rendering strategy for every screen is usually the wrong choice.",[306,314,316],{"id":315},"should-the-frontend-and-the-api-be-one-repository","Should the frontend and the API be one repository?",[65,318,319],{},"It depends on how the work is released. Separate repositories are easier when the API also serves Flutter, or when different people release the two parts. One repository is easier when the same team owns both and the contract changes frequently. The choice follows the release process.",[306,321,323],{"id":322},"can-you-rebuild-a-frontend-without-replacing-the-backend","Can you rebuild a frontend without replacing the backend?",[65,325,326],{},"Yes, when the backend already exposes a stable API. If the current interface contains the business rules, those rules need to move before the new screens reproduce them.",[87,328,330],{"id":329},"next-step","Next step",[65,332,333,334,85],{},"For a portal, a stalled frontend, or a public site that has to sit on an application, ",[69,335,336],{"href":79},"start a conversation",[65,338,339,340,342,343,342,345,342,347,85],{},"Related: ",[69,341,19],{"href":20},", ",[69,344,186],{"href":35},[69,346,49],{"href":50},[69,348,13],{"href":15},{"title":350,"searchDepth":351,"depth":351,"links":352},"",2,[353,354,355,356,357,358,359,360,366],{"id":89,"depth":351,"text":90},{"id":143,"depth":351,"text":144},{"id":169,"depth":351,"text":170},{"id":193,"depth":351,"text":194},{"id":224,"depth":351,"text":225},{"id":263,"depth":351,"text":264},{"id":290,"depth":351,"text":291},{"id":303,"depth":351,"text":304,"children":361},[362,364,365],{"id":308,"depth":363,"text":309},3,{"id":315,"depth":363,"text":316},{"id":322,"depth":363,"text":323},{"id":329,"depth":351,"text":330},"Vue framework for portals and web applications in front of a Laravel API, including pages that need to be indexed.","md",{},{"title":29,"icon":32},{"title":60,"description":367},"HKNCdwSgrej1G3NuxUMn8QfvubjJIJc73H8-kqzWv1g",[374,376],{"title":24,"path":25,"stem":26,"description":375,"icon":27,"children":-1},"Client framework for iOS and Android applications that use the same backend as the web portal.",{"title":34,"path":35,"stem":36,"description":377,"icon":37,"children":-1},"Utility CSS for the Nuxt interfaces we deliver, so the design system lives in the project rather than in a separate theme.",1792456194670]