Build JSON Forms and Surveys in Vue.js
SurveyJS for Vue.js is a set of client-side JavaScript libraries for building a custom form and survey management system inside your Vue.js application.
Use Form Library to render JSON forms, Survey Creator to design forms visually, Dashboard to analyze responses, and PDF Generator to export forms as PDF files. SurveyJS connects to your own backend, so you keep full control over data storage, access rules, and application logic.
SurveyJS Form Library
- Multi-step forms / form wizard
- Conditional logic
- Dynamic panels / repeatable sections
- Auto-populated fields
- Custom validation
- Calculated values
- Save and restore incomplete forms
<template>
<Survey :survey="survey" />
</template>
<script>
import "survey-core/survey-core.min.css";
import { Model } from "survey-core";
import { Survey } from 'survey-vue-ui;
const surveyJson = { ... };
export default {
components: {
Survey
},
data() {
const survey = new Model(surveyJson);
survey.onComplete.add((sender, options) => {
// Store data in your data storage
console.log(
JSON.stringify(sender.data, null, 3));
});
return {
survey
}
},
}
</script>SurveyJS Survey Creator
- White-label UI
- Customizable Toolbox & Settings Panel
- UI Preset Editor
- Theme Editor
- Custom question types
- Multi-user form editing
- Localization / translations
<template>
<div id="surveyCreator" />
</template>
<script>
import { SurveyCreator } from "survey-creator-knockout";
import "survey-core/survey-core.min.css";
import "survey-creator-core/survey-creator-core.min.css";
const creatorOptions = {
autoSaveEnabled: true
};
export default {
name: "survey-creator",
mounted() {
const creator = new SurveyCreator(creatorOptions);
creator.render("surveyCreator");
}
};
</script>SurveyJS Dashboard
- Survey results analysis
- Live response updates
- Response filtering and sorting
- Custom visualizers
- Export responses
- Pivot chart
- Table view
const surveyJson = {
// ...
};
const survey = new Survey.Model(json);
const allQuestions = survey.getAllQuestions();
const node = document.getElementById("survey-dashboard");
fetch("https://www.example.com/survey-results/")
.then(response => response.json())
.then(data => {
const vizPanel = new SurveyAnalytics.VisualizationPanel(
allQuestions,
data
);
vizPanel.render(node);
});SurveyJS PDF Generator
- Export web forms to PDF
- Generate completed response records
- Fill existing PDF forms
- Create read-only PDF documents
- Apply custom fonts
- Configure PDF page size, orientation, and margins
- Customize PDF themes and layouts
import { SurveyPDF } from "survey-pdf";
function prepareSurveyPDF() {
const surveyPDF = new SurveyPDF(json);
surveyPDF.data = survey.data;
return surveyPDF;
}
function savePdfAsFile() {
const surveyPDF = prepareSurveyPDF();
surveyPDF.save("surveyAsFile.pdf");
}
function savePdfAsBlob() {
const surveyPDF = prepareSurveyPDF();
surveyPDF
.raw("bloburl")
.then(function (bloburl) {
const a = document.createElement("a");
a.href = bloburl;
a.download = "surveyAsBlob.pdf";
document.body.appendChild(a);
a.click();
});
}
function previewPdf() {
const surveyPDF = prepareSurveyPDF();
const oldFrame = document.getElementById("pdf-preview-frame");
if (oldFrame)
oldFrame.parentNode.removeChild(oldFrame);
surveyPDF
.raw("dataurlstring")
.then(function (dataurl) {
const pdfEmbed = document.createElement("embed");
pdfEmbed.setAttribute("id", "pdf-preview-frame");
pdfEmbed.setAttribute("type", "application/pdf");
pdfEmbed.setAttribute("style", "width:100%");
pdfEmbed.setAttribute("height", 200);
pdfEmbed.setAttribute("src", dataurl);
const previewDiv = document.getElementById("pdf-preview");
previewDiv.appendChild(pdfEmbed);
});
}Survey Management System Examples
SurveyJS UI libraries let you build a full-cycle survey management system inside your Vue.js application. Users can design forms, publish surveys, submit and review responses, and export completed data to PDF without leaving your app. The same architecture is available for React, Angular, jQuery, and Vanilla JavaScript.
View examples of such systems for the most popular backend frameworks and CMS.
WordPress
Embed SurveyJS Form Library and Survey Creator in your site using a WordPress plugin.
Domain Model
Generate forms for domain models and edit them in Survey Creator.
Node.js + PostgreSQL
Save forms and user responses in a PostgreSQL database on a Node.js server.
Node.js + MongoDB
Integrate SurveyJS components with a Node.js server that uses a MongoDB database.
Python
Configure client-server interaction of SurveyJS components with a Python backend.
To learn more about how SurveyJS libraries interact with your backend, see the following help topic: Integrate SurveyJS Libraries with Backend
Frequently Asked Questions
Still Got Questions?
Check our FAQ or Contact Us