Vue Flow Form

Create conversational conditional-logic forms with Vue.js.

VueForm
ditdot-dev/vue-flow-formwww.ditdot.hr/en/vue-flow-form@ditdot-dev/vue-flow-form

README

Vue Flow Form


Create conversational conditional-logic forms with Vue.js.

License Version cdnjs

v-form screenshots


Starting 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, check it out here.

Live Demos


Questionnaire example
Support page example
Quiz example

Project Documentation


Guide

Example Project


Requirements:

Node.js version 10.0.0 or above (12.0.0+ recommended)
npm version 5+ (or yarn version 1.16+)
Git

After checking the prerequisites, follow these simple steps to install and use Vue Form:

  1. ``` sh
  2. # clone the repo
  3. $ git clone https://github.com/ditdot-dev/vue-flow-form.git myproject

  5. # go into app's directory and install dependencies:
  6. $ cd myproject
  7. ```

If you use npm:

  1. ``` sh
  2. $ npm install

  4. # serve with hot reload at localhost:8080 by default.
  5. $ npm run serve

  7. # build for production
  8. $ npm run build
  9. ```

If you use yarn:

  1. ``` sh
  2. $ yarn install

  4. # serve with hot reload at localhost:8080 by default.
  5. $ yarn serve

  7. # build for production
  8. $ yarn build
  9. ```

Made with Vue.js

Usage as npm Package


If you don't already have an existing Vue project, the easiest way to create one is to use Vue CLI:

(For issues with Vue 3.13 and CLI 4 check here)

  1. ``` sh
  2. $ npm install -g @vue/cli
  3. # OR
  4. $ yarn global add @vue/cli
  5. ```

And then create a project (refer to Vue CLI documentation and issue tracker for potential problems on Windows):

  1. ``` sh
  2. $ vue create my-project
  3. $ cd my-project
  4. ```

To add Vue Flow Form as a dependency to your Vue project, use the following:

  1. ``` sh
  2. $ npm install @ditdot-dev/vue-flow-form --save
  3. ```

And then in your App.vue file:

  1. ``` html
  2. <template>
  3.   <flow-form v-bind:questions="questions" v-bind:language="language" />
  4. </template>
  5. <script>
  6.   // Import necessary components and classes
  7.   import { FlowForm, QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
  9.   export default {
  10.     name: 'example',
  11.     components: {
  12.       FlowForm
  13.     },
  14.     data() {
  15.       return {
  16.         language: new LanguageModel({
  17.           // Your language definitions here (optional).
  18.           // You can leave out this prop if you want to use the default definitions.
  19.         }),
  20.         questions: [
  21.           // QuestionModel array
  22.           new QuestionModel({
  23.             title: 'Question',
  24.             type: QuestionType.MultipleChoice,
  25.             options: [
  26.               new ChoiceOption({
  27.                 label: 'Answer'
  28.               })
  29.             ]
  30.           })
  31.         ]
  32.       }
  33.     }
  34.   }
  35. </script>
  36. <style>
  37.   /* Import Vue Flow Form base CSS */
  38.   @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css';
  39.   /* Import one of the Vue Flow Form CSS themes (optional) */
  40.   @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css';
  41.   /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
  42.   /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
  43. </style>
  44. ```

Usage with Plain JavaScript via CDN


HTML:

  1. ``` html
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     
  7.     <script src="https://unpkg.com/vue@next"></script>
  8.     
  9.     <script src="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.1"></script>
  10.     
  11.     <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.1/dist/vue-flow-form.min.css">
  12.     
  13.     <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.1/dist/vue-flow-form.theme-minimal.min.css">
  14.     
  15.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&display=swap">
  16.   </head>
  17.   <body>
  18.     <div id="app"></div>
  19.     <script src="app.js"></script>
  20.   </body>
  21. </html>
  22. ```

JavaScript (content of app.js):

  1. ``` js
  2. var app = Vue.createApp({
  3.   el: '#app',
  4.   template: '<flow-form v-bind:questions="questions" v-bind:language="language" />',
  5.   data: function() {
  6.     return {
  7.       language: new VueFlowForm.LanguageModel({
  8.         // Your language definitions here (optional).
  9.         // You can leave out this prop if you want to use the default definitions.
  10.       }),
  11.       questions: [
  12.         new VueFlowForm.QuestionModel({
  13.           title: 'Question',
  14.           type: VueFlowForm.QuestionType.MultipleChoice,
  15.           options: [
  16.             new VueFlowForm.ChoiceOption({
  17.               label: 'Answer'
  18.             })
  19.           ]
  20.         })
  21.       ]
  22.     }
  23.   }
  24. }).component('FlowForm', VueFlowForm.FlowForm);

  26. const vm = app.mount('#app');
  27. ```

Changelog


Changes for each release are documented in the release notes.

Stay in Touch


Twitter
DITDOT

License


MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.