Add a Survey to a Vue.js Application
This step-by-step tutorial will help you get started with the SurveyJS Form Library in a Vue application. To add a survey to your Vue application, follow the steps below:
- Install the
survey-vue-uinpm Package - Configure Styles
- Create a Model
- Render the Survey
- Handle Survey Completion
As a result, you will create a survey displayed below:
Install the survey-vue-ui npm Package
The SurveyJS Form Library for Vue consists of two npm packages: survey-core (platform-independent code) and survey-vue-ui (rendering code). Run the following command to install survey-vue-ui. The survey-core package will be installed automatically because it is listed in survey-vue-ui dependencies.
npm install survey-vue-ui --save
SurveyJS requires Vue 2.7 or earlier.
Configure Styles
SurveyJS ships with the Modern and Default V2 UI themes illustrated below.
Open the Vue component in which your survey will be and import a style sheet that implements the required theme.
<template>
<!-- ... -->
</template>
<script>
// Default V2 theme
import 'survey-core/defaultV2.min.css';
// Modern theme
// import 'survey-core/modern.min.css';
</script>
For more information about SurveyJS themes, refer to the following help topic: Themes & Styles.
Create a Model
A model describes the layout and contents of your survey. The simplest survey model contains one or several questions without layout modifications.
Models are specified by model schemas (JSON objects). For example, the following model schema declares two textual questions, each with a title and a name. Titles are displayed on screen. Names are used to identify the questions in code.
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
To instantiate a model, pass the model schema to the Model constructor as shown in the code below. The model instance will be later used to render the survey.
<template>
<!-- ... -->
</template>
<script>
// ...
import { ..., Model } from 'survey-core';
export default {
data() {
const survey = new Model(surveyJson);
return {
survey
}
},
}
</script>
View Full Code
<template>
<!-- ... -->
</template>
<script>
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
export default {
name: 'MyFirstSurvey',
data() {
const survey = new Model(surveyJson);
return {
survey
}
},
}
</script>
Render the Survey
To render a survey, import the Survey component, add it to the template, and pass the model instance you created in the previous step to the component's survey attribute:
<template>
<Survey :survey="survey" />
</template>
<script>
// ...
import { Survey } from 'survey-vue-ui';
// ...
const surveyJson = { ... };
export default {
components: {
Survey
},
data() {
const survey = new Model(surveyJson);
return {
survey
}
},
}
</script>
If you replicate the code correctly, you should see the following survey:
View Full Code
<template>
<Survey :survey="survey" />
</template>
<script>
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-vue-ui';
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
export default {
name: 'MyFirstSurvey',
components: {
Survey
},
data() {
const survey = new Model(surveyJson);
return {
survey
}
},
}
</script>
Handle Survey Completion
After a respondent completes a survey, the results are available within the onComplete event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed:
<template>
<!-- ... -->
</template>
<script>
// ...
const SURVEY_ID = 1;
export default {
// ...
data() {
const survey = new Model(surveyJson);
survey.onComplete.add(this.surveyComplete);
return {
survey
}
},
methods: {
surveyComplete (sender) {
saveSurveyResults(
"https://your-web-service.com/" + SURVEY_ID,
sender.data
)
}
},
}
function saveSurveyResults(url, json) {
const request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.addEventListener('load', () => {
// Handle "load"
});
request.addEventListener('error', () => {
// Handle "error"
});
request.send(JSON.stringify(json));
}
</script>
In this tutorial, the results are simply output in an alert dialog:
<template>
<!-- ... -->
</template>
<script>
// ...
export default {
// ...
data() {
const survey = new Model(surveyJson);
survey.onComplete.add(this.alertResults);
return {
survey
}
},
methods: {
alertResults (sender) {
const results = JSON.stringify(sender.data);
alert(results);
}
},
}
</script>
As you can see, survey results are saved in a JSON object. Its properties correspond to the name property values of your questions in the model schema.
To view the application, run npm run serve in a command line and open http://localhost:8080/ in your browser.
View Full Code
<template>
<Survey :survey="survey" />
</template>
<script>
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-vue-ui';
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
export default {
name: 'MyFirstSurvey',
components: {
Survey
},
data() {
const survey = new Model(surveyJson);
survey.onComplete.add(this.alertResults);
return {
survey
}
},
methods: {
alertResults (sender) {
const results = JSON.stringify(sender.data);
alert(results);
}
},
}
</script>