Para with Vue + Vite
A guide to integrate the Para Modal (React-based) into your Vue application powered by Vite.
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. Reach out to use for help with custom UI integration.
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 both the Para React SDK and the React dependencies, since the modal relies on React under the hood:
Setting Up Polyfills
Like any React + Vite project that may rely on Node modules (crypto
, buffer
, stream
), you’ll likely need
polyfills:
Then, update your vite.config.js
or vite.config.ts
:
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
):
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
To display the React-based Para Modal from within Vue, we’ll create a “connector” that mounts the React modal into a DOM
element. You can store this in a file such as para-modal-connector.tsx
:
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.
Integrating in a Vue Component
Use Vue’s lifecycle hooks to create and destroy the modal connector. Below is a simplified example (index.vue
):
When you click the Open Para Modal button, the React-based Para Modal will appear within your Vue application.
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:
Pass them through your connector’s props
object as needed.
Examples
For an example of a fully working Vue + Vite integration, check out our starter templates or example repositories:
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.