Vue

You can display genko.me content in a Vue app without Nuxt, such as a Vite SPA with Vue Router. The delivery API is REST. Call @genko-me/sdk in the browser and pass the result to @genko-me/vue components.

Vue components such as ListClient, ListItem, EntryProvider, and ViewItem are not server components, so they work in this setup. Unlike React without Next.js, you only write the fetch logic; the components handle rendering. If you use Nuxt, see Nuxt.

Packages

Unavailable in this setup:

• @genko-me/vue/server (fetchGenkoList, fetchGenkoEntry, and loadGenkoPage). These functions run on a server and handle private API keys. Call SDK methods such as client.blog.list() and getOrNull() directly instead.
• Signed pagination tokens, which keep the API key out of the browser. Here the key is already in the bundle. Have ListClient call the SDK directly through loadPage.

API keys and SEO

An API key used directly in the browser is public. Anyone can inspect the bundled value or the X-API-KEY request header. Even though it is read-only, assume anyone can read the APIs allowed by that key.

• Limit the key to selected APIs whose content can be public.
• Give it a short lifetime and rotate it regularly.
• For private data, fetch on your own server and return JSON to the browser.

A browser-rendered SPA has SEO limits. Its initial HTML contains an empty <div id="app">; content appears after JavaScript runs. The server cannot return entry-specific Open Graph titles and descriptions. If search traffic or social previews matter, use an SSR framework such as Nuxt, Next.js, SvelteKit, or Astro.

Good fit

• News or help content in signed-in screens or internal tools that do not depend on search traffic.
• Replacing one section of an existing Vue SPA with genko.me content.
• Showing updates immediately without rebuilding the app.

Limitations

• Public pages that depend on search engines or social previews.
• Applications that must keep the API key private.
• Draft preview notices and noindex metadata. You can use PreviewNotice, but your code must decide when to show it.
• Receiving webhooks without a server. See the approach in the tutorial.

Next steps

• Get started: Install and display a list and a single entry
• Tutorial: Add pagination, draft previews, and content updates
• Fetch content: Available fetch methods
• Delivery API: Fetch over HTTP without the SDK