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

# Vue

> This guide will walk you through integrating OneSDK with a Vue.js application, covering both Webpack and Vite setups.

## Quick Start

<Steps>
  <Step title="Create a New Vue Project">
    Choose your preferred bundler:

    <Tabs>
      <Tab title="Webpack">
        ```shell # Install Vue CLI globally npm install -g @vue/cli # Create new theme={null}
        project vue create my-onesdk-app 
        ```
      </Tab>

      <Tab title="Vite">
        ```shell theme={null}
        # Create new project with Vite 
        npm create vue@latest 
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Install OneSDK">
    ```shell theme={null}
    npm install @frankieone/one-sdk
    ```
  </Step>

  <Step title="Configure Environment Variables">
    Create a `.env` file in your project root:

    ```plaintext theme={null}
    VUE_APP_CUSTOMER_ID=your_customer_id
    VUE_APP_CUSTOMER_CHILD_ID=your_child_id
    VUE_APP_API_KEY=your_api_key
    ```

    <Callout icon="bell" color="#FFCA16" iconType="regular">
      Never commit sensitive credentials to version control. Add `.env` to your `.gitignore` file.
    </Callout>
  </Step>
</Steps>

## Implementation

<Accordion title="App.vue Implementation">
  Create or update your `./src/App.vue`:

  ```vue App.vue theme={null}
  <script setup>
  import { onMounted, ref } from 'vue'
  import OneSDK from '@frankieone/one-sdk'

  // Configuration references
  const CUSTOMER_ID = import.meta.env.VITE_CUSTOMER_ID
  const CUSTOMER_CHILD_ID = import.meta.env.VITE_CUSTOMER_CHILD_ID
  const API_KEY = import.meta.env.VITE_API_KEY

  const session = ref(null)
  const tokenResult = ref(null)

  onMounted(async () => {
  // Initialize session
  const tokenResult = await initializeSession()

  // Configure OneSDK
  const oneSdk = await setupOneSDK(tokenResult)

  // Setup individual verification
  const individual = setupIndividual(oneSdk)

  // Initialize IDV flow
  setupIDVFlow(oneSdk)
  })

  // Session initialization
  async function initializeSession() {
  const response = await fetch("https://backend.latest.frankiefinancial.io/auth/v2/machine-session", {
  method: "POST",
  headers: {
  "authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
  "Content-Type": "application/json"
  },
  body: JSON.stringify({
  permissions: {
  "preset": "one-sdk",
  "reference": `demo-${new Date().toISOString()}`
  }
  })
  })
  return await response.json()
  }

  // OneSDK configuration
  async function setupOneSDK(tokenResult) {
  const sdk = await OneSDK({
  session: tokenResult.session,
  mode: "development",
  recipe: {
  form: {
  provider: {
  name: 'react',
  googleApiKey: 'YOUR_GOOGLE_API_KEY'
  },
  }
  }
  })

  sdk.on('\*', console.log)
  return sdk
  }

  // Individual verification setup
  function setupIndividual(sdk) {
  const individual = sdk.individual()
  individual.addConsent("general")
  individual.addConsent("docs")
  individual.addConsent("creditheader")
  return individual.submit()
  }

  // IDV flow setup
  function setupIDVFlow(sdk) {
  const idv = sdk.flow("idv")
  const components = {
  loading1: sdk.component("form", {
  name: "LOADING",
  title: { label: "Loading..." },
  descriptions: [{ label: "" }]
  }),
  loading2: sdk.component("form", {
  name: "LOADING",
  title: { label: "Processing results..." },
  descriptions: [{
  label: "Hold tight, this can take up to 30 seconds. Please don't refresh this page."
  }]
  }),
  review: sdk.component("form", {
  name: "REVIEW",
  type: "ocr"
  })
  }

  setupIDVEventHandlers(idv, components)
  idv.mount("#e2e-idv-container")
  }

  // Event handlers setup
  function setupIDVEventHandlers(idv, components) {
  let isInitialLoading = true

  idv.on("loading", (display) => handleLoading(display, components, isInitialLoading))
  idv.on("results", (data) => handleResults(data, components))
  idv.on("error", handleError)
  idv.on("detection_complete", handleDetectionComplete)

  components.review.on("form:review:ready", handleReviewReady)
  }

  </script>

  <template>
    <div class="onesdk-container">
      <div id="e2e-idv-container" class="idv-container"></div>
      <div id="e2e-idv-loading1"></div>
      <div id="e2e-idv-loading2"></div>
    </div>
  </template>

  <style scoped>
  .onesdk-container {
    width: 100%;
    height: 85vh;
  }

  .idv-container {
    width: 100%;
    height: 100%;
  }
  </style>

  ```
</Accordion>

## Event Handling

<AccordionGroup>
  <Accordion title="Loading Events">
    ```javascript theme={null}
    function handleLoading(display, components, isInitialLoading) {
      if (display) {
        if (isInitialLoading) {
          components.loading1.mount("#e2e-idv-loading1")
        }
      } else {
        if (isInitialLoading) {
          components.loading1.unmount()
          isInitialLoading = false
        }
      }
    }
    ```
  </Accordion>

  <Accordion title="Results Events">
    ```javascript theme={null}
    function handleResults({ checkStatus }, components) {
      if (checkStatus) {
        console.log("Verification successful")
        components.loading2.unmount()
        components.review.mount("#e2e-idv-container")
      } else {
        console.warn("No data returned")
      }
    }
    ```
  </Accordion>

  <Accordion title="Error Handling">
    ```javascript theme={null}
    function handleError({ message, payload }) {
      console.error("Verification error:", message, payload)
    }
    ```
  </Accordion>
</AccordionGroup>

## Running the Application

<Steps>
  <Step title="Start Development Server">
    <Tabs>
      <Tab title="Webpack">
        ```shell theme={null}
        npm run serve
        ```
      </Tab>

      <Tab title="Vite">
        ```shell theme={null}
        npm run dev
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Access the Application">
    Open your browser and navigate to:

    * Webpack: `http://localhost:8080`
    * Vite: `http://localhost:5173`
  </Step>
</Steps>

<Callout icon="star" color="#3DD892" iconType="regular">
  ##### Development Best Practices

  * Keep sensitive configuration in `.env` files
  * Implement proper error handling for API calls
  * Use Vue's Composition API for better code organization
  * Consider implementing loading states for better UX
</Callout>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Common Issues">
    * **Session Token Issues**: Ensure your credentials are correct in the `.env` file
    * **Mounting Errors**: Check that container IDs match exactly
    * **Component Loading**: Verify all required components are properly initialized
  </Accordion>

  <Accordion title="Environment Setup">
    * **Vue Version**: Ensure you're using Vue 3.x
    * **Node Version**: Use Node.js 18.x or later
    * **Build Issues**: Clear npm cache and node\_modules if encountering build problems
  </Accordion>
</AccordionGroup>