Awesome Open Source
Awesome Open Source

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

Project Documentation

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:

# clone the repo
$ git clone https://github.com/ditdot-dev/vue-flow-form.git myproject

# go into app's directory and install dependencies:
$ cd myproject

If you use npm:

$ npm install

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

# build for production
$ npm run build

If you use yarn:

$ yarn install

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

# build for production
$ yarn build

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)

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

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

$ vue create my-project
$ cd my-project

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

$ npm install @ditdot-dev/vue-flow-form --save

And then in your App.vue file:

<template>
  <flow-form v-bind:questions="questions" v-bind:language="language" />
</template>

<script>
  // Import necessary components and classes
  import { FlowForm, QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'

  export default {
    name: 'example',
    components: {
      FlowForm
    },
    data() {
      return {
        language: new LanguageModel({
          // Your language definitions here (optional).
          // You can leave out this prop if you want to use the default definitions.
        }),
        questions: [
          // QuestionModel array
          new QuestionModel({
            title: 'Question',
            type: QuestionType.MultipleChoice,
            options: [
              new ChoiceOption({
                label: 'Answer'
              })
            ]
          })
        ]
      }
    }
  }
</script>

<style>
  /* Import Vue Flow Form base CSS */
  @import '[email protected]/vue-flow-form/dist/vue-flow-form.css';
  /* Import one of the Vue Flow Form CSS themes (optional) */
  @import '[email protected]/vue-flow-form/dist/vue-flow-form.theme-minimal.css';
  /* @import '[email protected]/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
  /* @import '[email protected]/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
</style>

Usage with Plain JavaScript via CDN

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- Requires Vue version 3.x -->
    <script src="https://unpkg.com/[email protected]"></script>
    <!-- Flow Form -->
    <script src="https://unpkg.com/@ditdot-dev/[email protected]"></script>
    <!-- Flow Form base CSS -->
    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.min.css">
    <!-- Optional theme.css -->
    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.theme-minimal.min.css">
    <!-- Optional font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;900&amp;display=swap">
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

JavaScript (content of app.js):

var app = Vue.createApp({
  el: '#app',
  template: '<flow-form v-bind:questions="questions" v-bind:language="language" />',
  data: function() {
    return {
      language: new VueFlowForm.LanguageModel({
        // Your language definitions here (optional).
        // You can leave out this prop if you want to use the default definitions.
      }),
      questions: [
        new VueFlowForm.QuestionModel({
          title: 'Question',
          type: VueFlowForm.QuestionType.MultipleChoice,
          options: [
            new VueFlowForm.ChoiceOption({
              label: 'Answer'
            })
          ]
        })
      ]
    }
  }
}).component('FlowForm', VueFlowForm.FlowForm);

const vm = app.mount('#app');

Changelog

Changes for each release are documented in the release notes.

Stay in Touch

License

MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.

Alternatives To Vue Flow Form
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Vue (73,184
Vuejs (73,184
Vue2 (73,128
Form (20,134
Flow (10,511
Quiz (4,835
Survey (4,401
Vue3 (2,356
Vue Components (1,970
Conversational Ui (86
Questionnaire (78
Form Generator (70
Typeform (45
Survey Form (26