{"id":14973683,"url":"https://github.com/ditdot-dev/vue-flow-form","last_synced_at":"2025-05-15T10:03:37.853Z","repository":{"id":38457141,"uuid":"271568880","full_name":"ditdot-dev/vue-flow-form","owner":"ditdot-dev","description":"Create conversational conditional-logic forms with Vue.js.","archived":false,"fork":false,"pushed_at":"2024-07-17T17:11:59.000Z","size":3578,"stargazers_count":801,"open_issues_count":10,"forks_count":179,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-04T20:02:00.404Z","etag":null,"topics":["conversational-ui","form","form-generator","forms","questionnaire","quiz","survey","survey-form","typeform","vue","vue-components","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://www.ditdot.hr/en/vue-flow-form","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/ditdot-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2020-06-11T14:32:51.000Z","updated_at":"2025-04-29T09:02:27.000Z","dependencies_parsed_at":"2024-01-07T12:52:09.696Z","dependency_job_id":"34f85bb6-323b-4449-9aaf-767c453dd77f","html_url":"https://github.com/ditdot-dev/vue-flow-form","commit_stats":{"total_commits":433,"total_committers":13,"mean_commits":33.30769230769231,"dds":0.7066974595842956,"last_synced_commit":"a8f30b81543c2070589db49d9f326d2ec3287587"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-flow-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-flow-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-flow-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-flow-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ditdot-dev","download_url":"https://codeload.github.com/ditdot-dev/vue-flow-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319716,"owners_count":22051072,"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":["conversational-ui","form","form-generator","forms","questionnaire","quiz","survey","survey-form","typeform","vue","vue-components","vue2","vue3","vuejs"],"created_at":"2024-09-24T13:49:13.938Z","updated_at":"2025-05-15T10:03:33.634Z","avatar_url":"https://github.com/ditdot-dev.png","language":"Vue","readme":"# Vue Flow Form\n\nCreate conversational conditional-logic forms with Vue.js.\n\n\u003cp\u003e\n  \u003ca href=\"https://github.com/ditdot-dev/vue-flow-form/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@ditdot-dev/vue-flow-form.svg?sanitize=true\u0026amp;color=41B883\" alt=\"License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ditdot-dev/vue-flow-form\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@ditdot-dev/vue-flow-form.svg?sanitize=true\u0026amp;color=41B883\" alt=\"Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://cdnjs.com/libraries/vue-flow-form\"\u003e\u003cimg src=\"https://img.shields.io/cdnjs/v/vue-flow-form?color=yellow\" alt=\"cdnjs\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://www.ditdot.hr/demo/vff/visuals/v-form-green-full-rotate-02.png\" alt=\"v-form screenshots\"\u003e\n\u003c/p\u003e\n\nStarting with v2.0.0, Vue Flow Form has migrated from Vue 2 to **Vue 3**. If you're looking for README for Vue Flow Form v1.1.7, which works with Vue 2, \u003ca href=\"https://github.com/ditdot-dev/vue-flow-form/blob/bc471447a6aadbbda7df9eb950566ed03a0d5e37/README.md\"\u003echeck it out here\u003c/a\u003e.\n\n## Live Demos\n\n* [Questionnaire example](https://www.ditdot.hr/demo/vff/questionnaire/)\n* [Support page example](https://www.ditdot.hr/demo/vff/support-page/)\n* [Quiz example](https://www.ditdot.hr/demo/vff/quiz/)\n\n## Project Documentation\n\n* [Guide](https://www.ditdot.hr/en/docs/vue-flow-form-guide)\n\n## Example Project\n\nRequirements:\n\n* [Node.js](https://nodejs.org/en/) version 10.0.0 or above (12.0.0+ recommended)\n* [npm](https://www.npmjs.com/get-npm) version 5+ (or [yarn](https://yarnpkg.com/lang/en/docs/install/) version 1.16+)\n* [Git](https://git-scm.com/)\n\nAfter checking the prerequisites, follow these simple steps to install and use Vue Form:\n\n```shell\n# clone the repo\n$ git clone https://github.com/ditdot-dev/vue-flow-form.git myproject\n\n# go into app's directory and install dependencies:\n$ cd myproject\n```\n\nIf you use npm:\n\n```shell\n$ npm install\n\n# serve with hot reload at localhost:8080 by default.\n$ npm run serve\n\n# build for production\n$ npm run build\n```\n\nIf you use yarn:\n\n```shell\n$ yarn install\n\n# serve with hot reload at localhost:8080 by default.\n$ yarn serve\n\n# build for production\n$ yarn build\n```\n\nMade with [Vue.js](https://vuejs.org/)\n\n## Usage as npm Package\n\nIf you don't already have an existing Vue project, the easiest way to create one is to use [Vue CLI](https://cli.vuejs.org/):\n\n(For issues with Vue 3.13 and CLI 4 check [here](https://github.com/vuejs/vue-next/issues/4052))\n\n```shell\n$ npm install -g @vue/cli\n# OR\n$ yarn global add @vue/cli\n```\n\nAnd then create a project (refer to [Vue CLI documentation](https://cli.vuejs.org/guide/) and [issue tracker](https://github.com/vuejs/vue-cli/issues) for potential problems on Windows):\n\n```shell\n$ vue create my-project\n$ cd my-project\n```\n\nTo add Vue Flow Form as a dependency to your Vue project, use the following:\n\n```shell\n$ npm install @ditdot-dev/vue-flow-form --save\n```\n\nAnd then in your App.vue file:\n\n```html\n\u003ctemplate\u003e\n  \u003cflow-form v-bind:questions=\"questions\" v-bind:language=\"language\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // Import necessary components and classes\n  import { FlowForm, QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'\n\n  export default {\n    name: 'example',\n    components: {\n      FlowForm\n    },\n    data() {\n      return {\n        language: new LanguageModel({\n          // Your language definitions here (optional).\n          // You can leave out this prop if you want to use the default definitions.\n        }),\n        questions: [\n          // QuestionModel array\n          new QuestionModel({\n            title: 'Question',\n            type: QuestionType.MultipleChoice,\n            options: [\n              new ChoiceOption({\n                label: 'Answer'\n              })\n            ]\n          })\n        ]\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  /* Import Vue Flow Form base CSS */\n  @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css';\n  /* Import one of the Vue Flow Form CSS themes (optional) */\n  @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css';\n  /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */\n  /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */\n\u003c/style\u003e\n```\n\n## Usage with Plain JavaScript via CDN\n\nHTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003c!-- Requires Vue version 3.x --\u003e\n    \u003cscript src=\"https://unpkg.com/vue@next\"\u003e\u003c/script\u003e\n    \u003c!-- Flow Form --\u003e\n    \u003cscript src=\"https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2\"\u003e\u003c/script\u003e\n    \u003c!-- Flow Form base CSS --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2/dist/vue-flow-form.min.css\"\u003e\n    \u003c!-- Optional theme.css --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2/dist/vue-flow-form.theme-minimal.min.css\"\u003e\n    \u003c!-- Optional font --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900\u0026amp;display=swap\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nJavaScript (content of app.js):\n\n```js\nvar app = Vue.createApp({\n  el: '#app',\n  template: '\u003cflow-form v-bind:questions=\"questions\" v-bind:language=\"language\" /\u003e',\n  data: function() {\n    return {\n      language: new VueFlowForm.LanguageModel({\n        // Your language definitions here (optional).\n        // You can leave out this prop if you want to use the default definitions.\n      }),\n      questions: [\n        new VueFlowForm.QuestionModel({\n          title: 'Question',\n          type: VueFlowForm.QuestionType.MultipleChoice,\n          options: [\n            new VueFlowForm.ChoiceOption({\n              label: 'Answer'\n            })\n          ]\n        })\n      ]\n    }\n  }\n}).component('FlowForm', VueFlowForm.FlowForm);\n\nconst vm = app.mount('#app');\n```\n\n## Changelog\n\nChanges for each release are documented in the [release notes](https://github.com/ditdot-dev/vue-flow-form/releases).\n\n## Stay in Touch\n\n* [Twitter](https://twitter.com/ditdot_info)\n* [DITDOT](https://www.ditdot.hr/en)\n\n## License\n\n[MIT](https://github.com/ditdot-dev/vue-flow-form/blob/master/LICENSE) license.\n\nCopyright (c) 2020 - present, DITDOT Ltd.\n","funding_links":[],"categories":["Components \u0026 Libraries","Vue","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fditdot-dev%2Fvue-flow-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fditdot-dev%2Fvue-flow-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fditdot-dev%2Fvue-flow-form/lists"}