Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

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


  • 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 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:

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

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

  export default {
    name: 'example',
    components: {
    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'

  /* 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'; */

Usage with Plain JavaScript via CDN


<!DOCTYPE html>
    <meta charset="UTF-8">
    <!-- Requires Vue version 3.x -->
    <script src=""></script>
    <!-- Flow Form -->
    <script src=""></script>
    <!-- Flow Form base CSS -->
    <link rel="stylesheet" href="">
    <!-- Optional theme.css -->
    <link rel="stylesheet" href="">
    <!-- Optional font -->
    <link rel="stylesheet" href=";400;900&amp;display=swap">
    <div id="app"></div>
    <script src="app.js"></script>

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');


Changes for each release are documented in the release notes.

Stay in Touch


MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.