Framework integration

Rankveo for Nuxt

Publish in rankveo, render on your Nuxt site. A module wires runtime config and route rules; server routes keep your key out of the client bundle.

@rankveo/nuxt

Installation

Install the package in your existing Nuxt project.

terminal

npm install @rankveo/nuxt

Create a Rankveo account View source on GitHub

Two steps

Register the module

Runtime config and swr route rules, wired for you.

export default defineNuxtConfig({
  modules: ['@rankveo/nuxt/module'],
  runtimeConfig: {
    rankveo: {
      apiKey:
        process.env
          .RANKVEO_BLOG_API_KEY,
    },
  },
});

Copy the starter

Server routes plus pages that call them.

cp -r \
  node_modules/@rankveo/nuxt/\
  starter/* .

Pages just fetch

No key in sight, because the server route holds it.

const { data } = await useFetch(
  '/api/blog/articles',
  { query: { page: 0, limit: 9 } },
);

Where the key lives matters

Anything under runtimeConfig.public is serialised into the page payload and readable by any visitor. The module puts the key at the top level instead, and never exposes it to a component.

Private by default Only basePath reaches the public half - a component has no use for more.
Server routes do the work Everything under server/ is stripped from the client bundle.
swr route rules ISR on presets that support it, cache headers where they do not.

// server/api/blog/articles.get.ts

import { blogClient } from
  '../../utils/rankveo';

export default defineEventHandler(
  async (event) => {
    const query = getQuery(event);
    return blogClient().getArticles({
      page: Number(query.page ?? 0),
      limit: Number(query.limit ?? 9),
    });
  },
);

Worth knowing before you start

Routes are yours, not injected Blog pages are files you copy in. The first thing anyone does is restyle them, and a file in your repo is easier to change than framework output.

Fully prerendered? Use a deploy hook A static Nuxt build has no cache to invalidate. Point rankveo at your host’s build hook so publishing triggers a rebuild.

Vue, not React The starter is plain Vue single-file components with no UI library, so it drops into whatever design system you already run.

Sitemap and RSS included Both as Nitro routes, with the image entries generic sitemap modules leave out.