{"id":22490720,"url":"https://github.com/flabdev/vue-survey-builder","last_synced_at":"2025-08-02T22:33:27.446Z","repository":{"id":87846971,"uuid":"128018159","full_name":"flabdev/vue-survey-builder","owner":"flabdev","description":"Survey builder for vue.js applications","archived":false,"fork":false,"pushed_at":"2023-08-04T07:03:57.000Z","size":132,"stargazers_count":105,"open_issues_count":0,"forks_count":28,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-04-14T21:08:16.516Z","etag":null,"topics":["open-source","survey","vue","vue-survey-builder"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flabdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-04-04T06:35:01.000Z","updated_at":"2024-02-25T16:16:52.000Z","dependencies_parsed_at":"2024-04-12T23:45:50.498Z","dependency_job_id":"e0f3da2b-7bd6-4d56-8e0f-65001a1aed0b","html_url":"https://github.com/flabdev/vue-survey-builder","commit_stats":null,"previous_names":["fissionhq/vue-survey-builder"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flabdev%2Fvue-survey-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flabdev%2Fvue-survey-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flabdev%2Fvue-survey-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flabdev%2Fvue-survey-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flabdev","download_url":"https://codeload.github.com/flabdev/vue-survey-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501438,"owners_count":17930247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["open-source","survey","vue","vue-survey-builder"],"created_at":"2024-12-06T17:22:35.809Z","updated_at":"2024-12-06T17:25:46.035Z","avatar_url":"https://github.com/flabdev.png","language":"Vue","readme":"# vue-survey-builder\nThis is a survey builder component for vue.js applications.\n\n### How to install\nYou can install the component using `npm i -S vue-survey-builder`\n\n### Demo\nYou can see the demo [here](http://vue-survey-builder.s3-website-us-east-1.amazonaws.com/#/)\n\nPlease look at the souce code of the demo [here](https://github.com/rajeshwarpatlolla/vue-survey-builder-test)\n\n### Steps to use\n**Step 1:**\nOnce you install it, you can import the `SurveyBuilder` as shown below\n\n`import { SurveyBuilder, SurveyBuilderJson } from 'vue-survey-builder';`\n\n**Step 2:**\nYou can use it in your vue component, as shown below\n\n`\u003cSurveyBuilder :options=\"SurveyBuilderJson\" /\u003e`\n\nHere `SurveyBuilderJson` is the json, which is used to form question object. Please take a look at it [here](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/survey-builder.json)\n\nDepending on the type of question, only few keys are used in the whole JSON.\n\n**Step 3:**\n`SurveyBuilder` emits an event called `add-update-question` with a question object `this.$root.$emit('add-update-question', question);`\n\nIn your component, keep track of this event to capture the question which is added or updated\n````\nmounted() {\n  this.$root.$on('add-update-question', question =\u003e {\n    window.console.log(question);\n  });\n},\n````\nEach question will have an `id` which is a UUID field. Once you get the question object form the above event, you can check the `id` of with with the list of questions you have. If the `id` exists, then it means there is an update to the question, if the `id` doesn't exist, then you can directly add that question to the list of questions.\nYou can refer the sample code in the [demo repository](https://github.com/rajeshwarpatlolla/vue-survey-builder-test/blob/master/src/components/TestSurveyBuilder.vue#L30)\n\n**Step 4:**\nYou can add your own logic in your component to show the list of question in read only and edit mode. There is a component called `QuestionsView`, to show the list of questions, which is available [here](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/QuestionsView.vue). Please use this component `QuestionsView` in case, you want to show the list of questions added.\n\nYou can import this component as shown below\n\n`import { QuestionsView } from 'vue-survey-builder';`\n\nOnce you import it, you can use it in your component as shown below\n\n`\u003cQuestionsView :questions=\"questionsList\" :readOnly=\"true\" /\u003e`\n\n- `questions` is a property which takes an array of questions.\n\n- `readOnly` is used to make the whole component editable or non editable, based on the value we pass. It takes true or false.\n\n### Supported Question types\n- BOOLEAN\n- SINGLE_CHOICE\n- MULTI_CHOICE\n- SCALE\n- NUMBER\n- TEXT\n- DATE\n- TIME\n\n### Keys of the JSON\n- **id** : This is a unique field, which will be created dynamically for every qiestion. This field is required for all type of questions.\n- **type** : This represents the type of the question. The supported types are mentioned [here](). This field is required for all type of questions.\n- **multiSelect** : This represents whether the question is multi select question or not. This is is `false` by default and will be `true` only for `MULTI_CHOICE` question.\n- **characterLimited** : It represents the limit for characters, the user can enter. This is used for text type of questions.\n- **hasMinMax** : This represents whether the question has any min and max values or not. This will be used by `NUMBER` type of questions only.\n- **allowDecimals** : This represents whether we need to allow the decimals or not. This will be used by `NUMBER` type only.\n- **sequence** : This represents the sequence of the question. This field will be used by all the question types.\n- **minValue** : This represents the min value. This field will be used by `NUMBER` type of questions only.\n- **maxValue** : This represents the max value. This field will be used by `NUMBER` type of questions only.\n- **labels** : This represents the labels for scale type of question. This field is required for scale type only.\n- **dateFormat** : This represents the date format to be shown. This field is required for `DATE` type of questions.\n- **timeFormat** : This represents the date format to be shown. This field is required for `TIME` type of questions. \n- **intervals** : This represents the number of intervals used for `SCALE` type of questions.\n- **textLimit** : This represents the number character limit for `TEXT` type of questions.\n- **units** : This represents the units to be shown. This field will be used for `NUMBER` type of questions.\n- **options** : This represents the options of question. This field is used by `SINGLE_CHOICE` and `MULTI_CHOICE` questions.\n\n### Versions\n#### 0.1.0\nThis version is the initial release of this open source project. It has all the required functionalities to build the surveys using vue.js\n\n#### 0.2.0\nThis version exports `SurveyBuilder`, `QuestionsView` and `SurveyBuilderJson` from index.js file.\n\n#### 0.3.0\nThis version improves the UI of the survey builder and question view components.\n\n### To Do\n- Introduce drag and drop\n\n### Organisation\n[Fission Labs](http://fissionlabs.com/)\n\n### LICENSE\nPlease read it [here](https://github.com/FissionHQ/vue-survey-builder/blob/master/LICENSE.md)\n","funding_links":[],"categories":["Vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflabdev%2Fvue-survey-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflabdev%2Fvue-survey-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflabdev%2Fvue-survey-builder/lists"}