Skip to main content
Integrating Para SDK with Vue.js applications can present unique challenges. This guide addresses common issues and provides effective solutions to ensure smooth integration.
Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:
  1. Include the for the most up-to-date help
  2. Check out the for an interactive LLM using Para Examples Hub

​
General Troubleshooting Steps

Before diving into specific issues, try these general troubleshooting steps: 
rm -rf node_modules
npm cache clean --force

npm install

npm run build

​
Common Issues and Solutions

Problem: Para SDK is built with React, which requires special configuration to work in Vue applications.Solution: Use a React-in-Vue wrapper library to integrate Para components:
  1. Install the necessary packages: 
    npm install veaury react react-dom
  2. Create a wrapper component for Para: 
    // ParaWrapper.js
import { applyPureReactInVue } from 'veaury';
import { ParaProvider, ParaModal } from '@getpara/react-sdk';

export const VueParaProvider = applyPureReactInVue(ParaProvider);
export const VueParaModal = applyPureReactInVue(ParaModal);
  3. Use in your Vue component: 
    <template>
  <VueParaProvider :paraClientConfig="{ apiKey: apiKey, env: 'BETA' }">
    <VueParaModal :appName="'Your App'" />
  </VueParaProvider>
</template>

<script>
import { VueParaProvider, VueParaModal } from './ParaWrapper';

export default {
  components: {
    VueParaProvider,
    VueParaModal
  },
  data() {
    return {
      apiKey: import.meta.env.VITE_PARA_API_KEY
    };
  }
};
</script>
Problem: Environment variables not being recognized in your Vue application.Solution: Ensure you’re using the correct prefix based on your build tool:For Vite-based Vue projects:
VITE_PARA_API_KEY=your_api_key_here
Access in your code:
const apiKey = import.meta.env.VITE_PARA_API_KEY;
For Vue CLI projects:
VUE_APP_PARA_API_KEY=your_api_key_here
Access in your code:
const apiKey = process.env.VUE_APP_PARA_API_KEY;
Problem: Para’s CSS styles not loading correctly.Solution: Import Para’s CSS file in your main entry point:
// main.js or main.ts
import '@getpara/react-sdk/dist/index.css@alpha';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
Problem: Build errors due to missing polyfills or module resolution issues.Solution: Configure your build tool appropriately:For Vite:
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    vue(),
    nodePolyfills({
      include: ['buffer', 'crypto', 'stream', 'util']
    })
  ],
  optimizeDeps: {
    include: ['@getpara/react-sdk', 'react', 'react-dom']
  }
});

​
Best Practices

  1. Component Isolation: Keep Para components isolated in wrapper components to manage the React-Vue boundary effectively.
  2. State Management: Consider using a shared state management solution if you need to sync data between Vue and Para components.
  3. Error Boundaries: Implement error handling to gracefully manage any runtime errors from the React components.
  4. Performance: Lazy load Para components to reduce initial bundle size and improve application startup time.
By following these troubleshooting steps and best practices, you should be able to successfully integrate Para SDK with your Vue.js application.

​
Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:
  1. 1

    A detailed description of the problem you’re encountering.

  2. 2

    Any relevant error messages or logs.

  3. 3

    Steps to reproduce the issue.

  4. 4

    Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.
⌘I