Figma to Nuxt.js
Choosing Nuxt over plain Vue usually means the pages have to be found by search engines, shared with a proper preview, and readable before JavaScript has loaded. Those needs shape the build as much as the design does.
We build Nuxt sites from Figma files. The visual work is Vue components. The rest is deciding how each page is rendered, where its content comes from and what its address is, none of which appears in a design file.
Four ways a page can reach the browser
Nuxt lets each route use a different one through route rules. Most sites need two or three.
Prerendered at build time
The page is generated once and served as a static file. Right for about, pricing and legal pages that change rarely.
Rendered on the server per request
HTML is produced when the visitor asks. Right for pages that depend on who is asking or on stock that changes by the minute.
Cached and refreshed in the background
The server keeps a copy for a set time and rebuilds it quietly. Right for blog and catalogue pages.
Rendered in the browser only
No server HTML. Right for account areas behind a login, where search engines have no business.
Things a Nuxt site needs that Figma does not show
We raise these at the start so they are decided, not discovered.
Route map
Frames have names. Pages need addresses. We agree the URL for every page type, including dynamic ones such as a blog post slug, and redirects from old addresses.
Meta per page
Title, description, canonical address and share image are set with useSeoMeta from the page's own content. A sitemap and robots file are generated.
Structured data
Article, product, breadcrumb or FAQ markup is added where the content supports it. What search engines do with it is their decision.
Images
Photographs are resized and served in modern formats through Nuxt Image, with width and height set so the layout does not jump.
Error and loading pages
A 404 page, a server error page and the state shown while a route is loading.
Layouts
Shared frames around pages: the marketing layout, the blog layout, the bare layout for checkout or login.
Where the words and pictures come from
The design shows sample content. Someone has to supply the real thing, repeatedly.
Markdown in the repository
Nuxt Content reads Markdown and data files. Good when writers are comfortable with Git or the site changes rarely.
Headless CMS
Editors work in a CMS and Nuxt fetches through its API. We model the content types from the components in the design.
Your own API
Product or listing data comes from an existing back end. Server routes in Nuxt can sit in between to keep keys off the browser.
Sequence of a Nuxt build
Decisions about structure come before components.
Route and content map
A table of every page type: address, rendering mode, content source. Agreed in writing.
Project and preview
The Nuxt project is set up and deployed to a preview address on your hosting account from the first commit.
Components and layouts
Built from the Figma components and tried with real content, not placeholder text.
Pages and data
Routes are wired to their content. Meta and structured data are filled in.
Comparison and measurement
Pages are compared with Figma at the agreed breakpoints and differences listed. Load performance is measured and reported.
Useful additions to the file
Server-rendered sites expose gaps that a prototype hides.
- A page list that says which frames are templates
- Share image design at social preview proportions
- Blog or listing pages with pagination drawn
- Skeleton or loading states for fetched content
- The 404 page
- Image aspect ratios fixed per component
- Rich text styles: lists, quotes, tables, code, captions
- Cookie notice and consent states, if used
Points that come up with Nuxt
Will the site rank better because it is server-rendered?
Nobody can promise rankings. Server rendering makes content readable to crawlers without running scripts, which removes one obstacle.
What causes hydration warnings, and do you deal with them?
They appear when server HTML differs from what the browser renders, often through dates, random values or window width. We treat each one as a bug to fix.
Can you add pages to an existing Nuxt site?
Yes. We read the project first, follow its conventions and work through merge requests.
Which hosts do you deploy to?
Any that runs Node or serves static files. The account is opened in your name.
Send the design and the page list
Share the Figma file and tell us where content will be edited. We reply within one business day.