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

the official Nuxt 3 docs to set up a new project.

​

Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.

​

Installing Dependencies

First, install the Para React SDK along with React dependencies:

npm install @getpara/react-sdk react react-dom

​

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:

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()],
  },
});

​

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):

import { Environment, ParaWeb } from "@getpara/react-sdk";

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

​

Building a Connector for the React Modal

Just as with Vue + Vite, we need a connector that mounts the React para modal into a DOM element. For instance:

import React from "react";
import { createRoot } from "react-dom/client";
import { ParaModal, ParaModalProps } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";

export const createParaModalConnector = (targetEl: HTMLElement, props: Omit<ParaModalProps, "isOpen">) => {
  const root = createRoot(targetEl);

  const state = {
    isOpen: false,
    render: (isOpen: boolean) => {
      state.isOpen = isOpen;
      root.render(
        <ParaModal
          {...props}
          isOpen={isOpen}
          onClose={() => {
            state.isOpen = false;
            state.render(false);
            props.onClose?.();
          }}
        />
      );
    },
  };

  return {
    open: () => state.render(true),
    close: () => state.render(false),
    isOpen: () => state.isOpen,
    unmount: () => root.unmount(),
  };
};

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:

<template>
  <div style="text-align: center; margin-top: 50px">
    <h1>Para Modal in Nuxt 3</h1>
    <button @click="openModal">Open Para Modal</button>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from "vue";
  import { createParaModalConnector } from "./para-modal-connector.tsx";
  import { para } from "./client/para";

  const modalConnector = ref<any>(null);

  onMounted(() => {
    const container = document.createElement("div");
    document.body.appendChild(container);

    modalConnector.value = createParaModalConnector(container, {
      para: para,
      appName: "Nuxt + Vue + Para",
      onClose: () => {
        modalConnector.value?.close();
      },
    });
  });

  onUnmounted(() => {
    modalConnector.value?.unmount();
  });

  const openModal = () => {
    modalConnector.value?.open();
  };
</script>

When you click Open Para Modal, the React-based Para Modal appears in your Nuxt app.

​

Customizing the Para Modal

As with any React-based usage, you can pass different props to ParaModal. For example:

<ParaModal
  para={para}
  isOpen={true}
  appName="My Nuxt App"
  oAuthMethods={["GOOGLE", "DISCORD"]}
/>

Use your connector function to provide these props from Vue.

​

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:

​

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:

​

Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.