Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ditdot-dev/vue-flow-form

Create conversational conditional-logic forms with Vue.js.
https://github.com/ditdot-dev/vue-flow-form

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

Last synced: about 2 months ago
JSON representation

Create conversational conditional-logic forms with Vue.js.

Lists

README 

        
# 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



* [Questionnaire example](https://www.ditdot.hr/demo/vff/questionnaire/)

* [Support page example](https://www.ditdot.hr/demo/vff/support-page/)

* [Quiz example](https://www.ditdot.hr/demo/vff/quiz/)



## Project Documentation



* [Guide](https://www.ditdot.hr/en/docs/vue-flow-form-guide)



## Example Project



Requirements:



* [Node.js](https://nodejs.org/en/) version 10.0.0 or above (12.0.0+ recommended)

* [npm](https://www.npmjs.com/get-npm) version 5+ (or [yarn](https://yarnpkg.com/lang/en/docs/install/) version 1.16+)

* [Git](https://git-scm.com/)



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](https://vuejs.org/)



## 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](https://cli.vuejs.org/):



(For issues with Vue 3.13 and CLI 4 check [here](https://github.com/vuejs/vue-next/issues/4052))



```shell

$ npm install -g @vue/cli

# OR

$ yarn global add @vue/cli

```



And then create a project (refer to [Vue CLI documentation](https://cli.vuejs.org/guide/) and [issue tracker](https://github.com/vuejs/vue-cli/issues) 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



  



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

              })

            ]

          })

        ]

      }

    }

  }



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



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](https://github.com/ditdot-dev/vue-flow-form/releases).



## Stay in Touch



* [Twitter](https://twitter.com/ditdot_info)

* [DITDOT](https://www.ditdot.hr/en)



## License



[MIT](https://github.com/ditdot-dev/vue-flow-form/blob/master/LICENSE) license.



Copyright (c) 2020 - present, DITDOT Ltd.