JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Vue Flow Form

    Create conversational conditional-logic forms with Vue.js.
    Filed under 

    • 🔾43%Overall
    • 579
    • 4.4 days
    • 🕩126
    • 👥7

    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 '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css';
      /* Import one of the Vue Flow Form CSS themes (optional) */
      @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css';
      /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
      /* @import '~@ditdot-dev/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/vue@next"></script>
        <!-- Flow Form -->
        <script src="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.1"></script>
        <!-- Flow Form base CSS -->
        <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.1/dist/vue-flow-form.min.css">
        <!-- Optional theme.css -->
        <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.1/dist/vue-flow-form.theme-minimal.min.css">
        <!-- Optional font -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;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.

    Show All