Skip to main content
Use Nuxt with 4Mica by keeping paid API protection in a Node service and calling it from Nuxt server code. This keeps guarantee verification and settlement on the server while your Nuxt app remains focused on UI and server routes.
This integration is not stable yet. For now, use the NodeJS quick start for the supported implementation.

​
Prerequisites

  • Nuxt running on Node.
  • A Node API service for paid routes.
  • A seller wallet address for payTo.
  • A buyer wallet with 4Mica collateral for paid requests.

​
Install

npm install nuxt express @4mica/x402 @x402/fetch viem

​
Create wallet

For wallet setup, see Wallet. 
PRIVATE_KEY=0xYourPrivateKey
PAY_TO=0xYourSellerAddress
Use the private key only for buyer-side signing. Use PAY_TO as the seller address advertised by protected routes.

​
Deposit collateral

Deposit collateral for the buyer wallet on Base Sepolia (eip155:84532) before you call the protected API. To learn more about collateral setup, see Deposits and Withdrawals.

​
Protect a route

Create a small Node API service for the paid route. Nuxt can call this service from server routes, server plugins, or background jobs. 
import express from "express";
import { paymentMiddlewareFromConfig } from "@4mica/x402/server/express";

const api = express();
api.use(express.json());

api.use(
  paymentMiddlewareFromConfig(
    {
      "GET /premium-content": {
        accepts: {
          scheme: "4mica-credit",
          price: "$0.10",
          network: "eip155:84532",
          payTo: process.env.PAY_TO ?? "0xYourAddress",
        },
        description: "Access to premium Nuxt content",
      },
    },
  ),
);

api.get("/premium-content", (req, res) => {
  res.json({ message: "Paid content for Nuxt" });
});

api.listen(3030, () => {
  console.log("Paid API running on http://localhost:3030");
});

​
Support payment

Create a Nuxt server utility for paid requests. 
import { wrapFetchWithPaymentFromConfig } from "@x402/fetch";
import { FourMicaEvmScheme } from "@4mica/x402/client";
import { privateKeyToAccount } from "viem/accounts";

const account = privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`);
const scheme = await FourMicaEvmScheme.create(account);

export const fetchWithPayment = wrapFetchWithPaymentFromConfig(fetch, {
  schemes: [{ network: "eip155:84532", client: scheme }],
});
Call it from a Nuxt server route: 
export default defineEventHandler(async () => {
  const response = await fetchWithPayment("http://localhost:3030/premium-content");
  return response.json();
});