Nuxt
Render genko.me entry lists and detail pages with Nuxt SSR, server routes, pagination, and draft previews.
In Nuxt, fetch content in server/ routes and render it with @genko-me/vue components. Requests run on the server, so the API key does not reach the browser. Lists and detail pages arrive as server-rendered HTML for search engines and social crawlers.
The delivery API is REST and works outside Nuxt too. Nuxt provides SSR and server routes for fetching out of the box.
Packages
| Package | Purpose |
|---|---|
@genko-me/sdk | Delivery API client; createGenko creates typed fetch methods |
@genko-me/vue | Components including ListClient, EntryProvider, ListItem, Pagination, and ShareButtons |
@genko-me/vue/server | fetchGenkoList, fetchGenkoEntry, and loadGenkoPage; call these only from server/ |
@genko-me/cli | Generates and syncs types and connection files from your schema |
@genko-me/vue lists Vue 3.5 or later as a peer dependency. There is no dedicated Nuxt module. Register the components together with GenkoVuePlugin from a Nuxt plugin.
Differences from React
The component names and DOM match @genko-me/react. Vue has no server components, so fetching and rendering are separate. Keep these differences in mind:
- Specify the fields to fetch. React inspects child components to determine the needed fields. Vue cannot do that. Pass
fields: ["title", "publishedAt"]tofetchGenkoList, for example. Omittingfieldsfetches every field. - Configure pagination on
ListClient. Itspagination-optionscontrolsmodeandparam. ThemodeonPaginationcontrols the label side; keep both settings in sync.
Good fit
- Server-rendered blogs, news, and case studies.
- Lists that need pagination. One
server/apiroute fetches later pages without exposing the API key. - Sites where editors review saved drafts on the live page before publishing.
Limitations
- SPA mode (
ssr: false). Fetching moves to the browser, leaving no private place for the API key. See Vue for that setup. nuxt generatewithout a server. Pagination needs aserver/apiroute. If you export every page at build time, omit pagination or choose hosting that can run that route.- Fetching in page
<script setup>. Importing@genko-me/vue/serverthere puts server code into the browser bundle. Fetch underserver/. - Writing content. The delivery API is read-only. Create and update entries in the dashboard.
Next steps
- Get started: Install and build list and detail pages
- Tutorial: Add pagination, draft previews, and webhooks
- Write your own fetch logic: Work directly with metadata and sitemaps
- Fetch over HTTP without the SDK
Last updated: October 6, 2026