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.
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 Developer Portal to create API keys, manage billing, teams, and more. 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()],
},
});
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):
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);
Para offers two hosted environments: Environment.BETA (alias Environment.DEVELOPMENT) for testing, and
Environment.PROD (alias Environment.PRODUCTION) for live use. Select the environment that matches your current
development phase.
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(),
};
};
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>
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
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"]}
/>
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.
