Skip to main content
This guide shows you how to integrate the Para Modal—which is React-based—within a Nuxt 3 application. If you haven’t already created your Nuxt 3 app, follow to set up a new project.
While mixing React with Vue isn’t always considered best practice, it is entirely possible by bridging to the React modal via a connector. If you prefer to build your own custom UI, you can also use @getpara/web-sdk directly.

​
Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.
Don’t have an API key yet? Request access to the to create API keys, manage billing, teams, and more.
Try the live demo to explore authentication flows and customize your modal before integrating.Try Demo

​
Installing Dependencies & Peer Dependencies

First, install the Para React SDK and needed peer dependencies, plus React dependencies using your preferred package manager: 
npm install @getpara/react-sdk react react-dom @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact

​
Configuring Nuxt (vite plugins & polyfills)

Nuxt 3 uses Vite under the hood, so we can add the React plugin and polyfills in nuxt.config.ts:
nuxt.config.ts
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  ssr: false, // If you plan to show the modal on the client only
  vite: {
    plugins: [react(), nodePolyfills()],
  },
});
Depending on your app’s architecture, you may or may not disable SSR entirely. The key requirement is ensuring the React-based modal is client-rendered.

​
Setting Up the Para SDK

Now that you’ve installed the necessary dependencies, let’s set up the Para SDK in your Vue project. This involves creating a client instance and optionally configuring Next.js to transpile external modules if needed.

​
Creating a Para Client Instance

Just like in React apps, you need a Para client instance. You can keep it in a dedicated file (e.g., client/para.ts):
client/para.ts
import { ParaWeb } from "@getpara/react-sdk";

const PARA_API_KEY = import.meta.env.VITE_PARA_API_KEY;
export const para = new ParaWeb(PARA_API_KEY);
If you’re using a legacy API key (one without an environment prefix) you must provide the Environment as the first argument to the ParaWeb constructor. You can retrieve your updated API key from the Para Developer Portal at https://developer.getpara.com/

​
Building a Connector for the React Modal

Just as with Vue + Vite, we need a component that mounts the React para modal into a DOM element. For instance:
para-react-component.jsx
import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AuthLayout, ParaProvider } from "@getpara/react-sdk";
import { para } from "./client/para";
import "@getpara/react-sdk/styles.css";

const queryClient = new QueryClient();

export function ParaReactComponent({ onClose, isOpen }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={para}
        config={{ appName: "Para Modal Example" }}
        paraModalConfig={{
          isOpen,
          onClose: () => {
            onClose?.();
          },
          logo: "/para.svg",
          disableEmailLogin: false,
          disablePhoneLogin: false,
          authLayout: [AuthLayout.AUTH_FULL],
          oAuthMethods: [
            "APPLE",
            "DISCORD",
            "FACEBOOK",
            "FARCASTER",
            "GOOGLE",
            "TWITTER",
          ],
          onRampTestMode: true,
          recoverySecretStepEnabled: true,
          twoFactorAuthEnabled: false,
          theme: {
            foregroundColor: "#2D3648",
            backgroundColor: "#FFFFFF",
            accentColor: "#0066CC",
            darkForegroundColor: "#E8EBF2",
            darkBackgroundColor: "#1A1F2B",
            darkAccentColor: "#4D9FFF",
            mode: "light",
            borderRadius: "none",
            font: "Inter",
          },
        }}
        externalWalletConfig={{
          wallets: [],
        }}
      />
    </QueryClientProvider>
  );
}
This connector creates a React root within a given DOM element and renders the Para Modal into it. It also provides a few methods to open, close, and check the modal’s state.

​
Using the Connector in a Nuxt Component

Nuxt 3 uses a file-based routing system. Let’s assume you have a top-level app.vue or a page component where you want to show the modal:
app.vue
<template>
  <div style="text-align: center; margin-top: 50px">
    <h1>Para Modal in Nuxt 3</h1>
    <button @click="openModal">Open Para Modal</button>
    <div ref="reactRoot"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref, watch } from "vue";
  import { ParaReactComponent } from "./para-react-component.jsx";
  import { para } from "./client/para";

  const isOpen = ref(false);
  const reactRoot = ref(null);
  let root = null;

  onMounted(() => {
    root = ReactDOM.createRoot(reactRoot.value);
    root.render(
      createElement(ParaReactComponent, {
        isOpen: false,
        onClose: handleClose,
      })
    );
  });

  onUnmounted(() => {
    root.unmount();
  });

  watch(isOpen, (newIsOpen) => {
    if (root) {
      root.render(
        createElement(ParaReactComponent, {
          isOpen: newIsOpen,
          onClose: handleClose,
        })
      );
    }
  });

  const openModal = () => {
    isOpen.value = true;
  };
</script>
When you click Open Para Modal, the React-based Para Modal appears in your Nuxt app.
Beta Testing Credentials In the BETA Environment, you can use any email ending in @test.getpara.com (like dev@test.getpara.com) or US phone numbers (+1) in the format (area code)-555-xxxx (like (425)-555-1234). Any OTP code will work for verification with these test credentials. These credentials are for beta testing only. You can delete test users anytime in the beta developer console to free up user slots.

​
Customizing the Para Modal

All the usual customization props apply, just as in a React app: 
<ParaProvider
  // ...other provider props
  paraModalConfig={{
    // ...other modal config props
    oAuthMethods: ["GOOGLE", "DISCORD"]
  }}
/>
Add them to your ParaReactComponent as needed.

​
If You Don’t Want to Use the React Modal

You can also build a fully custom UI using @getpara/web-sdk This approach avoids mixing React into your Nuxt application by letting you directly call Para methods and build your own Vue components.

​
Examples

For a simple example of Para in a Nuxt app, check out our Examples Hub repository:

Vue Examples

​
Troubleshooting

If you encounter issues during the integration or usage of the Para Modal in a Vue-based app, here are some common problems and their solutions:

Troubleshooting