Vue Flow Form

Create conversational conditional-logic forms with Vue.js.

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:

``shell

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:

`shell
$ npm install

serve with hot reload at localhost:8080 by default.

$ npm run serve

build for production

$ npm run build
`

If you use yarn:

`shell
$ 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)

`shell
$ 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):

`shell
$ vue create my-project
$ cd my-project
`

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

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

And then in your App.vue file:

`html





`

Usage with Plain JavaScript via CDN

HTML:

`html

`

JavaScript (content of app.js):

`js
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

* Twitter
* DITDOT

License

MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.