Skip to content

ditdot-dev/vue-flow-form

BranchesTags

Repository files navigation

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:

>
<html>
  <head>
    <meta charset="UTF-8">
    
    <script src="https://unpkg.com/vue@next">script>
    
    <script src="https://unpkg.com/@ditdot-dev/[email protected]">script>
    
    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.min.css">
    
    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.theme-minimal.min.css">
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&display=swap">
  head>
  <body>
    <div id="app">div>
    <script src="app.js">script>
  body>
html>

JavaScript (content of app.js):

', 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');">
var app = Vue.createApp({
  el: '#app',
  template: '',
  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.

About

Create conversational conditional-logic forms with Vue.js.

www.ditdot.hr/en/vue-flow-form

Topics

vuejs vue forms vue-components form survey conversational-ui vue2 typeform quiz questionnaire form-generator survey-form vue3

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

800 stars

Watchers

22 watching

Forks

181 forks
Report repository

Releases 18

v2.3.2 Latest
Jun 16, 2023
+ 17 releases

Packages

No packages published

Contributors 10

Languages