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.
Requirements:
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
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/cliAnd then create a project (refer to Vue CLI documentation and issue tracker for potential problems on Windows):
$ vue create my-project
$ cd my-projectTo 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>
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.2"></script> <!-- Flow Form base CSS --> <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2/dist/vue-flow-form.min.css"> <!-- Optional theme.css --> <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2/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&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');
Changes for each release are documented in the release notes.
MIT license.
Copyright (c) 2020 - present, DITDOT Ltd.