Vue: How to set up in 4 steps

Step 1: Install the Official Rasp Npm Package

1npm install rasp-feedback

Step 2: Set your companyId as VITE_RASP_COMPANY_ID in your environment variables. You can find you companyId in your dashboard settings:

1VITE_RASP_COMPANY_ID=your_companyId

Step 3: Set the env as a variable

1<script setup>
2             
3import {ref} from "vue";
4
5const companyId = ref(import.meta.env.VITE_RASP_COMPANY_ID);
6</script>

Step 4: Wrap your page with our RaspProvider component in the page you want your forms and feature boards to appear on

1<script setup>
2import { RaspProvider } from "rasp-feedback/vue";
3const companyId = ref(import.meta.env.VITE_RASP_COMPANY_ID);
4
5</script>
6<template>
7    <main>
8      
9      <RaspProvider :companyId='companyId'>
10
11      <OtherComponents />
12
13      </RaspProvider>
14      
15    </main>
16</template>
17<style scoped>
18</style>
19             
20               );
21             }

This will provide a launcher for user to click to complete your form. It will automatically show the form that you have set for this url in your website

How to use form as a Component

Import RaspForm and place it where you want to appear and pass the companyId into the RaspForm and it will automatically show the form that you have set for this url in your website

1<script setup>
2import { RaspForm } from "rasp-feedback/vue";
3const companyId = ref(import.meta.env.VITE_RASP_COMPANY_ID);
4</script>
5<template>
6    <main>
7      
8      <RaspForm :companyId='companyId' />
9      
10    </main>
11</template>
12<style scoped>
13</style>