Skip to main content
Para integrates seamlessly with Vue applications, providing powerful features for building interactive interfaces.
Para does not offer a dedicated Vue SDK at this time. However, we provide solutions for utilizing our React based ParaModal component in Vue applications.

​
Using the React Modal

Use our React-based ParaModal in Vue via a wrapper component:

Vue + Vite

Nuxt

​
Custom UI with Web SDK

Build your own authentication UI using @getpara/web-sdk directly.

​
Installation

npm install @getpara/web-sdk

​
Para Client

src/lib/para.ts
import { Environment, ParaWeb } from "@getpara/web-sdk";

export const para = new ParaWeb(
  Environment.BETA,
  import.meta.env.VITE_PARA_API_KEY
);

​
Check Authentication

const isLoggedIn = await para.isFullyLoggedIn();

if (isLoggedIn) {
  const wallets = Object.values(await para.getWallets());
  const address = wallets[0]?.address;
}

​
Email Authentication

const authState = await para.signUpOrLogIn({ auth: { email } });

if (authState.stage === "verify" && authState.loginUrl) {
  const isNewUser = authState.nextStage === "signup";

  // 1. Display authState.loginUrl in an iframe
  // 2. Start polling for completion in the background
  handleAuthComplete(isNewUser);
}

async function handleAuthComplete(isNewUser: boolean) {
  if (isNewUser) {
    await para.waitForWalletCreation();
  } else {
    const result = await para.waitForLogin();
    if (result.needsWallet) {
      await para.waitForWalletCreation();
    }
  }
  // Auth complete - update your UI
}

​
Iframe with Message Handler

Display the loginUrl in an iframe. Listen for the CLOSE_WINDOW message to hide the iframe when the user completes or cancels: 
const portalOrigins = [
  "https://app.getpara.com",
  "https://app.beta.getpara.com",
];

function handleMessage(event: MessageEvent) {
  if (!portalOrigins.some((origin) => event.origin.startsWith(origin))) return;

  if (event.data?.type === "CLOSE_WINDOW") {
    // Hide the iframe - waitForLogin/waitForWalletCreation handles completion
  }
}

window.addEventListener("message", handleMessage);

<iframe
  :src="loginUrl"
  allow="publickey-credentials-get *; publickey-credentials-create *"
></iframe>

​
Logout

await para.logout();
See the Custom Auth UI with Web SDK guide for all available client methods including OAuth, phone auth, and wallet operations.

​
Example

Vue + Vite Example