Vue.JS & Nuxt

We assume you already know what Mini Apps are, else learn what Mini Apps are here. Additionally it’s assumed you know your way around VueJS & Nuxt.

Step 0: Add the Metatags

To add the metatags literally follow the guide in the Webpage to Mini App starter where the metadata can be configued in your nuxt.config.ts file.

Here we will go and add the meta tag so that the Farcaster client’s know this webpage should render as mini app.

// define your mini app embed, you could also set this per page to have different embeds or adjust the image
const miniappEmbed = {
  version: "next",
  imageUrl: "https://pepetrump.io/images/pepe-banner.png",
  button: {
    title: "Play Games $KEK",
    action: {
      type: "launch_frame",
      name: "KEKVERSE Defi Platform",
      url: "https://pepetrump.io/",
      // url: "http://localhost:3000", // uncomment this to debug locally
      splashImageUrl: "https://pepetrump.io/icon.png",
      splashBackgroundColor: "#f7f7f7",
    },
  },
};

export default defineNuxtConfig({
 // your config here
 app: {
     // your config here
     head: {
       meta: [
       // your meta tags here
       {
         name: "fc:frame",
         content: JSON.stringify(miniappEmbed),
       },
      // rest of your nuxt config here

Step 1: Add a Farcaster Mini App plugin to your Vue.JS project

Now that it renders as mini app and points to our website, we need to make sure that it also opens.

Install the dependency:

bun

bun add @farcaster/frame-sdk

npm

npm install @farcaster/frame-sdk

pnpm

pnpm install @farcaster/frame-sdk

yarn

yarn add @farcaster/frame-sdk

To make it open we need to call the ready function of the Farcaster Mini App SDK. To do that on all page loads we’ll use a plugin.

plugins/farcaster.client.ts

import { sdk } from "@farcaster/frame-sdk";

export default defineNuxtPlugin(async (nuxtApp) => {
  console.log("Farcaster plugin initializing...");

  // you may want to track context here to get user information and analytics
  // to do that please reference the documentation
  // https://dtech.vision/farcaster/miniapps
  // e.g. https://dtech.vision/farcaster/miniapps/howtoturnyourwebpageintoaminiapp/
  if (process.client) {
    try {
      console.log("About to call sdk.actions.ready()");
      await sdk.actions.ready();
      console.log("Farcaster frame ready");

      // You can also verify the SDK is working by checking the context
      const ctx = await sdk.context;
      console.log("Farcaster context:", ctx);

      // Add a mounted hook to verify it persists
      nuxtApp.hook("app:mounted", () => {
        console.log("App mounted, Farcaster SDK still available");
      });
    } catch (error) {
      console.error("Failed to initialize Farcaster frame:", error);
    }
  }
});

Step 2: Add a Farcater Mini App Manifest

Make sure to follow the the Webpage to Mini App starter to add a manifest (farcaster.json) in case you want to send push notifications to users and have them save the app in their Farcaster clients.

This fill you can either do via a route or add to the public/ folder.

Step 3: Add Wallet Connection

If you have an injected provider most likely your wallet connection will work out of the box, you can test that.

Though the recommended path is to add the Farcaster Connector to your app which is provided as a wagmi connector.

You can do that as documented in the wagmi Mini App Guide here.