> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js Troubleshooting

> Resolving common Para SDK integration challenges with Vue.js applications

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Integrating Para SDK with Vue.js applications can present unique challenges. This guide addresses common issues and provides effective solutions to ensure smooth integration.

<Tip>
  Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:

  1. Include the <Link label="Para LLM-optimized context file" href="https://docs.getpara.com/llms-full.txt" /> for the most up-to-date help
  2. Check out the <Link label="Example Hub Wiki" href="https://deepwiki.com/getpara/examples-hub" /> for an interactive LLM using Para Examples Hub
</Tip>

## General Troubleshooting Steps

Before diving into specific issues, try these general troubleshooting steps:

<AccordionGroup>
  <Accordion title="Clear cache and node_modules">
    ```bash theme={null}
    rm -rf node_modules
    npm cache clean --force
    ```
  </Accordion>

  <Accordion title="Reinstall dependencies">
    ```bash theme={null}
    npm install
    ```
  </Accordion>

  <Accordion title="Update Para-related packages">
    ```bash theme={null}
    npm update @getpara/react-sdk
    ```
  </Accordion>

  <Accordion title="Rebuild the project">
    ```bash theme={null}
    npm run build
    ```
  </Accordion>
</AccordionGroup>

## Common Issues and Solutions

<AccordionGroup>
  <Accordion title="React Components in Vue">
    **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:
       ```bash theme={null}
       npm install veaury react react-dom
       ```

    2. Create a wrapper component for Para:
       ```javascript theme={null}
       // ParaWrapper.js
       import { applyPureReactInVue } from 'veaury';
       import { ParaProvider } from '@getpara/react-sdk';

       export const VueParaProvider = applyPureReactInVue(ParaProvider);
       ```

    3. Use in your Vue component:
       ```vue theme={null}
       <template>
         <VueParaProvider
           :paraClientConfig="{ apiKey: apiKey, env: 'BETA' }"
           :config="{ appName: 'Your App' }"
         >
           <YourAppContent />
         </VueParaProvider>
       </template>

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

       export default {
         components: {
           VueParaProvider
         },
         data() {
           return {
             apiKey: import.meta.env.VITE_PARA_API_KEY
           };
         }
       };
       </script>
       ```

    <Warning>
      `ParaProvider` includes its own modal. Do not also wrap and render `ParaModal` unless you set `disableEmbeddedModal: true` in the provider config.
    </Warning>
  </Accordion>

  <Accordion title="Environment Variables">
    **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:

    ```javascript theme={null}
    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:

    ```javascript theme={null}
    const apiKey = process.env.VUE_APP_PARA_API_KEY;
    ```
  </Accordion>

  <Accordion title="CSS Loading Issues">
    **Problem**: Para's CSS styles not loading correctly.

    **Solution**: Import Para's CSS file in your main entry point:

    ```javascript theme={null}
    // main.js or main.ts
    import '@getpara/react-sdk/styles.css';
    import { createApp } from 'vue';
    import App from './App.vue';

    createApp(App).mount('#app');
    ```
  </Accordion>

  <Accordion title="Build Configuration">
    **Problem**: Build errors due to missing polyfills or module resolution issues.

    **Solution**: Configure your build tool appropriately:

    For Vite:

    ```javascript theme={null}
    // 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']
      }
    });
    ```
  </Accordion>
</AccordionGroup>

## 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](https://join.slack.com/t/para-community/shared_invite/zt-304keeulc-Oqs4eusCUAJEpE9DBwAqrg) for
assistance. To help us resolve your issue quickly, please include the following information in your request:

<ol className="space-y-4 list-none pl-0">
  <li className="flex items-start">
    <span className="w-7 h-7 shrink-0 rounded-lg bg-gray-100 mr-2 mt-0.5 dark:text-white dark:bg-[#26292E] text-sm text-gray-800 font-semibold flex items-center justify-center">
      1
    </span>

    <p className="flex-1 my-0">A detailed description of the problem you're encountering.</p>
  </li>

  <li className="flex items-start">
    <span className="w-7 h-7 shrink-0 rounded-lg bg-gray-100 mr-2 mt-0.5 dark:text-white dark:bg-[#26292E] text-sm text-gray-800 font-semibold flex items-center justify-center">
      2
    </span>

    <p className="flex-1 my-0">Any relevant error messages or logs.</p>
  </li>

  <li className="flex items-start">
    <span className="w-7 h-7 shrink-0 rounded-lg bg-gray-100 mr-2 mt-0.5 dark:text-white dark:bg-[#26292E] text-sm text-gray-800 font-semibold flex items-center justify-center">
      3
    </span>

    <p className="flex-1 my-0">Steps to reproduce the issue.</p>
  </li>

  <li className="flex items-start">
    <span className="w-7 h-7 shrink-0 rounded-lg bg-gray-100 mr-2 mt-0.5 dark:text-white dark:bg-[#26292E] text-sm text-gray-800 font-semibold flex items-center justify-center">
      4
    </span>

    <p className="flex-1 my-0">Details about your system or environment (e.g., device, operating system, software version).</p>
  </li>
</ol>

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