Surveys are a great way to get feedback from your users. In this guide, we show you how to add a survey to your Vue.js app.
We'll create a basic Vue app, add PostHog, create a survey, and then show you how to display the survey in the app and get responses.
1. Create a Vue app
For this tutorial, we create a basic Vue 3 app. First, ensure Node.js is installed (version 18.0 or newer). Then install @vue/cli and create a new Vue app:
Terminal
npminstall -g @vue/cli
vue create vue-surveys
Make sure to select [Vue 3] babel, eslint as the Vue version.
Once the new app is created, replace the code in src/App.vue with the following:
App.vue
<template>
<divid="app">
<h1>This is our Vue.js survey tutorial</h1>
</div>
</template>
<script>
exportdefault{
name:'App'
}
</script>
Run npm run serve to start your app.
2. Add PostHog
This tutorial shows how to integrate PostHog with Vue 3. If you're using Vue 2, see our Vue docs for how to integrate PostHog.
We use PostHog to create and control our survey as well as monitor results. If you don't have a PostHog instance, you can sign up for free here.
First, install posthog-js:
Terminal
npminstall posthog-js
Create a new plugin by creating a new folder in your base directory called plugins and then a new file posthog.js:
Replace <ph_project_api_key> and <ph_client_api_host> with your your PostHog API key and host. You can find these in your project settings.
Finally, activate your plugin in main.js:
main.js
import{ createApp }from'vue'
importAppfrom'./App.vue'
importposthogPluginfrom'../plugins/posthog';
const app =createApp(App);
app.use(posthogPlugin);
app.mount('#app')
Once you’ve done this, reload your app. You should begin seeing events in the PostHog events explorer.
3. Create a survey
There are two options for displaying a survey using PostHog:
Use PostHog's prebuilt survey UI.
Implement your own survey UI.
This tutorial will cover how to implement both options:
Option 1: Use PostHog's prebuilt survey UI
This is the simplest option. PostHog has a variety of survey templates to choose from, and handles all the display logic and response capture for you. You can also customize the questions, branding, and display conditions as needed – see our survey docs for more details on how to do so.
To create a survey with a prebuilt UI, go to the surveys tab in PostHog and click "New survey".
Select any template, or you can create your own by clicking "Create blank survey". Then, configure your survey with the following details:
Ensure Presentation is set to Popover.
Set the display conditions to All users.
Use the default values for everything else.
Then, click "Save as draft" and then "Launch". Your survey is now live and you should see it in your app. After submitting responses, you can view results in PostHog.
Option 2: Implement your own survey UI
If you prefer to have complete control of your survey UI and logic, you can still use PostHog to keep track of and analyze your results.
First, create a survey in PostHog like in option 1 above (for this tutorial, we use a Net Promoter Score survey template). The only difference is you must set Presentation to API.
Then, there are four parts to adding code for our custom survey:
Create the survey UI.
Fetch the survey from PostHog.
Add the logic for displaying and hiding it.
Capture interactions from it.
1. Create the survey UI
We've created a sample survey UI for this tutorial. To use it, create a new file in components folder called CustomSurvey.vue and paste the following code:
components/CustomSurvey.vue
<template>
<divclass="survey">
<h2>{{ title }}</h2>
<div>
<buttonv-for="i in 10":key="i"class="button"@click="handleSelect(i)">
We want to make sure we don't show the survey again to users who have either submitted or dismissed it. We use localStorage to store this data and use it to check whether to show the survey or not.